pChart and jQuery image map hover

Posted in: Blog, PHP by Craig Davis on June 19, 2010

I have used pChart as a graphing and charting package in several projects. It produces clean graphs, but its native tooltip support has always disappointed me.

I set about to update this with new functionality and to replace the existing javascript with something new from jQuery. I’ve chosen to use qTip to handle the tooltip production, and have extended pChart with new functions for both pChart_Map::SaveImageMap() and pChart_Map::GetImageMap(). These functions now produce an image map rather than the pChart data format.

Demo

You can see a working demo in my project sandbox.

Download

Download pChart_Map

How it works

1. The page has a new jQuery plugin called pChart() for each of the pChart images.
2. The browser calls the pChart image producer with a unique ID for the image
3. As the pChart image is created, pChart writes an image map file for this ID to a tmp directory
4. The jQuery load() event catches when pChart has loaded the image
5. jQuery loads the newly created image map file from disk via pChart
6. jQuery attaches the image map to the image, and then applies qTip to the chart for this image map

Notes

• Make sure that the image tag has an id that matches the MapID on the get request for the chart.