Updates to Sparklines.js

June 30, 2008. Filed under javascript 18 processing-js 9 sparklines-js 3

Put a bit of time into Sparklines.js today, and a few good things have happened.

  1. There is now a public repository on github, where others can contribute.

  2. There is also a merged and minified library for download, sparklines.min.js.

  3. Charts are no longer constrained to start their y axis at an absolute value of zero. This idea wasn't obviously bad due to the example data I chose, but its viability became pretty limited as I played with different data sets.

    Instead, it is possible to start at zero, or to start at the minimum value. You can switch between the two easily. If you want to scale from min to max, you would do:

var opts = {'scale_from_zero':false};
var data = [1,2,3,4,5,6];
new Sparkline("canvas_id",data,opts);

On the other hand, if you want to scale from zero to max you would:

var opts = {'scale_from_zero':true};
var data = [1,2,3,4,5,6];
new Sparkline("canvas_id",data,opts);

At the moment scaling from zero to max is still the default, because scaling bar charts from min to max does a horrifying job of making the data comprehensible. However, I intend to make line sparklines scale from min to max by default in the near future (bar sparklines will retain their current zero to max behavior).

In addition, I plan on making it possible to set arbitrary values for the top and bottom of the scaling window, which will allow further adaptation of the sparkline to the specific dataset being displayed.

There probably won't be too many more updates on this blog about Sparklines.js, unless there are any particularly interesting updates, so be sure to keep an eye on the repository if you're interested in the project.

Update 1

Okay, the behavior here has been repaired and now is sufficiently flexible for any use case that I can imagine. By default, line sparklines are scaled from min to max, and bar sparklines are scaled from zero to max. However, you can set arbitrary top and minimums (as well as reverting bar sparklines to the min to max behavior if desired).

Scaling a line sparkline from zero to max looks like this:

var opts = {'scale_from':0};
var data = [1,2,3,4,5,6];
new Sparkline("canvas_id",data,opts);

Scaling a bar sparkline from min to max looks like this:

var opts = {'scale_from':undefined};
var data = [1,2,3,4,5,6];
new BarSparkline("canvas_id",data,opts);

Scaling a line sparkline from fifty to one hundred fifty is easy too:

var opts = {'scale_from':50,'scale_to':150};
var data = [1,2,3,4,5,6];
new Sparkline("canvas_id",data,opts);

The functionality is more thoroughly explained in the scaling data portion of the documentation.

Update 2

It ought to be working in Internet Explorer now, but I don't have a machine to test it on at the moment. Requires the excanvas.js library, which is now in the repository (and at the project page). I'd be obliged if someone verified it is working in IE.