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.


If you want some sample code, could you provide a sample graph?

Written by Niklas

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?

Written by brukekek

Accepted Answer

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.

This page was build to provide you fast access to the question and the direct accepted answer.
The content is written by members of the stackoverflow.com community.
It is licensed under cc-wiki