Sparklines

Part of the Technology section at kirpi.it

One of Edward Tufte’s most interesting ideas are sparklines, which he describes as intense, simple, word-sized graphics.
Sparklines example [from www.sparkline.org] Chances are that you have seen sparklines around for years already, without even knowing of them being… ehm… sparklines.

They come in many forms and flavors, and the nice, distinctive thing with them is that they can be mixed with text quite easily.
Here at right you’ll see an example applied to financial reports. Sparklines perform nicely both on screen and print.

Sparkines for your site

What if you want to include sparklines into your own site?
What if you want something like this one?
Many options are available, and even a quick search on the internet will reveal a huge choice among client and server scripts, languages of all kinds, stable and alpha projects, open-source and commercial, and more.
Some hints and resources are listed further on this page, but first let’s see what happened here at www.kirpi.it.
I decided to pick up a tiny script from Mark Pursey, whom I thank for kindly opensourcing his work; it’s a 5k php file which, put on the server and called with the right parameters and values, renders nice sparklines. You might want to test it at Mark’s site.

As you have noticed perhaps, simply calling the script in the url is enough to trigger it and generate the image.
http://www.kirpi.it/c/sparklines/spark.php?style=2&h=16&sw=5&gap=0.25&order=0&fill=f00&aa=0&series=32,26,23,73,37,41,26,41,26
Please click on the line here above to make the experience, and then please come back.

But you don’t want just the image, do you?
You want that image embedded into your text.
And also, your text is a wiki, editable on the fly, isn’t it?¹
So, you want to embed sparklines into wiki text, and have your whole page dinamically rendered.

Yes, what about wikis?

If you want to include such an url into your wiki, be warned that you’ll end up with the whole link literally printed on the screen, and no sparkline generated at all.
Actually, wikis expect that images end with suffixes like .jpg .gif .png and the like.
So, in order to fool your system and let it treat your image properly, just add something like “&.png” as a fake parameter at the end of your url.
This way the script will be processed and your page will be decorated by the right sparkline, as intended.

Here it is the image and below you find the url that generated it.
http://kirpi.it/c/sparklines/spark.php?style=2&h=16&sw=5&gap=0.25&order=0&fill=f00&aa=0&series=32,26,23,73,37,41,26,41,26&.png
Other sparklines in the form of curves are attainable with the same ease.

Occasionally, one might even want to use the same tool to have some bigger graphic displayed.
Please note, though, that sparklines give their best at small sizes, and happen to be slightly/rather unreliable when too enlarged.
Look at a quick example, at right, created with …series=32,26,23,73,37,41,26,41,26…
In fact, sparklines are unreliable anyway, if you’re too picky.

While I strongly suggest that you install your sparkline-generating software into your own server, there are cases where this is not the best thing to do, maybe because you simply need a quick sparkline within seconds, or even it is not possible for you to touch the server. At times you might even want to send a sparkline inside an email.
Here are for you two resources:

Joe Gregorio offers his clever sparkline python script for download, as well as a free web service at his bitworking.org site. This sparkline including the dots, has been dynamically generated thank to his service. And this one as well.
Similarly, and unless you are going to drain my resource, you are allowed and welcome to freely use my server for creating and displaying sparklines at your site or blog.² Please refer to the table below for reference as how to build suitable urls.³

Basic url	http://kirpi.it/c/sparklines/spark.php?style=&h=&sw=&gap=&order=&fill=&aa=&series=
Parameter	Variable	Values
Style	style	1 → Line 2 → Fill 3 → Line+Fill 4 → Color Bars
Height	h	Something like 8, 16, 24, 32, 48 or 64 would do
Sparkline width	sw	Values from 1 to 20 should do
Gap	gap	0 → No gap 0.25 → 25% 0.5 → 50% 0.75 → 75%
Interpolation	order	0 → None 1 → Linear 2 → Quadratic
Fill	fill	000 → black 44 → 25% grey 88 → 50% grey cc → 75% grey f00 → red 00f → blue
Anti-aliasing	aa	0 → None 1 → Yes (2 x 2)
Data	series	Comma separated values (4,7,12,3,…)

More on the subject

There is definitely more on the subject at the Pmwiki Sparklines page: a shorthand is available to enhance the whole thing further.
Client side sparklines are also an interesting choice, in which case there is a nice javascript tool based on jQuery available.
Here you find the latest flavour in javascript sparklines involving processing.js.
Google had a free charts service which included sparklines: it seems to be no more available, though.
Please visit sparkline.org which, along with php scripts, maintains a small wiki on the subject.
TiddlyWiki features a crossbrowser lightweight javascript-based ⁴ <<sparkline 4,7,2,5,...>> directive which allows to handle simple sparklines without effort.
This has its own charm… You might also want to check John Riesig’s javascript sparklines library.
Also, it might inspire the will to create a recipe⁵ which enables a (:sparkline:) directive… who knows…

¹ In case it isn’t, please give wikis a try; you might want to follow my advice, and test Pmwiki, arguably the best opensource wiki available and supported by quite a friendly community. (↑)

² No guarantee whatsoever: should my server fail, or any problem arise, you’re on your own. (↑)

³ It’s Mark’s script that I use, anyway. Thanks Mark! (↑)

⁴ TiddlyWiki is wholly javascript-based, actually :-) (↑)

⁵ I’m talking of my wiki of choice, Pmwiki (↑)

kirpi@kirpi.it