MOOTOOLS AND CANVAS CHART WITH TOOLTIPS

There's a lot of good stuff out there these days when it comes to drawing charts and graphs using the (relatively) new <canvas> tag. This is great to see because the benefits of switching to canvas for charting needs are certainly persuasive. It's psuedo cross browser (thanks Google), works on smartphones and is a lightweight and fast solution at a time when web page performance is becoming increasingly important in large web applications and on mobile devices.

The following is my attempt at writing a cross browser Mootools-based pie chart class with tooltip support. It has been thoroughly tested in IE 6-8, Firefox, Safari, Chrome, Opera and on the iPad (tips won't show but the chart renders nicely). The tooltip feature itself uses a technique I found online by Greg Houston, author of Mocha UI, who used an image map with polygon-shaped pie slices as a way to track mouse move events effeciently over the pie chart (interesting related tidbit). Documentation to follow.

GitHub project page | View Script Source | View CSS Source

I suspect we'll soon start to see some crazy 3D charts once more browser vendors implement WebGL. In the meantime hope you guys find this code useful!

//
// Charting class for Mootools using Canvas
//
// MIT-style license. Copyright 2010 Matt V. Murphy | bW11cnBoMjExQGdtYWlsLmNvbQ==
// Requires Mootools 1.3 and Mootools 1.3 More (Class.Binds, Color)
// Requires ExCanvas for Internet Explorer 6-8 support
// Credits to Greg Houston (http://demos.greghoustondesign.com/piechart/)
//
//////////////////////////////////////////////////////////////////////////
// Links:
//
// - Demo: http://www.matts411.com/post/canvas_charts/
// - GitHub: http://github.com/mmurph211/Chart
//
//////////////////////////////////////////////////////////////////////////
// Features:
//
// - Cross browser compatible (Internet Explorer, FireFox, Chrome, Safari, Opera)
// - Pie charts with tooltips
// 
//////////////////////////////////////////////////////////////////////////
// Future Features and TODO:
//
// - Documentation
// - Bar Charts
// - Line Charts
//