Charts
The very first thing I though about when I started to play around with canvas was that it would be great to make charts with.
There are quite a few places where client side charts makes more sense than those generated on the server side and sent as an image.
For instance if the date originates from the client it saves a round trip to the server, it allows modification (adding/removing series, resizing etc) without a reload and can be used regardless of server software.
I started to work on a chart component a about a week ago and I just finished it.
It’s built with painting abstraction so that any available painter implementation can be used, such as Canvas, SVG, VML, or even plain text. So far I’ve only created a Canvas implementation and a SVG one.
The canvas implementation works well enough in IE together with the IECanvas emulation that I haven’t felt the need to create a VML one yet.
I’ve just uploaded it to WebFX follow one of these links to check it out:
- Chart Introduction
- Implementation
- Usage
- API
- Demo
- SVG Demo (mozilla and opera only)
- Download
January 8th, 2006 at 12:15
Really, really nice. Great work Emil.
January 20th, 2006 at 09:31
It is an inspiration to see what you get out of the browsers!
I got many idea from reading this article. One was to build a similar extension that produces pie charts.
On the other hand I would consider making the charts based on xml files transformed by xslt. That would make a layer of ease of use.
I came across that idea by searching google, where I found this page:
http://www.treebuilder.de/svg/extentSVG/documentation.html
Combining your crossbrowser abstraction layer with that xslt would make the ideal sullotion I think.
February 2nd, 2006 at 20:08
I’ve written a JavaScript Graphics implementation of this chart component, and uploaded it to CoolCode.CN. it works well on most browsers than the canvas implementation.
February 3rd, 2006 at 06:18
I think to use array[array.length] = value is better than array.push(value) in chart.js. Because other painter implementation may be can run in lower version browser, but it not support array.push method.
window.setTimeout(function() {
…
…
}, (document.all)?500:0);
in Chart.prototype.draw, I think it’s not very useful. The iecanvas.htc load error can be handled out of this class. because not every painter implementation need IECanvas.
you can find a modified version in CoolCode.CN, It can run at IE 5.0，and other lower version browsers.
February 14th, 2006 at 08:36
andot: Wow, that is really nice.
March 5th, 2006 at 05:49
The axis and legend can’t print on correct position.