Implementation

As HTML in itself doesn't include any functionality for drawing the only kind of chart that can easily be made is the bar chart. Stretching an image, or a block container (such as a div), to a certain width will accomplish that. Creating line, area and pie charts though is a bit trickier.

Drawing

With the release of Internet Explorer 5 Microsoft introduced an API for drawing vector graphics, called VML. Erik wrote the VML Clock article shortly after it's release to showcase it, however it's seen little coverage and hardly any deployment. (Bindows™, the company where Erik used to work, actually does use VML in a few of their components, such as charts and gauges).

One of the reasons VML has hardly seen any use is because it's IE only and most people have been waiting for SVG. Which has been under way for several years now but only recently where added to the default Mozilla builds and Opera. To make matters worse it seems IE will not be getting native SVG support anytime soon.

Canvas

Early last year Apple introduced Canvas, yet another technology for drawing, in their Safari web browser. Unlike SVG and VML it's based on pixels rather than vectors. While this might seems inferior it's actually very suitable for drawing fixed size 2D graphics, such as charts and graphs.

Since being introduced by Apple support for it has been added both to Mozilla and Opera, making it available in all major web browser but IE.

My original plan was to create the Chart component to use different painters depending on the browser, that way VML could be used in IE and Canvas or SVG in all other browsers. That's also how I built it, but at the time the API and the Canvas painter implementation where complete the IECanvas emulation project I've been working on had come far enough to allow the Canvas implementation to be used in IE as well.

Introduction
Implementation
Usage
API
Demo
SVG Demo (mozilla/opera only)
JsGraphics Demo
Download

Author: Emil A Eklund