You can get new post notifications through RSS, email, Twitter or Facebook

Simple Sparklines WordPress plugin, version 0.2

Posted by Graeme in Wordpress at 10:44 am on Wednesday, 20 July 2005

I have updated my Simple Sparklines WordPress plugin. My thanks to David Chait and Mark Wubben for anwsering my questions on the WordPress support forum. The hardwork was done for me by James Byers’ Sparkline PHP Graphing Library.

Basic use is the same as in version 0.1. The main new feature is that the graph height can be set to ‘auto’, rather than a set number of pixels. This will (in browsers with Javascript enabled) set the height of the graph to match the text. If Javascript is disabled the height will default to 15 pixels . The aspect ratio can be specified in order to allow the width to also adjust in line with the height. As with the size parameter, the aspect ratio of a bar graph refers to a single bar, not the whole graph.

This [spark] [type line] [size auto,30] [aspect 1.5] [series 66,64,62,60,58,56,54,52,50,40,30,20,10,0][dot 7,50,5,green][/spark] and this [spark] [type bar] [size auto,4] [series -24.6,3.1,27.1,43.6,39.1][/spark] are the examples used in my original post on the plugin, but with height set to auto. If you change your text size and reload you will see the change.

I have added a [line-width number] parameter that does exactly what it says for line graphs. The line-width, like the [dot] radius is a size on the graph before re-sampling, so the actual width in pixels will be much less. Any value other than 1 (the default) tends to make non-horizontal or vertical straight lines in text sized graphs look awful. It is primarily useful for large graphs (i.e. not true sparklines), which look much better.

I have cleaned the code a bit, and there is now a function:

sparkline_insert(line | bar, height pixels | auto, width, aspect ratio, comma separated data series, [optional] feature point, line width, default height)

that can usefully be called by other plugins or from templates. The feature point parameter is a string containing a comma separated list of parameters in the same format as inserting in a post, ditto the data series. everything else apart from the chart type (line or bar) is a number (unless height is auto).

I have not done anything about implementing caching or multiple data series yet.

I would be very grateful for any feed back, both from those who use the plugin and those who see it here. In particular I need to know whether auto height works OK in IE (all versions from 5.0 upwards) and Safari. So far I know this works on Firefox, Opera and Konqueror.

To install the plugin download this, unzip and copy to your WordPress plugins directory, then activate as usual.

As a good few bloggers are likely to look at this page, I think this is a good place to mention my main sites, Investment Ideas and Money Terms in the hope that some of the users of the plugin might feel inclined to link to them. The latter may well be pretty useful to link to, for anyone writing about finance or investment. The plugin was actually developed for the latter.

Comments (18)


Comment by marcus at 8:10 am on 2 November 2005 at

Hi there. :)
I’m trying out the 0.2 plugin, and I’m running into problems. Namely with the line graph and positioning of the feature point. I’ll try to explain (excuse my english, please):

If I have 10 values, I need to set the feature point to “9” in order to place it at the 10th value. While this may be mathematical correct (0/0 as starting point), I would love to just count the values and set the point at “10” — is this possible somehow?

It would be nice to have some additional pixel space around the image. Right now, if I place the feature point at any of the peaks, it gets clipped. Maybe one could read out the point size, then add half the amount of white space? :)

I would love to add a background image in order to show normals. Is this possible somehow? It would suffice if one could set the background to transparent, but I couldn’t find any setting for this.

Thanks for your time. :)

Comment by Graeme at 12:30 pm on 6 November 2005 at

The first can be done. If I understand correctly, you want x values to start from one? You can do it if you can make a minor edit to the code yourself. In the file image.php, after line 23, which reads:

$dot = explode(‘,’, $_GET[f]);

insert a new line containing the following.

$dot[0] = $dot[0] – 1;

If you want y values to start from one as well (or instead) add (another) line :

$dot[1] = $dot[1] – 1;

Please let me know if this solves your problem.

As for the other two features, I will have to figure out how to do it with the underlying library. It is easy to use but not well documented. I will try see what can be come next time I work on the plugin – at the moment that looks like early next year. Sorry, I just have too much to do for the moment to do it any sooner.

