{"id":138168,"date":"2010-09-10T08:00:00","date_gmt":"2010-09-10T08:00:00","guid":{"rendered":"https:\/\/www.weixiaoduo.com\/plugins\/2024\/02\/22\/protovis-loader\/"},"modified":"2010-09-20T08:55:00","modified_gmt":"2010-09-20T08:55:00","slug":"protovis-loader","status":"publish","type":"post","link":"https:\/\/www.weixiaoduo.com\/plugins\/protovis-loader\/","title":{"rendered":"Protovis Loader"},"content":{"rendered":"<p>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.<\/p>\n<p>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.<\/p>\n<p>Protovis Loader makes the whole process a lot easier in two ways:<\/p>\n<ol>\n<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>\n<li>It creates a shortcode called [pvis] which makes it very easy to include Protovis scripts in blog posts and pages.<\/li>\n<\/ol>\n<p>Usage:<\/p>\n<p>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:<\/p>\n<ul>\n<li>type: \u2018chart\u2019 (default) displays a chart in a box with an optional caption, \u2018inline\u2019 has no box (e.g. useful for sparklines)<\/li>\n<li>src: path to a Protovis (javascript) code file<\/li>\n<li>height: height of canvas box for the chart<\/li>\n<li>width: width of canvas box for the chart<\/li>\n<li>img: path to a fallback image to use when scripts are blocked or the browser does not support Protovis<\/li>\n<li>alt: alt text for the fallback image<\/li>\n<li>caption: image caption<\/li>\n<\/ul>\n<p>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 <em>only<\/em> if a caption field is not supplied and a src field is supplied.<\/p>\n<p>Here is an example of use of the tag:<\/p>\n<p>[pvis src=\u201dhttp:\/\/www.example.com\/chart.js\u201d img=\u201dfails.png\u201d height=\u201d125px\u201d]My Caption![\/pvis]<\/p>\n<p>You can see the plugin in action on <a href=\"http:\/\/www.stubbornmule.net\/resources\/protovis-loader\/\" rel=\"nofollow ugc\">the Stubborn Mule<\/a>.<\/p>\n<h3>To-Do List<\/h3>\n<p>This list is not really prioritised yet.<\/p>\n<ol>\n<li>Improve user-agent (browser) detection<\/li>\n<li>Create an options page<\/li>\n<li>Allow custom CSS files<\/li>\n<li>Allow for alterntive specification of the protovis js library<\/li>\n<li>Replace tags in the imported script to allow shortcode parameters to be used in the script<\/li>\n<\/ol>\n<p>I\u2019m sure there\u2019ll be a lot more!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creates a shortcode to faciliate the use of Protovis data visualization scripts in blog posts.<\/p>\n","protected":false},"author":65,"featured_media":329201,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"Protovis Loader - \u8587\u6653\u6735\u63d2\u4ef6\u76ee\u5f55","description":"Creates a shortcode to faciliate the use of Protovis data visualization scripts in blog posts."},"footnotes":""},"categories":[1],"tags":[2868,16388,13285,378,826],"class_list":["post-138168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-charts","tag-data-visualization","tag-graphics","tag-images","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/138168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/comments?post=138168"}],"version-history":[{"count":0,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/138168\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media\/329201"}],"wp:attachment":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media?parent=138168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/categories?post=138168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/tags?post=138168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}