WordPress: Sparkplug

I’ve been working on a project where we were co-ordinating our efforts via a group blog, which in this case had a Prologue theme installed. I wanted to be able to see how active certain sections of the site were, and I figured a sexy little sparkline was all that’d be needed to do that. Thus Sparkplug was born!

Overview

Sparkplug is a very simple plugin which provides you with an easy-to-read indication of how active the “current view” of a blog is. On the homepage, it provides a sparkline chart showing total posts per day for the (by default) last 30 days. On a tag, category or author-specific page, it shows bars representing how many posts were made with that tag/category or by that author per day, with a line showing the total posts per day for comparison.

sparkplug-2

It comes packaged as a widget and includes a “template tag” (function) that can be called directly from your theme. You may only display ONE Sparkplug chart on a page at a time. In the widget configuration you may change the bar and line colors (or disable the line altogether) and adjust how many days back the chart shows.

spark-widgets

Sparkplug uses the AWESOME jQuery Sparkline plugin by Gareth Watts (and thus requires javascript and jQuery 1.3).

Installation

  1. Download Sparkplug from the WordPress Plugin Directory
  2. Unzip it and put it here /wp-content/sparkplug/ (should also work under mu-plugins pretty easily for users of WPMU)
  3. Go to Plugins in wp-admin and Activate
  4. Go to Appearance > Widgets and add the “Sparkplug” widget, then configure and save (or you can edit your theme directly)
  5. View your blog and bask in the sexy geekiness of sparkline gratification.

Customization/Options

Whether you use the widget or template tag option, your chart will be displayed within a DIV with id=”sparkplug-chart” (so feel free to apply some CSS to that element).

If you use the widget version, you’ll notice that you get some options to set colors and the number of days. Colors should be specified using a full hex code (including the ‘#’ at the start). The default colors look good with the default/Kubrick theme.

When you use the template tag, you get a bit more control over all the options. You want to do something like this:

<?php
if ( function_exists( 'sparkplug' ) ) {
    sparkplug();
}
?>

You can also specify a number of options, which are passed to the sparkplug() call as an array. Most of these options match those available to the jQuery Sparklines plugin, since that’s what they generally affect.

  • do_total — whether or not to show the line representing the total number of posts on each day (never shown on home page)
  • days — how many days back to show
  • barColor — hex color for the bars
  • barWidth — how many pixels wide should each bar be
  • barHeight — how tall should the tallest bar (or the highest line) be? This should be a CSS-style “height:” value such as “20px”, “2em”
  • lineColor — hex color for the line showing total posts per day
  • minSpotColor — if this is set to a hex code, then a spot is drawn indicating the lowest point on the chart (in this color)
  • maxSpotColor — if this is set to a hex code, then a spot is drawn indicating the lowest point on the chart (in this color)
  • spotRadius — how many pixels should the radius of the spots be? You probably want something between 1 and 4
  • fillColor — if this is set to a hex code, then the space underneath the line will be colored in. You probably don’t want to use this

For example:

<?php
if ( function_exists( 'sparkplug' ) ) {
    sparkplug( array( 'barColor' => '#f00', 'lineColor' => '#c0ff33' ) );
}
?>

Sparkplug has only been actively tested under WordPress 2.7+, specifically with the Prologue Projects theme.