Protovis Loader

9 September 2010 · 4 comments

It’s official! My first WordPress plugin is now available for download from¬†Wordpress.org.

Overview

Protovis Loader is a plugin for the WordPress blogging platform which faciliates the use of Protovis scripts. Protovis is a javascript data visualisation library being developed at Stanford, which allows the creation of interactive charts on web pages.

Incorporating Javascript code into WordPress posts can be tricky as it (deliberately) sanitises text typed into posts, which interferes with Javascript. When I first began experimenting with Javascript, this cause me some difficulties, as described in this post. In the end, I decided to roll up my sleeves and write a plugin to make the whole process a lot easier. Protovis Loader was the result.

Protovis Loader makes the whole process a lot easier in two ways:

  1. It ships with a copy of the Protovis javascript library and once the plugin is activated, links to the library will automatically be included in page headers.
  2. It creates a “shortcode” which makes it very easy to include Protovis scripts in blog posts and pages.

Usage

Simply use the “pvis” shortcode in your posts and pages where you want to include a Protovis chart.
There are a number of optional parameters:

  • type: ‘chart’ (default) displays a chart in a box with an optional caption, ‘inline’ has no box (e.g. useful for sparklines)
  • src: path to a Protovis (javascript) code file
  • height: height of canvas box for the chart
  • width: width of canvas box for the chart
  • img: path to a fallback image to use when scripts are blocked or the browser does not support Protovis
  • alt: alt text for the fallback image
  • caption: image caption

If any content is supplied between the opening “pvis” tag and the closing “/pvis” tag, it is taken to be javascript for inclusion. It may also be interpreted as a caption, but *only* if a caption field is not supplied and a src field is supplied.

Here is an example of a chart produced using Protovis. Try clicking on the data series to see some basic interactivity (note that this will not work on all browsers, so you may see a static image instead of the Protovis chart).

CDO deals: total and recycled

Here is how the shortcode was used to include this chart here:

[*pvis src="http://www.stubbornmule.net/scripts/pv/test.js"
img="/blog/wp-content/PV-CDO-circles.png" height="125px"]
CDO deals: total and recycled[/pvis]

I have split this over several lines for legibility, but in practice there should be no line breaks (and no * in front of pvis).

The parameters for the shortcode are used to specify the location of the Protovis code for the chart as well as a fall-back image to display for browsers which do not support Protovis or have scripting turned off. The text between the opening and closing shortcode tags is used to create a caption for the chart.

The plugin is available from Wordpress.org.

To-Do List

This list is in no particular order:

  1. Improve user-agent (browser) detection
  2. Create an options page (e.g. to specify default fall-back images)
  3. Allow for alternative specification of the protovis js library
  4. Improve CSS support
  5. Allow custom CSS
  6. Cache scripts to improve performance
  7. Replace tags in the imported script to allow shortcode parameters to be used in the script (or some other mechanism to pass parameters through)

Let me know if you have any other suggestions.

Here is a rather fancier example, adapted from the Protovis Examples catalogue, which in turn took inspiration from Gabriel Bucknall.


{ 4 comments… read them below or add one }

1 Marco aka Cracticus September 24, 2010 at 5:23 pm

Stubborn,

At first I had no idea what it meant, but once you get the hang of it, is kinda cool.

Say, for people doing exercises at home: they can follow the outer ring to time their routines.

Say one minute sit-ups, is one full ring. You don’t need to check your watch, which comes in handy if you wear glasses, like yours truly.

Is there a way that the user could reset the whole display, as one would using an stopwatch?

Or even better: before starting, the user would enter the time allocated to each routine, including breaks (say, 60 seconds, sit-ups; 20 seconds, break; 60 seconds, push-ups; 20 seconds, break, and so on and so forth) and just follows the display!

Man, you are really making advances in this charting business! I’m impressed. Keep up the good work!

2 Stubborn Mule September 24, 2010 at 8:47 pm

Marco: I am sure all of that is possible. It’s a little bit beyond my expertise right now, but I’m learning quickly!

3 JamesGlover September 25, 2010 at 10:34 am

That second one looks like a distant cousin of the pie chart. Just saying.

4 Brian February 4, 2011 at 2:46 pm

Hey Marco,
Thanks for your work on this plugin. I just downloaded it, and will send you a link when I have it up and running.

Leave a Comment