One of Edward Tufte’s most interesting ideas are sparklines, which he describes as intense, simple, word-sized graphics.
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.
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?1
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.
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.2 Please refer to the table below for reference as how to build suitable urls.3
|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.
- Google has a free charts service which includes sparklines.
- Please visit sparkline.org which, along with php scripts, maintains a small wiki on the subject.
<<sparkline 4,7,2,5,...>>directive which allows to handle simple sparklines without effort.
Also, it might inspire the will to create a recipe5 which enables a (:sparkline:) directive… who knows…
2 No guarantee whatsoever: should my server fail, or any problem arise, you’re on your own. (↑)
3 It’s Mark’s script that I use, anyway. Thanks Mark! (↑)