Latest: Express.js Route Middleware

Content with Style

Web Technique

Looking at free charts and stats APIs

by Pascal Opitz on December 4 2008, 14:28

At the moment I am looking for a nice way to convert HTML tables into stats. I am thinking along the lines of SIFR, where flash replaces markup and displays dynamic data. But first I need something that displays dynamic stats ...

Flash Based:

The first thing that I found was XML/SWF Charts, which did look brilliant at first glance. Unfortunately the free version includes a link to their homepage, whenever one clicks on the object, and of course that's out of discussion.

I then looked at FusionCharts Free, but didn't find a way to quickly modify the shadows for the bar charts. Another Google search lead me to Open Flash Chart 2, which pretty much does want I want it to.

All of the above are meant to work with a datafile that is loaded, like XML or JSON, and to get them to work with inline data requires a bit of JavaScript trickery, as this example for OpenFlashChart illustrates:

function get_data(id) {
 return $.toJSON(data_obj);

var data_obj = { 
  "elements": [ { "type": "bar", "values": [ 9, 8] } ], 
  "title": { "text": "Thu Dec 04 2008" } 
var swf_config = { "get-data": "get_data", "id": "my_chart"};
$.swfobject.embedSWF("../3rdparty/open_flash_chart_2/open-flash-chart.swf", "my_chart", "200", "200", "9.0.0", "expressInstall.swf", swf_config);

Not ideal in my books, I thought to myself, but I could work around this somehow. Some further Google search (and at the same time, Matthias), however, pointed me towards solutions based on the canvas tag.

Canvas Based:

The lack of support for canvas in IE was one of the reasons for me to pretty much ignore it. Probably the reason why I missed the ventures that try to work around the lack of support, namely a flash based canvas integration, but also an emulated canvas for IE implementation based on SVG, and its successor, excanvas.

Some tools utilizing this technique are PlotKit, WebFX Chart, its rewrite Canvas Charts and Bluff.

I managed to quickly get something off the ground with Bluff, and not only does the built in facility to use an HTML table as data source works great towards what I want to do, but the whole script looks considerably more tidy as well:

window.onload = function() {
var g = new Bluff.Mini.Bar('example', 400);
 g.minimum_value = 0;
 g.maximum_value = 10;


Of course there is a variety of other techniques and APIs to generate charts and stats. From the Google Charts API down to Perl based CPAN modules that generate SVG. But most of those won't work on the client, but will require some server action, and client based rendering was one of my initial requirements.

Bottom Line:

It will canvas rather than SWF based charts, I think.

Also it seams that canvas offers better answers to the problems that we were facing before, like the image replacement for headlines, nicely tackled by Typface.js.

While for some of you web folks this might all be yesterdays news, I am amazed about how far the dynamic client side has come now. The Silverlight implementation without Silverlight, for example, is a step that goes so far beyond anything that I'd have ever expected, that I can only say: Amazing stuff.



The longer I do search around the web, the more I discover:


  • Not free, but a great XML based flash charting engine: For a company it is cheap, perhaps for an individual it is expensive though. They also have a version for Gantt charts. Plus it is much prettier than the Open Flash Chart 2 listed above.

    by Phillip on May 12 2009, 04:26 - #

Leave your comment

Comments are moderated.
Tags allowed: a, strong, em, code, ul, ol, li, q, blockquote, br, p