It’s official! My first WordPress plugin is now available for download from Wordpress.org.
Protovis Loader makes the whole process a lot easier in two ways:
- It creates a “shortcode” which makes it very easy to include Protovis scripts in blog posts and pages.
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)
- 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
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).
[pvis src=”http://stubbornmule.net/scripts/pv/test.js” img=”/blog/wp-content/PV-CDO-circles.png” height=”125px”]CDO deals: total and recycled[/pvis]
Here is how the shortcode was used to include this chart here:
[*pvis src="http://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.
This list is in no particular order:
- Improve user-agent (browser) detection
- Create an options page (e.g. to specify default fall-back images)
- Allow for alternative specification of the protovis js library
- Improve CSS support
- Allow custom CSS
- Cache scripts to improve performance
- 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.
[pvis src=”http://stubbornmule.net/blog/wp-content/scripts/solar-clock.js” height=500 width=500 /]