Comment by Sunil at 11:27 am on 1 January 2006 at

The download link isnt working !

Comment by Christopher Dirkson - Under Construction » Sparklines at 4:16 am on 2 January 2006 at

[…] I found this sparkline plugin for WordPress and tried to use it to visualize the progress of my attemtps to reduce my body weight. […]

Comment by Graeme at 5:42 am on 3 January 2006 at

Sunil, I can not reproduce the problem

Comment by yongi at 5:17 am on 4 February 2006 at

Hey there. Your sparkline implementation looks quite nice. I’m having one small problem, though… I can’t see the example syntax because the plugin is rendering those chunks as more sparklines. Is there any chance I can get a sample of the syntax with the tags escaped or something so that I can see what the syntax is supposed to look like?


Comment by Graeme at 8:54 am on 6 February 2006 at

I have escaped the tags yongi, thanks for drawing my attention to it.

Comment by yongi at 7:19 pm on 6 February 2006 at

Thanks for taking care of that, Graeme.

And again, thank you for this excellent sparkline implementation for WordPress. You, as they say, are da man!

peace out,

Comment by mondrian’s neon fantod » data geek (dance, sparkline, dance) at 8:04 pm on 6 February 2006 at

[…] Anyway, among the various topics that were part of the lecture was a little thing called sparklines. This concept really captured my imagination and, fortunately, it seems to have grabbed the attention of quite a few others, too. Thankfully, many of those folks are more technically inclined than I, and that means that though a wonderful plugin for WordPress (Simple Sparklines) I can now include sparklines in my posts here, when appropriate. […]

Comment by Ted Roche at 5:55 pm on 11 January 2007 at

Added to my WordPress site, thank you! But I had to make a couple of changes to image.php to get it working, specifically, wrapping the $_GET[] arguments in single quotes. That fixed it! Diff follows:

if ($_GET['t'] == "bar") {
$width = $_GET['w'];
> $height = $_GET['h'];
> if (isset($_GET['a']) and is_numeric($_GET['a'])) {
if ($_GET['l'] != '') {
if ($_GET['f'] != '') {
> $dot = explode(',', $_GET['f']);
$series = explode('_', $_GET['s']);

\ No newline at end of file
> ?>

Comment by Emile at 9:24 pm on 10 March 2007 at

Hey there,

This looks tremendous but I can’t get any version of the code to render properly. Can you post an example that would maybe demonstrate how to graph frequency posting or comment frequency?

Thanks again!

Comment by Graeme at 11:22 am on 12 March 2007 at

Emile, can you be more specific about the problem? Doing the sort of examples you suggest would require more time than I can spare at present, sorry.

Comment by Rechtsanwalt Strafrecht at 6:56 pm on 19 April 2007 at

Emile, i think i have the same problem. Have you just find out soemething?

Comment by The Mine Shaft Gap » Blog Archive » Some new site features at 1:09 pm on 28 April 2007 at

[…] do this would be easy, but I was disappointed. The closest thing I could find was this thing called Simple Sparklines by Graeme Peters, which unfortunately doesn’t do horizontal bar charts, but does do line and […]

Comment by Flippress Blog » Blog Archiv » Blog Statistiken at 6:47 pm on 12 July 2007 at

[…] Simple Sparklines […]

Comment by Stef at 6:58 am on 6 August 2007 at

Thanks for that. Could you perhaps just post an example of the line to be added in a template that calls the function? It’s not really clear to me how that should look like.

And any idea how to link the sparklines graph with a log file?

Thanks for the help!

Comment by knewd » Blog Archive » links for 2007-10-28 at 12:18 pm on 28 October 2007 at

[…] Simple Sparklines WordPress plugin, version 0.2 Neat plugin – cross referenced with Information Aesthetics. The aspect ratio can be specified in order to allow the width to also adjust in line with the height. (tags: blog blogging graphics php plugin tools dashboard wordpress) […]

Comment by jennar5 at 7:09 am on 18 June 2008 at

hey guys, despite to try some thing new on Sparkline charts then chk this out visifire

Sorry, comments are closed