Here is a screen capture if you don't have a SVG plugin:
Sparklines
Sparklines are Intense, Simple, Word-Sized Graphics to display more information than a graph or table could in the same amount of space.
Read about them in an excerpt from Tutfe's book.
Javascript
Who knew this langauge was so cool? The javascript we came to hate in the 90s is showing it doesn't deserve the bad reputation. Javascript can be used to hack websites, PDFs, Dashboard, SVG, ...
Don't blame the language for bad usage.
Data URIs
Introduced in a RFC in 1998. Recently rediscovered with many interesting applications. For example greasemonkey scripts can be prettied up using data uris saving lots of network transfer. (we used data uris to skin Book Burro)
SVG
Scalable Vector Graphics - an open standard that is starting to be supported (lets hope Macrodobe doesn't stop supporting it)
Since browser built-in support of SVG is currently quite poor, you will need to use a plugin, such as the one from Adobe.
Results
Once you have a svg plugin, look at the example.
Download the javascript, link it in your HTML document.
Then within your HTML document, you use the javascript function embedSparkline( data_list );
embedSparkline( [ ] );
Issues
For some reason firefox closes a paragraph tag right before the first embed created by this script resulting in extra space and bad layout. Further embeds do not result in a </p> being generated. Anyone know why?
Perhaps generating other formats like BMP on the client side would be possible as well. Although SVG gives us nice vector based images that print in high resolution. It is possible to impliment them in flash as well, with the values as parameters to an existing flash movie. I perfer generating the whole thing from scratch. (two major browsers will have SVG in their next release!)
Future Plans
Greasemonkey helped me understand what the quest for a semantic web was all about. Imagine a web where stocks where tagged with a <stock> tag (or any other tag they wish). Then finding them would be one document.getElementsByTagName('stock') away.
Building a GreaseMonkey script that adds sparklines to finanical webpages would be easy. As it is, I am busy building regular expressions for various financial sites.