When I started experimenting with Protovis*, I quickly found that getting it to work in a WordPress blog was rather fiddly. With a lot of help from Google (and this page in particular), I managed to piece together what needed to be done, but since I did not find any explanations specifically focused on Protovis in WordPress, I thought it may be useful for others attempting the same thing if I summarised the steps involved. Most readers will not have the slightest interest in this, so I will not expect many of you to keep reading!

First of all, if you are hosting your blog on WordPress.com, give up now! These instructions will only work if you have a self-hosted installation of WordPress.

1. Download Protovis and unzip it on your server it a convenient location. I put it in a folder called “protovis”, accessible from the root of the webserver.

2. Ensure your headers include a pointer to the Protovis script. How exactly you do this, depends on your theme, but since I am using Thesis, it’s quite straightforward: under Site Options > Additional Scripts, I added the following code.

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
 <script type="text/javascript" src="/protovis/protovis-r3.2.js"></script>

3. Wrap your Protovis code up in a function and save it in a .js file on the server. For example, here is the code I used to produce the chart in the last post. You will see that I wrapped everything up in a function called “cdodraw”. I saved the file in the folder /script/pv.

4. Edit your post in HTML mode and use the following code to load and call your function.

<script src="/scripts/pv/cdodraw.js" type="text/javascript"></script>
<script type="text/javascript+protovis"><!--
cdodraw();
--></script>

You should replace “/scripts/pv/cdodraw.js” with the location of your own Protovis chart code and replace “cdodraw()”. With the name of your own function. Note that the first script command has type “text/javascript” and the second “text/javascript+protovis”. This is important!

Part of the reason for the difficulty is that WordPress has a tendency to mash up the text you enter, which is fine most of the time, but not when you are trying to write Javascript. An alternative may be to try the Text Control plugin, which allows finer control over WordPress’s mashing of your text. I have not tried the plugin myself, so I cannot be sure how well it works.

Good luck, and let me know how you go! If you have any suggestions on how to do this a better way, please let me know. Better still, you could write a WordPress plugin to make it all much easier.

UPDATE: it appears that this function-wrapping trick does not work for Google Chrome or Safari. I’m looking into it!

FURTHER UPDATE: I could not work out why the approach described here does not work for Chrome or Safari, so instead I got it working by creating a custom shortcode that slurps in a javascript file and includes it in the post. I am in the process of wrapping this up in a plugin to save others the trouble of working out how to do it. For those who cannot wait, here is the code I used:

function sProtovis($atts, $content = null) {
 extract(shortcode_atts(array('src' => '#'), $atts));
 return '<script type="text/javascript+protovis">'."\n".file_get_contents($src).'</script><noscript>Scripts disabled -- cannot display chart!</noscript>'.'<p align="center"><strong>'.do_shortcode($content).'</strong></p>';
}
add_shortcode('protovis', 'sProtovis');

It still relies on the Protovis code already being added into the header (as described above). In the plugin, this will no longer be necessary.

PLUGIN: pv-loader is now available on github.

* Protovis is a javascript data visualisation library being developed at Stanford, which allows the creation of interactive charts on web pages.