background preloader

Sparklines

Facebook Twitter

Excel

jQuery Sparklines. News 15 June 2013 - Version 2.1.2 Relased This release adds support for jQuery 1.10.0 and other bug fixes and minor improvements.

jQuery Sparklines

See the full changelog for details of all changes. 26 January 2013 - Version 2.1.1 Relased This release adds support for jQuery 1.9.0 along with a couple of other bug fixes. If you're using a version of jQuery later than 1.8, be extra sure you're not rendering your page in quirks mode to avoid breaking tooltips for IE users. See jQuery's notes on quirks compatiblity for more info. See the full changelog for details of all changes. 15 October 2012 - Version 2.1 Released This release is primarily a bug-fix release, but also adds support for Internet Explorer 10.

See the full changelog for details of all changes. 29 April 2012 - Version 2.0 Released This release represents a significant code update. Customizable mouseover tooltips and interaction including highlighting of moused-over values. There's a few non-code updates as well: SVG Sparklines. 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.

SVG Sparklines

Read about them in an excerpt from Tutfe's book . Javascript Who knew this langauge was so cool? Don't blame the language for bad usage. Data URIs Introduced in a RFC in 1998. 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( [72, 53, 55, 19, 18, ... ] ); Issues Perhaps generating other formats like BMP on the client side would be possible as well. Future Plans. Sparklines in data: URIs in Python. Sparklines, as defined by Tufte, are intense, simple, word-sized graphics.

Sparklines in data: URIs in Python

Kind of like this: . I seemed to stumble across them at just the right time, as I have regression tests I am adding to on a daily basis. The result is a flood of information. I believe sparklines may be the answer to my information avalanche. All of my regression scripts are written in Python and the output of those scripts is HTML. I found none. I did find one for PHP, but that would not be Python now would it? Not to be discouraged, I set off to load up the standard image manipulation package for Python. Crud. Explain to me again why doesn't Python have a standard image manipulation package? I settled on Python Imaging Library (PIL). Making the sparklines turned out to be incredibly easy, making me think that the reason there wasn't any libraries is that it's just so easy to glue the right pieces together in Python that a library would be overkill. The example output is just a plot of 30 random values.

Sparkplot: creating sparklines with matplotlib. Edward Tufte introduced sparklines in a sample chapter of his upcoming book "Beautiful Evidence".

sparkplot: creating sparklines with matplotlib

In his words, sparklines are "small, high-resolution graphics embedded in a context of words, numbers, images. Sparklines are data-intense, design-simple, word-sized graphics. " Various implementations of sparklines that use different graphics packages have already been published, and probably the best known one is a PHP implementation that uses the GD backend. In what follows, I'll show some examples of sparkline graphics created via matplotlib by the sparkplot Python module I wrote.

Example 1 Since a picture is worth a thousand words, here is the Los Angeles Lakers' road to their NBA title in 2002. The Lakers' 2004 season was their last with Shaq, when they reached the NBA finals and lost to Detroit (note the last 3 losses which sealed their fate in the finals). Compare those days of glory with their abysmal.