{"id":10493,"date":"2010-09-10T04:18:10","date_gmt":"2010-09-10T04:18:10","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/protovis-loader\/"},"modified":"2010-09-20T00:55:54","modified_gmt":"2010-09-20T00:55:54","slug":"protovis-loader","status":"publish","type":"plugin","link":"https:\/\/pe.wordpress.org\/plugins\/protovis-loader\/","author":4849600,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"0.3.0","stable_tag":"0.3.0","tested":"3.0.5","requires":"2.8.0","requires_php":"","requires_plugins":"","header_name":"Protovis Loader","header_author":"Sean Carmody","header_description":"","assets_banners_color":"","last_updated":"2010-09-20 00:55:54","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"http:\/\/www.stubbornmule.net\/resources\/protovis-loader\/","header_author_uri":"http:\/\/www.stubbornmule.net\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":1728,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":{"0.3.0":"<ul>\n<li>Enhancements: improved CSS and new inline option.<\/li>\n<\/ul>"},"ratings":{"1":0,"2":0,"3":0,"4":0,"5":0},"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["0.1","0.1.1","0.2.0","0.2.1","0.3.0"],"block_files":[],"assets_screenshots":{"screenshot-2.png":{"filename":"screenshot-2.png","revision":"1566856","resolution":"2","location":"plugin","width":542,"height":575},"screenshot-1.png":{"filename":"screenshot-1.png","revision":"1566856","resolution":"1","location":"plugin","width":878,"height":437}},"screenshots":{"1":"Using the shortcode in <a href=\"http:\/\/www.stubbornmule.net\/2010\/09\/protovis-for-chrome-and-safari\/\">a blog post<\/a>","2":"The end result."}},"plugin_section":[],"plugin_tags":[4108,11746,6305,163,229],"plugin_category":[43,50,59],"plugin_contributors":[129633],"plugin_business_model":[],"class_list":["post-10493","plugin","type-plugin","status-publish","hentry","plugin_tags-charts","plugin_tags-data-visualization","plugin_tags-graphics","plugin_tags-images","plugin_tags-javascript","plugin_category-customization","plugin_category-media","plugin_category-utilities-and-tools","plugin_contributors-seancarmody","plugin_committers-seancarmody"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/protovis-loader.svg","icon_2x":false,"generated":true},"screenshots":[{"src":"https:\/\/ps.w.org\/protovis-loader\/trunk\/screenshot-1.png?rev=1566856","caption":"Using the shortcode in <a href=\"http:\/\/www.stubbornmule.net\/2010\/09\/protovis-for-chrome-and-safari\/\">a blog post<\/a>"},{"src":"https:\/\/ps.w.org\/protovis-loader\/trunk\/screenshot-2.png?rev=1566856","caption":"The end result."}],"raw_content":"<!--section=description-->\n<p>Protovis Loader is a plugin which faciliates the use of <a href=\"http:\/\/vis.stanford.edu\/protovis\/\">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\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\n<p>Protovis Loader makes the whole process a lot easier in two ways:<\/p>\n\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\n<p>Usage:<\/p>\n\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\n<ul>\n<li>type: 'chart' (default) displays a chart in a box with an optional caption, 'inline' 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\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\n<p>Here is an example of use of the tag:<\/p>\n\n<p>[pvis src=\"http:\/\/www.example.com\/chart.js\" img=\"fails.png\" height=\"125px\"]My Caption![\/pvis]<\/p>\n\n<p>You can see the plugin in action on <a href=\"http:\/\/www.stubbornmule.net\/resources\/protovis-loader\/\">the Stubborn Mule<\/a>.<\/p>\n\n<h3>To-Do List<\/h3>\n\n<p>This list is not really prioritised yet.<\/p>\n\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\n<p>I'm sure there'll be a lot more!<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload 'pv-loader' to the '\/wp-content\/plugins\/' directory<\/li>\n<li>Activate the plugin through the 'Plugins' menu in WordPress<\/li>\n<li>Use the [pvis] shortcode to add protovis code to your post (see <a href=\"http:\/\/wordpress.org\/extend\/plugins\/protovis-loader\/screenshots\/\">Screenshots<\/a> for an example)<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt>What is the syntax of the pvis shortcode?<\/dt>\n<dd><p>Here is an example:<\/p>\n\n<pre><code>[pvis src=\"\/scripts\/chart.js\" img=\"\/images\/fail.png\"]A caption[\/pvis]\n<\/code><\/pre>\n\n<p>Attributes:<\/p>\n\n<ul>\n<li>src: specifies the location of the protovis script<\/li>\n<li>img: specifes the URL of an image to display instead if scripts are blocked<\/li>\n<li>alt: speficies image alternative text<\/li>\n<\/ul>\n\n<p>Text between the tags will be set as a caption<\/p><\/dd>\n<dt>Can I specifiy  any CSS?<\/dt>\n<dd><p>Not yet.<\/p><\/dd>\n<dt>Which Protovis library does the plugin use?<\/dt>\n<dd><p>Currently version Protovis 3.2 ships with the plugin.<\/p><\/dd>\n<dt>Can I use a different version of Protovis?<\/dt>\n<dd><p>Not yet.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>0.3.0<\/h4>\n\n<ul>\n<li>Tweaked CSS for caption to improve vertical alignment<\/li>\n<li>Added optional height\/width dimension parameters for chart canvas<\/li>\n<li>Added optional \"inline\" chart type (no caption no borders)<\/li>\n<\/ul>\n\n<h4>0.2.1<\/h4>\n\n<ul>\n<li>Fixed error: missing &gt; in css div element<\/li>\n<\/ul>\n\n<h4>0.2.0<\/h4>\n\n<ul>\n<li>Added CSS (fixed style at this point)<\/li>\n<li>Added BlackBerry to the list of non-SVG browsers<\/li>\n<\/ul>\n\n<h4>0.1.1<\/h4>\n\n<p>A variety of very minor tweaks, mainly adhereing to WP coding standards.<\/p>\n\n<h4>0.1<\/h4>\n\n<ul>\n<li>The first release of the plugin.<\/li>\n<\/ul>","raw_excerpt":"Creates a shortcode to faciliate the use of Protovis data visualization scripts in blog posts.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/10493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=10493"}],"author":[{"embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/seancarmody"}],"wp:attachment":[{"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=10493"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=10493"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=10493"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=10493"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=10493"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pe.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=10493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}