Drawing graphs with Javascript

If you’re viewing this post in your feedreader, head over to the site to see the example graph!

I’ve been experimenting with Javascript libraries for building graphs dynamically in the client browser. In the past if I’ve wanted to create simple bar graphs I’ve used divs and css – an approach has the advantage of being super lightweight (read “fast”) and usually works cross-browser without too much hassle. The big disadvantage is that it’s inflexible (limited to bar graphs and difficult to update the data once the graph has been rendered) and is a pain to code if there’s more than a couple of rows of data to be plotted.

A few minutes on Google last week came up with a couple of examples of Javacript libraries that can produce much fancier graphs. I’ve settled on PlotKit because it produces beautiful graphs, works in the major browsers (using either Canvas or SVG) and has the most developer friendly licence, .

The example below gets a feed of the BT shareprice from Google (fed through a Yahoo Pipe to convert to JSON – the pipe can be reused as it takes the ticker symbol as a parameter). It then iterates over the feed data to populate the graph and finally calls render() on the graph object.

A handy library to keep in your developer toolbox!

Although not relevant for the data I’m graphing here, PlotKit can also draw really sweet pie charts.

One Comment to “Drawing graphs with Javascript”

  1. music 8 January 2008 at 3:53 pm #

    very interesting.
    i’m adding in RSS Reader

Leave a Reply