Refresh

I wrote about YUI Charts the other day and I guess my conclusion was that the library is promising, but still a long way from being perfect. Today, I have been using it in a real-life setting a found that I wanted to do some stuff that’s isn’t supported out of the box in order to build something that looks like this:

Merge multiple dataset into one graph

By default the library accepts one datasource containing a category, which is turn can have multiple values. This would be an array, which looks like this in Yahoo’s own documentation:

var data =
  [{ month: "January", rent: 880.00, utilities: 894.68 },
   { month: "February", rent: 880.00, utilities: 901.35 }];

This looks great paper, but when preparing data from the database it’s requires some clever trickery to set up such a datasource. Instead, I wanted to prepare several arrays containing label/value pairs and merge them into a data source. For example:

var rentValues =
  [{label: "January", value:880.00},
   {label: "February", value: 880.00}];
var utillitiesValues =
  [{label: "January", value:894.68},
   {label: "February", value: 901.35}];

The example includes a simple piece of code, which merges these two (or more) datasets into something which is edible for the YUI datasource. Make sure that the label properties are the same in all datasets though. Otherwise, you’ll see strange results..

Show a colorful legend

Even though you’ll actually be sending all the required information to the chart library, it won’t build a chart legend for you. Which is bad. Instead, the documentation shows how to set up something similar in HTML. In this case, I wanted to allow selection and de-selection of items on the chart and have the visualization scaled accordingly.

In the example I’m using the same data to build both a data chart and a HTML form, which displays the name and color of each line on the chart — and which handles a redrawing after selecting and deselecting individual items on the form.

Abstract some of the heavy lifting

Yahoo’s own examples are pretty cool, but drawing a chart isn’t exactly a one-line job. I wanted to make it — so I’ll be able to do something like this:

var rent = {displayName:'Rent', data:rentValues};
var utilities = {displayName:'Utillities',
  data:utillitiesValues};

prepareChart('container',
  [rent, utillities], 'formatFunction');

…where container is the name of the html elements holding the chart and the legend, and where formatFunction is a reference to the JavaScript function responsible for formating data on the Y-axis.

The data objects can be expanded slightly to include both information about the color of the line and when the dataset should be shown by default:

var rent = {displayName:'Rent', data:rentValues,
  hidden:true, color:'#cc0022'};

In action…

» See it in action

The example generates some random data about a fictive web site and displays “New signups”, “Total number of users”, “Active users” and “Returning users” for the past two months (if somebody has ideas for real data to plot, please let me know). This it simply does:

var signupsPerDay = {displayName:'New signups',
  data:randomSignupUsers};
var numusersPerDay = {displayName:'Total number of users',
  data:randomTotalUsers, hidden:true};
var activeusersPerDay = {displayName:'Active users',
  data:randomActiveUsers};
var returningusersPerDay = {displayName:'Returning users',
  data:randomReturningUsers};

prepareChart('users',
  [signupsPerDay, numusersPerDay,
    activeusersPerDay, returningusersPerDay],
  'usersCountFormat');

I’m actually not planning on writing much about charts and graphs — but since we’re prototyping the back-end of Nosco’s prediction market application I’ve been reading a lot about the subject. For big and interactive charts we’ll be using either YUI Charts or some native Flex stuff depending on the level of ambitiousness, but John Resig’s JavaScript Sparklines demonstrates how to do something a little simpler in a much, much simpler fashion.

Basically, you insert an html element containing the data for the sparkline — and then the library does the rest for you by creating a <canvas> element and drawing the sparkline:

<span class="sparkline">10,8,20,5...</span>

Very, very cool… Although the library doesn’t seem to support baselines and highlighting of the min and max values, which takes some of the coolness out of the idea of sparklines.

Remember to use excanvas as well to emulate canvas support in Internet Explorer.

It’s nice to see Google entering the scene for easy chart building — along with Yahoo’s Chart library and new JavaScript/Canvas-based stuff like Ole Laursen’s Flot. Frankly, I’ve been postponing doing a pretty chart based reporting tool for Nosco’s prediction markets for quite a while now (we do build nice charts for the web app though) but all of this could be becoming easier.

I’m still not jumping deliriously up and down. My first experiments with YUI Charts were mixed, and for everything it lets you do there’s two or three things out of reach. The same thing probably goes for Google’s hosted solution and it’s worth approaching the service with a bit of skepticism.

Yahoo’s web programming framework, YUI, is out in a new version, which frankly wouldn’t be too exciting if it wasn’t for the new Charts library. Basically, quite a few people have been experimenting with doing charts and graphs with on html canvases (including myself). This method can work well for specific purposes, but it certainly doesn’t scale well, and nobody has come up with a good general library for all charting needs yet.

And the YUI team hasn’t either. Instead, they’ve taken a much more interesting approach by building a JavaScript library for accessing Flash’s (or Flex’s?) Charting engine. Hopefully (in time) we’ll get all the power of Flex Charting through YUI.

Update: Apparently, this is a joint project between the Flash and JavaScript teams at Yahoo, so the Flashy people have more info on the YUI utility.

Updated update: It also turns out that this isn’t based on Flex Charting, rather it’s built on top of a Yahoo-specific Flash library. This probably makes it less interesting?