This Mootools pie chart class is based on Stoyan Stefanov’s Canvas Pie. I have added a dynamically drawn image map that overlays the canvas. The image map areas coincide with the pie slices and trigger the Mootools tooltips.
The code now requires less html markup than the original. After adding the js and css assets to the html header, all you need to do is add the “pieChart” class to your tables. The pie chart javascript then inserts everything else for you.
I also swapped out Stoyan’s random color algorithm for one that makes a nice rainbow, something with a more Mootools feel to it.
After working on this I realized it would be nice if the canvas element had a usemap parameter like img elements do. This would have saved me from having to overlay the canvas with a blank, transparent gif, and would make creating clickable canvas graphics slightly more intuitive for people. Better yet if after closing a path there were a way to add the individual shape created directly to the dom, and thus circumvent the need for an image map entirely.
This code has been tested in Firefox 2, Internet Explorer 6 & 7, Safari 2, and Opera 9.
Enjoy.
