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');

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.

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.

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?