Creates a shortcode to faciliate the use of Protovis data visualization scripts in blog posts.
Protovis Loader makes the whole process a lot easier in two ways:
- It creates a shortcode called [pvis] 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 use of the tag:
[pvis src="http://www.example.com/chart.js" img="fails.png" height="125px"]My Caption![/pvis]
You can see the plugin in action on the Stubborn Mule.
Using the shortcode in a blog post
The end result.
- Upload 'pv-loader' to the '/wp-content/plugins/' directory
- Activate the plugin through the 'Plugins' menu in WordPress
- Use the [pvis] shortcode to add protovis code to your post (see Screenshots for an example)
- Tweaked CSS for caption to improve vertical alignment
- Added optional height/width dimension parameters for chart canvas
- Added optional "inline" chart type (no caption no borders)
- Fixed error: missing > in css div element
- Added CSS (fixed style at this point)
- Added BlackBerry to the list of non-SVG browsers
A variety of very minor tweaks, mainly adhereing to WP coding standards.
- The first release of the plugin.
What is the syntax of the pvis shortcode?
Here is an example:
[pvis src="/scripts/chart.js" img="/images/fail.png"]A caption[/pvis]
- src: specifies the location of the protovis script
- img: specifes the URL of an image to display instead if scripts are blocked
- alt: speficies image alternative text
Text between the tags will be set as a caption
Can I specifiy any CSS?
Which Protovis library does the plugin use?
Currently version Protovis 3.2 ships with the plugin.
Can I use a different version of Protovis?
This list is not really prioritised yet.
- Improve user-agent (browser) detection
- Create an options page
- Allow custom CSS files
- Allow for alterntive specification of the protovis js library
- Replace tags in the imported script to allow shortcode parameters to be used in the script
I'm sure there'll be a lot more!