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.
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.
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!
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.