> Notes > Culture > Technology




Short primer on how to render sparklines in your site (and beyond)

One of Edward Tufte’s most interesting ideas are sparklines, which he describes as intense, simple, word-sized graphics.
Sparklines example [from] 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
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.,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?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.,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 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
Basic url
Stylestyle1 → Line     2 → Fill     3 → Line+Fill     4 → Color Bars
HeighthSomething like 8, 16, 24, 32, 48 or 64 would do
Sparkline widthswValues from 1 to 20 should do
Gapgap0 → No gap     0.25 → 25%     0.5 → 50%     0.75 → 75%
Interpolationorder0 → None     1 → Linear     2 → Quadratic
Fillfill000 → black     44 → 25% grey     88 → 50% grey     cc → 75% grey     f00 → red     00f → blue
Anti-aliasingaa0 → None     1 → Yes (2 x 2)
DataseriesComma separated values (4,7,12,3,…)

More on the subject


1 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. (↑)

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! (↑)

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

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

Share this page with your friends on your favorite social bookmarking site...