2

I'm building a chart populated from the database. Now, I wanted to click each point to drill down some information to users. I don't know how to integrate image mapping to each element of the chart dynamically created on the fly. Can you please provide as sample codes, links or articles regarding this subject. Thanks and more power to SO.

brukekek
  • 25
  • 1
  • 4
  • If you want some sample code, could you provide a sample graph? – Niklas Jun 18 '11 at 16:09
  • The graph i'm developing is a very basic bar graph. Let's say for example: A=50, B=60, C=75. Then clicking each element in the graph will give me more details. I'm creating this graph dynamically using gd codes i've collected around the web. I have not seen anything that dynamically attaching events like onlick/onmousehover to gd images. There are 3rd party plugins and tools but I don't think my application should rely on them. I found this image mapping the closest thing I need to implement my requirements. Can you post a simple code where I can start exploring this concepts? – brukekek Jun 18 '11 at 17:32

1 Answers1

0

Client-side image maps are basically set areas overlayed on an image configured to be click-able links. The links can either be javascript or point to other pages. The area shape options are rectangle (rect), circle (circle), and polygon (poly), and you can set the area dimensions and locations relative to spots on the image. The link above shows examples. When you build the image map from server side script, you'd have full control over the areas (perhaps an entire bar) and their associated links (perhaps leading to a query script with the ID number of the label attached).

Basically, you have to build the chart twice in your scripts: 1st script building and serving the image, 2nd script (the main html view) building a matching map with set of coordinates to fit over the image.

You might also be interested in Server-side image maps. When you set an IMG element property of ismap and wrap the image element in a clickable hyperlink, it allows it so the user can click anywhere on the image, and the coordinates of where they clicked (x,y) will be automatically sent as extra GET parameters along with the hyperlink. On the server side script, look for the $_GET key that looks like coordinates (IE the keyname will be "355,71" if the client clicked on x355, y71 on the image). You'd then translate these numbers to areas on the dynamic chart.

bob-the-destroyer
  • 3,164
  • 2
  • 23
  • 30
  • – brukekek Jun 18 '11 at 16:44
  • Above is the code i have trying to implements image mapping. What do you think i need to use (client side or server side)? – brukekek Jun 18 '11 at 16:46
  • "Server-side" may be better for actual geographic maps actually. "Client-side" may be best. Basically, you have to redo the queries you used in `mygraph.php` to build and serve the image, this time in your main html page to build and serve the image map. – bob-the-destroyer Jun 18 '11 at 17:10
  • For example, in `mygraph.php`, perhaps you had some code like `imagefilledrectangle(100, 0, 11, 10)` to draw a rectangle representing "this group is at 89%" or something. Then in your main html page, you'd copy that: `` – bob-the-destroyer Jun 18 '11 at 17:19
  • echo ""; for ($i=0;$i<7;$i++) { $y_ht = ($data[$i]/$sum)* $height; imagefilledrectangle($im, $x, $y, $x+$x_width, ($y-$y_ht), $red); $x2 = $x + $x_width; $y2 = $y - $y_ht; echo ""; imagestring( $im, 2, $x-1, $y+10, $data[$i], $black); $x += ($x_width+20); } imagejpeg($im,'mygraph.jpeg'); echo ""; echo ""; – brukekek Jun 18 '11 at 18:06
  • @brukekek: sort of. Remember you're serving two separate files here: 1) the image; 2) the html making the image interactive. Different mime types. So you can't do all that in the same script. But, you get the gist of it. – bob-the-destroyer Jun 18 '11 at 18:10