Projects


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>

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.

Tags: firefox, javascript, canvas, cool

JavaScript Books

Secrets of the JavaScript Ninja

JavaScript Secrets

Secret techniques of top JavaScript programmers.

Pro JavaScript Techniques

Pro JavaScript

The best techniques for professional JavaScript. Published by Apress.

Micro Updates

John Resig Twitter Updates

@jeresig

Infrequent, short, updates and links.

JavaScript Jobs



Hosting provided by: Ruby Hosting by Engine Yard