Tuesday, February 5th, 2008
Canvas Pie Chart from datatable
Category: Canvas
, Unobtrusive JS
I love it when a plan comes together (removes cigar): After I played with Google charts and porting the idea of generating charts from accessible table data over to YUI charts Stoyan Stevanof had to use the same idea to generate his own, home-made Canvas-driven charts:
His solution shows in a few lines not only how to get the data from a table, but also how to do a pie chart in canvas.
3.4 rating from 16 votes
Fu*k IE. Really. This lil code block is beautiful and works in Opera, FF, and Safari. To get it to work in IE, you’ll have to double the amount of code.
Chris is being modest by not plugging the book to which he contributed, but I’m happy to — Cameron Adams has written a chapter on creating pie charts with canvas in The Art & Science of JavaScript, published by SitePoint. It covers using to get the ExplorerCanvas script, which converts your code to VML for IE. Without any extra code.
More than a year ago I did piechart without canvas or Flash. Just pure HTML, CSS & JavaScript: Piechart. To do it in canvas is too easy. :)
I made an AJAX GUI for the google charts API. It works ok but it needs more development to be honest. It doesn’t yet include every feature of the API. Google Charts
I’ve wrapped up a rough JQuery plugin around this, in case someone is interested: http://blogs.atalayasec.org/dev/?p=9