Canvas diagram with animation, HTML5 and Javascript

September 22, 2011

I think I’ve already presented one canvas diagram class here on this page, but I’ve created a new and improved one, based on the first. This one has a little more options, and is a little cooler. Besides only showing data, this class has some tricks up its sleeves, like animation, fading and different kinds of diagrams. I’ve built in support for two types of diagrams, the most common ones, the normal line-chart and the normal staple diagram. The class is built as a JS prototype, and I’ve added some options so you can change the looks of the diagram so it suits your needs. I would paste the code in here, but considering the file being around 650 lines of code, I’ve added a download link in the bottom of this post. There’s not much of documentation in the file, but enough to get you started, or atleast display a diagram.

When I built this I also found the awesome function bind() in javascript, which is a god-blessing when handling with intervals, for those who don’t know what I’m talking about, read about it at Mozilla developer network. Another thing worth mentioning is because it’s built around the canvas tag, browser support might not be that large, but this thing should work with all of the latest stable versions.

Tested in Chrome 14, Firefox 6.0.2, Internet Explorer 9, Opera 11.50. They were all tested on Windows 7.

Check it out here

Dowload resource

diagram.prototype (20.92 kB)

Tags