Library for easy sparklining

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.

Leave a Reply