seancarmody

Protovis Loader is a plugin which faciliates the use of <a href="http://vis.stanford.edu/protovis/" rel="nofollow ugc">Protovis</a> 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:
<ol>
<li>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.</li>
<li>It creates a shortcode called [pvis] which makes it very easy to include Protovis scripts in blog posts and pages.</li>
</ol>
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:
<ul>
<li>type: ‘chart’ (default) displays a chart in a box with an optional caption, ‘inline’ has no box (e.g. useful for sparklines)</li>
<li>src: path to a Protovis (javascript) code file</li>
<li>height: height of canvas box for the chart</li>
<li>width: width of canvas box for the chart</li>
<li>img: path to a fallback image to use when scripts are blocked or the browser does not support Protovis</li>
<li>alt: alt text for the fallback image</li>
<li>caption: image caption</li>
</ul>
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 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 <a href="http://www.stubbornmule.net/resources/protovis-loader/" rel="nofollow ugc">the Stubborn Mule</a>.
<h3>To-Do List</h3>
This list is not really prioritised yet.
<ol>
<li>Improve user-agent (browser) detection</li>
<li>Create an options page</li>
<li>Allow custom CSS files</li>
<li>Allow for alterntive specification of the protovis js library</li>
<li>Replace tags in the imported script to allow shortcode parameters to be used in the script</li>
</ol>
I’m sure there’ll be a lot more!

Protovis Loader

Creates a shortcode to faciliate the use of Protovis data visualization scripts in blog posts.

Aaron Brazell

Everyone likes data visualizations so I wrote a plugin that will make the quick and secure creation of Pie Charts, Bar Charts and Line Charts easy. The answer is: Easy Graphs.
Easy graphs is very simple to use. It’s a shortcode – [easy_graphs]
Not just like that. The shortcode also requires one parameter “data”. This parameter is a comma separated list of number values “1,2,3,4,5,6,7”.
You can also add a “type” parameter. The “type” can be “line”, “bar” or “pie”. “bar” is the default.
For a Bar graph, you can optionally pass additional parameters: width, height, and color.
Example: [easy_graphs height=”200″ type=”bar” data=”30,70,65″]
By default, width and height are populated from your media embed sizes that are set in your Settings > Media menu inside WordPress. Color should be a hex color code.
For a line graph, the options are similar: color1, color2, height and width.
If you will: [easy_graphs height=”200″ type=”line” data=”200,150,175,260″]
In this case, color1 is the “fill” color and color2 is the line color. Both should be hex.
For Pie charts, there are some additional limitations but fewer parameters: color1, color2 and diameter.
Try this: [easy_graphs diameter=”150″ data=”40,60″ type=”pie”]
Diameter should be an integer represented in pixels. Color1 and color2 are the fill colors of the pie slices. The limitation is the pie chart, at this time, can only take 2 values. I’ll work on that.
On the roadmap are other things. Make the pie chart take more values than just 2. Maybe include other graph types. Labels so the data can be more easily understood.
What would you add to this?

Easy Graphs

This plugin allows for simple data visualization in post content. It is Multisite compatible and relies on shortcodes to render the graphs.

Protovis Loader vs Easy Graphs