Using image maps with JpGraph

Image maps, or client side image (CSIM) as they are known is fully supported in JpGraph. It gives you the opportunity to create hot-spots in the graphs which allows you to build a set of "drill-down" graphs.

In the following section is based on the assumption that the reader is familiar with the basic concepts of client side image map in HTML.

To shortly recapitulate. Client side image maps consists of two parts. The first part is the actual image and the second part is a mapping that gives the coordinates for areas in the image which should be marked as hot spots (i.e. click-able by the user). The library can automatically generate these coordinate maps from a given graph.

Through out the manual areas of the graph that may be used as a hotspot is given in conjuction with the general description of that area.

*Since we normally call the graphing script directly in the "IMG" tag how do we get hold of the image map (which is available only in the image script) in this "HTML wrapper" script?

In JpGraph there is actually two ways of solving this.

1. Use the preferred "builtin" way using the modified Stroke() method Graph::StrokeCSIM() instead of the standard Graph::Stroke() method.
2. Directly use the Graph::GetHTMLImageMap() which gives you fine control at the expense of more complex coding.

The first (and preferred) way modifies the stroke method so that instead of returning an image (like the standard Stroke() method) StrokeCSIM() actually returns an HTML page containing both the image map specification and the correct "IMG" tag.

This of course means that it is necessary to treat an image map returning image script differently from a non-CSIM image script, for example you can't use it directly as the target for the "src" attribute of the "IMG" tag since it sends back an actual HTML page containing both an image tag together with an image map

What the hotspots represent depends on the type of plot you are doing. The following plot types and graph areas support image maps.

• Line plots. Markers are hotspots.
• Scatter plot. Markers are hotspots.
• Pie Plots and 3D Pie plots. Each slice is a hotspot
• All types of Bar graphs. Each bar is a hotspot
• Legends
• Text strings, for example titles and title of axis

There are two arguments to this method

1. $aTargets, an array of valid URL targets. One URL per hot spot, for example if you have a 10 values bar plot you need 10 URLs. If the SetCSIMTarget() is applied to, for example, a text then of course only one URL target should be specified.
2. $aAlts, an array of valid alt-texts. Many browsers (but not all) will show this text string if the mouse hovers over a hotspot.