Javascript Sparklines Library

This is an unobtrusive implementation of Sparklines, done in Javascript using the new Canvas element. It has been confirmed to work in the new Firefox betas, at the very least. Until the Canvas element becomes more widely accepted, this is more of a ‘fun demo’ at best.

How To Use:

To use, place your data points within your HTML, like so:

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

(Note: Any HTML element with a class of ‘sparkline’ is checked)

Then, in your CSS, you might want to have the rule:

.sparkline { display: none; }

so that non-compatible browsers don’t see a huge pile of numbers.

Finally, include the library in your header, like so:

<script language="javascript" src="jspark.js"></script>


An example of this code, in action, can be found here: Demo.


The JSpark library: jspark.js

This work is tri-licensed under the MPL, GPL, and LGPL.

Posted: November 12th, 2005

Subscribe for email updates

8 Comments (Show Comments)

Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.

Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

John Resig Twitter Updates

@jeresig / Mastodon

Infrequent, short, updates and links.