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:

  1. <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:

  1. .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:

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

Demo

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

Download

The JSpark library: jspark.js

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

Posted: November 12th, 2005


If you particularly enjoy my work, I appreciate donations given with Gittip.

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.

Ukiyo-e Database and Search

Ukiyo-e.org

Japanese woodblock print database and search engine.


John Resig Twitter Updates

@jeresig

Infrequent, short, updates and links.