I’m in the process of evaluating various AJAX/DHTML frameworks for an enterprise application and one of the needs that deserved some hands-on experimentation was the ability create charts.
As a fairly simple and common use case I choose a target of a line chart that showed the number of users of a few services over time and defined some basic requirements:
- The data must be fetched from a separate URL, not defined on the presentation page (this URL will be a web service in production)
- Three series must be displayed at once
- The data points should have tooltips
- ‘Out-of-the-box’ components should be used when possible
- A non-flash solution is preferred
Some of the points I found interesting from each framework follow. Note that the charts here are only screenshots as I didn’t find any immediately obvious way to get the real charts working on wordpress.com.
Flot seems to prefer its data in JSON format organized by series and we want to simulate a web service so we’ll create a file
data/users-series-format.json containing something like:
Setup was simple enough. Include the scripts:
put in the placeholder where you want the chart:
get the data and build the chart:
Adding the tooltip was a little more complicated but not terribly so.
The Yahoo! User Interface Library (YUI) is a mature, robust library with Yahoo-supplied components for just about everything.
The YUI Charts Control (labeled as experimental at the time of this writing) creates nice looking charts, but they are flash-based.
There is plenty of documentation on YUI’s charts so I won’t go into too much detail but the concepts are similar to above.
YUI’s DataSource component can handle several data formats, for consistency’s sake I went with JSON so my file
data/users-raw-format.json (named so since it most closely resembles the raw data used to build it) contains:
I did have trouble getting this data to load properly via URL when the HTML file containing the DataSource code was loaded in the browser via
file:// rather than
http:// even after adding the file location to the Flash global security settings.
Include the scripts (YUI’s dependency configurator comes in handy here), add a place holder div for the chart, get the data, and build the chart.
Don’t forget to set
YAHOO.widget.Chart.SWFURL to a location containing the swf.
Once again we have a similar pattern for getting things running.
We’ll again use JSON and with Google’s format our
data/users-google-format.json file looks like:
At first the format seemed cumbersome but I realize that many users would prefer this close resemblance to how the same data would appear in a spreadsheet.
initialize loads the data:
and the query calls
handleQueryResponse which draws the chart:
Even with the extensive documentation and examples available on YUI I’d have to say it was the most difficult to deal with, presenting some little problem at almost every turn.
It didn’t seem that it would be very easy to use a JSON format other than the one recommended by the framework for any of the tools evaluated, which is disappointing.
There are certainly a lot of factors to consider before choosing a UI framework, but if all I needed were line charts I’d probably hand it to Flot/jQuery.