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:
(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:
Demo
An example of this code, in action, can be found here: Demo.
Download
The JSpark library: jspark.js
This work is licensed under a Creative Commons Attribution 2.5 License.
Nicholas Miell (December 13, 2005 at 6:54 am)
Why not just use inline SVG? Admittedly, there's more syntax, but it doesn't require abusing inline text content as a canvas payload.
Anonymous (December 19, 2005 at 11:28 am)
"...non-compatible browsers don't see a huge pile of numbers."
Unfortunately non-CSS-aware browsers (including screen readers, Lynx, and Google) still will. How about hiding the data in an attribute value, like "title"?
IIRC, in the design of HTML, one of the main criteria for deciding whether some text/data should go into child elements or attributes was whether it should show up in legacy browsers or not.
Anonymous (December 19, 2005 at 11:31 am)
Oh, and it's extremely sweet that the sparklines resize with the text!
(Could you make their widths scale properly as well?)
Nathan Lee (December 20, 2005 at 10:48 pm)
Cool demo, too bad Canvas isnt supported very well at the moment.
Paul A. Houle (June 26, 2006 at 11:57 am)
Google supplies a library that turns on Canvas support in IE
http://excanvas.sourceforce.net/
I use it at
http://polyhedra.org/
Peter Goodman (June 14, 2007 at 10:58 am)
Very neat, I've been thinking about trying to make something in canvas/svg. Unfortunately, I haven't settled on what!
Otherwise, I think you will need to turn on akismet (if this is wordpress) or put comment moderation on. I've been getting a few similar spams on my blog.
Gazeek (July 2, 2007 at 2:04 am)
Is there anyway to make this work in IE6 without the need for an additional plugin ? Im trying to work the Google solution, but its not working .
Alle (August 2, 2007 at 9:01 am)
I found "An invalid or illegal string was specified" code: "12" JS error using JSpark from firefox 2.0.0.5 . I have fixed it setting manually min and max variables.