I’ve been doing a little research into creating interactive graphs on web pages.  Some quick notes from my research (this isn’t meant to be an exhaustive list by any means):

d3.js

  • Suggested by Aideen in the comments below.
  • Awesomely sexy.
  • Single framework which should work for graphing time series, showing the fit of model reconstructions to data timeseries, displaying and editing graphical models etc.
  • Is a “visualisation framework” rather than a graphing framework.  Hence requires more code to produce simple graphs than “pure” graphing frameworks.  But is capable of gorgeous animations and, importantly for me, is capable of doing gorgeous things with graphical models.
  • Requires modern browser with SVG support.  Tested (and works) on IE9, Chromium 17, iPad 2 (animation a little sluggish), Firefox 3.6, 6 and 10 (animation can be a little sluggish in all FF versions).
  • Does not work on Android 2.1 browser or IE6 (because they don’t support SVG)
  • There also exists a timerseries visualisation tool built on top of d3.js called Cube.
  • Here’s an example line chart and a nice tutorial on making a line graph with d3; and lots of basic (but elegant), static charts done in d3.
  • Update 29/2/2012: d3 does look awesome.  However, you also have to write a lot of code to generate fairly simple line graphs, hence I may be going off d3 in favour of something like Raphaël.  d3 appears to be able to do graphical models fairly simply though.
  • Update 13/3/2012: Back to d3!!! I tinkered with Raphael and it is lovely; but I found myself having to do some ugly hacks to get what I wanted.  d3, on the other hand, is enormously flexible.

Google Chart API

  • JavaScript
  • Works on IE6, 7 and 8 (I’ve just tested it)
  • Works on ipad
  • does not work on android 2.1 browser
  • Nice easy API
  • Free
  • Fairly fast, although there can be a noticable delay while the chart loads
  • Loads of options.
  • Can trigger events
  • Pachube already has some apps using Google Chart API

Highcharts JS

  • JavaScript
  • Free for non-commercial use (but have to pay for commercial use)
  • Works on IE6 (I’ve just tested it)
  • works on iPad
  • Claims to work on Android 2.x browser (although it won’t load on my android 2.1 phone)
  • Loads of options
  • Can trigger events

dygraphs

  • zoomable graphs of timeseries

Matplotlib

And here’s a list of 5 JavaScript graph plotting libraries.

I’ve started tinkering with the Google Chart API and it seems nice.

Current conclusions

  • For plotting relatively simple graphs on my blog I’ll probably use Google Graph API or export SVGs & PNGs from Matplotlib or gnuplot.  Google Graph API is easy to use, free and supports most browsers.
  • For plotting graphs which might end up in a LaTeX document, I’ll use gnuplot or Matplotlib or matlabfrag
  • For building my smart meter disaggregation system, I’ll probably use d3.js.  It’ll enable me to display and edit graphical models, display and interact with data, manually fit models to data by dragging with a mouse etc.