Drawing graphs in a webpage

As you may know if you follow me on Twitter, a couple of weeks ago I started to investigate ways of producing graphs within a webpage. The driver for this was for a dashboard application to track progress against targets and was one of those “JFDI” projects at work that we all get sprung upon us from time to time.  The key requirement was for slick looking graphs  above all else.  For speed of development I decided I wanted a client-side solution so that quickly focussed my investigation around 3 approaches:

  1. Images generated off-platform (Google Charts)
  2. Flash (Fusion Charts)
  3. Javascript (JQuery + Flot)
For my project we focussed on Option 2 and 3 and eventually setttled on the Javascript route. I’ve summarised below the factors that influenced our decision.

Images (Google Charts)

http://code.google.com/apis/chart

I’ve been looking for an excuse to use Google Charts for some time as it’s a very simple API for embedding an image in a webpage yet produces really good looking charts (far better than I’ve seen in equivalent comercial applications). To use GoogleCharts you simply generate a url like the one below, and use it as the src attribute in an image tag.

[code lang="html"]

http://chart.apis.google.com/chart?cht=lc&chs=200x100&chd=s:ithankYouGodformostthisamazingdayforthel&chxt=x,y&chxl=0:|Apr|May|June|1:||50+Kb

[/code]

Google Charts supports an extensive range of chart types beyond the regular bar, line & pie and the images can be annotated with custom text for the legend, axes and data series. Like all Google’s API services, Charts is free to use, and although there’s no hard rate limit Google do reserve the right to block any traffic that they detect as “abusive” beyond 250,000 hits per day (not an issue for my application but worth bearing in mind).

Flash (Fusion Charts)

http://www.fusioncharts.com/

For the type of slick interactive graphs that were needed for this project, flash was in many ways the obvious choice. Personally I’m not a big fan of flash, partly because I have zero flash skills but also because downloading flash files often bloats the page unecessarily and is littered with fancy effects that apart from being annoying are usually not accessible. However, after taking a look at the Fusion Charts gallery I had to give it serious cosideration becuase it ha’s support for a huge range of chart types (many of which I hadn’t even seen before I don’t really know what they represent!). There can be no denying that the charts themselves are really nice to look at and the tutorials show how easy it is to get set up and running.

Click the image to view working demo

Click the image to view working demo

It wasn’t until I created a quick prototype using some static data (click the image above) that I started to have a few doubts: When you embed a FusionCharts flash object on your webpage, you pass it a url where the source data will be retrieved from. This data must be in the FusionCharts prescribed XML format which is fine if you’re creating your own data sources, but not if you want to consume an existing csv/xml/json feed. There’s no Javascript API to the flash object so you can’t parse data within your page and then pass it to the flash to render. Also, if you wanted to allow the user to zoom in and out of the chart, or toggle series on and off, your chart would need to fetch a new dynamically generated data feed each time. This adds load on  the server, but also degrades performance because of the round-trip delay in requesting new data which seems unecessary when all the data is already held within the page and just needs to be filtered. I also discovered that although the flash file is only 60KB in size, that’s only for one chart type, if you want to switch to bar or pie you have to load another flash file each time.  For these reasons and also because FusionCharts is proprietary software that we can’t edit/enhance and comes with a (albeit very reasonable) licence fee we decided to rule out this option.

Javascript (JQuery + Flot)

http://code.google.com/p/flot/

Flot turned out to be a great find. It produces very customisable, great looking graphs, and the API will feel familiar to anyone that has worked with the Google Maps API – import a JS library, create an element on the page to contain your chart, then create a JS plot object and pass it your data and some (optional) configuration arguments. The beauty of Flot is that it can interact with the page around it by raising events when the user clicks the chart, selects an area or hovers near a data point. Using the JS API you can redraw the chart either with different min/max boundaries (for zooming) or with different data series (to toggle data on/off). Also, because data is passed to the chart as a JSON object, the data can be fetched in any format from a remote source (css/xml/JSON) and can be parsed/filtered within the browser. Another great feature is that events in your chart can be setup to affect another chart on the page so for example, in the demo below there’s a small overview chart that is used to indicate the area of focus when the user zooms on the main chart. In the example below, I retrieve the data from a remote CSV file (I’m actually using JSON for the real app but this was an interesting experiment).

Click the image to view working demo

Click the image to view working demo

Flot is by no means perfect: it’s only at version 0.6 (and hasn’t been updated in around 12months)  and although the features are impressive, there are a few short falls.  It really only supports line and bar charts (there’s a patch discussed on the flot issue tracker that adds support for pie charts). Also, to get certain features to work (e.g. tooltips and zooming) you need to write you own implementation using the events generated by flot – there’s no chart.enableZooming() here! Having said that, these are only minor criticisms about features that aren’t even available at all in the alternative solutions.

Also worthy of a mention:

Sparklines

http://www.omnipotent.net/jquery.sparkline/

Toward the end of my search I found Sparklines (via @stevereynolds). It’s a nifty little jquery plugin for producing tiny little charts – similar to the “summary” charts on the Google Analytics dashboard page. I haven’t actually used it (yet) but it looks useful for times when you want several small graphs on a single page to give an indication of trends and to entice users to dig deeper for more in-depth analysis.

Leave a Reply