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

WordPress plugin: Simple Sparklines

Posted by Graeme in Wordpress at 8:51 am on Monday, 20 June 2005

Updated version available.

This is a very simple WordPress plugin that allows the creation of simple sparklines (small graphs that fit in the flow of text). It uses James Byers’ Sparkline PHP Graphing Library.

The aim of this plugin is simplicity, it therefore does not use the full range of features of the PHP sparkline library, let alone the full potential of sparklines per se. However it is very easy to use. For example this graph [spark] [type line] [size 20,30] [series 66,64,62,60,56,54,52,50,40,30,20,10,0][dot 7,50,5,green][/spark] illustrates the kinked demand curve faced by a firm in a oligopolistic market. The EBITDA of telecoms company Thus over the last five years is shown by [spark] [type bar] [size 20, 4] [series -24.6,3.1,27.1,43.6,39.1][/spark].

The markup to generate these is fairly simple: [spark] [type line] [size 20,30] [series 66,64,62,60,56,54,52,50,40,30,20,10,0][dot 7,50,5,green][/spark] for the demand curve and [spark] [type bar] [size 20, 4] [series -24.6,3.1,27.1,43.6,39.1][/spark] for the EBITDA graph.

The plugin processes whatever is between [spark] and [/spark]. The types can be line or bar, the series consists of values the are sequentially plotted on the graph – i.e. these are y values, the corresponding x values are assumed to start from zero and increase by one each time. The points plotted above are (0,66), (1,64), (2, 62) etc. The dot instruction adds a green dot at (7, 50) with a diameter of 5. Size controls the size in pixels of the graph, height then width – so the graph above is 20 pixels high and 30 side.

Bar graphs can not have the dot highlights (so the [dot 7,50,5,green] would be ignored and width is taken to be the width of an individual bar rather than the whole graph. Bar graphs also show positive values in black and negative in red.

At the moment the plugin can handle only a single data series, and (in the case of line graphs) a single [dot] highlight. There is no control over colours. I plan to:

  1. Add multiple data series and dots
  2. Improve colour choices, especially for multiple series
  3. Improve input validation

Other suggestions are very welcome. I would like to know if anyone else finds this plugin useful.

I would also like to find away of automatically scaling the height to the current text size, however I can not figure out how to pick it up (JavaScript perhaps?). Anyone with any ideas please let me know.

If anyone if familiar with wp-cache: will it cache the output of this plugin? specifically the image generated by the sparkline/image.php

This is my first WordPress plugin and the first PHP code I have written other than the odd lines in WordPress templates. If any better coders use this plugin please have a look at the code for any flaws you can spot. The plugin and the underlying library are both beta, but given the plugin’s simplicity I am reasonably confident that it is unlikely to fail in a way that will leave a user with a worse result than a missing or incorrect graph. One limitation is that it can not handle large series of data because all the data is encoded in the URL, which has a limit of about 2,000 characters.

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

Comments (3)


Comment by » This week’s charts (w/e 25/06/2005) at 4:38 pm on 22 June 2005 at

[…] 17;ll be very surprised #1 sales this year: (the small graphs on this post use the sparklines plugin and will be updated weekly)


Comment by Mark at 4:35 pm on 16 July 2005 at

Very cool, I was just sitting down to write a sparkline plug-in, glad I googled first!

Comment by Interesting websites for SEO, Web Marketing and everday work from Sante - October 1st at 12:32 am on 2 October 2007 at

[…] WordPress plugin: Simple Sparklines, small graphs that fit in the flow of text – This is a very simple WordPress plugin that allows the creation of simple sparklines (small graphs that fit in the flow of text). It uses James Byers Sparkline PHP Graphing Library. […]

Sorry, comments are closed