Simple Sparklines WordPress plugin, version 0.2

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.

18 thoughts on “Simple Sparklines WordPress plugin, version 0.2

  1. 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. :)
    Greetz

  2. 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.

  3. 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?

    Thanks!
    -y-

  4. 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,
    -y-

  5. 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:

    2c2
    if ($_GET['t'] == "bar") {
    8,10c8,10
    $width = $_GET['w'];
    > $height = $_GET['h'];
    > if (isset($_GET['a']) and is_numeric($_GET['a'])) {
    22c22
    if ($_GET['l'] != '') {
    26,27c26,27
    if ($_GET['f'] != '') {
    > $dot = explode(',', $_GET['f']);
    31c31
    $series = explode('_', $_GET['s']);
    53c53

    \ No newline at end of file
    ---
    > ?>

  6. 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!

  7. 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.

  8. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *