Emil’s Chronicle - The journal of Emil A Eklund

Charts

Chart generated by DHTML component 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:

6 Responses to 'Charts'

  1. David Håsäther Says:

    Really, really nice. Great work Emil.

  2. Rune Jensen Says:

    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.

  3. andot Says:

    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.

  4. andot Says:

    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.

  5. Erik Arvidsson Says:

    andot: Wow, that is really nice.

  6. andot Says:

    The axis and legend can’t print on correct position.

Leave a Reply

(required)
(required, will not be published)