Dev Journal » charts http://blogs.atalayasec.org/dev Thoughts from the _dev_ trench Mon, 27 Jul 2009 08:29:22 +0000 http://wordpress.org/?v=2.8.2 en hourly 1 A JQuery plugin for canvas pies http://blogs.atalayasec.org/dev/2008/02/a-jquery-plugin-for-canvas-pies/ http://blogs.atalayasec.org/dev/2008/02/a-jquery-plugin-for-canvas-pies/#comments Thu, 07 Feb 2008 16:15:00 +0000 Francesco http://blogs.atalayasec.org/dev/?p=9 These days I’ve been thinking on how to make Atalaya charts look better. This morning I’ve found this post that renders a canvas pie chart reading data from a table. Before trying to use it for real, I needed for the data table to disappear after rendering the chart.

The original code, from Stoyan Stefanov, is here. I’ve simply wrapped it in a jquery plugin. It’s enough to wrap the canvas and table elements in a div:

<div id="pie">
	  <table id="mydata">
	    <tr><th>Lang</th><th>Value</th</tr>
	    <tr><td>JavaScript</td><td>100</td></tr>
	    <tr><td>CSS</td><td>200</td></tr>
	    <tr><td>HTML</td><td>300</td></tr>
	    <tr><td>PHP</td><td>50</td></tr>
	    <tr><td>MySQL</td><td>30</td></tr>
	    <tr><td>Apache</td><td>10</td></tr>
	    <tr><td>Linux</td><td>30</td></tr>
	  </table>
	  <canvas id="canvas" width="300" height="300"></canvas>
</div>

and to initialize the plugin:

 $(function() {
         $(‘#pie‘).canvaspie({table: ‘#mydata‘,canvas: ‘#canvas‘})
 });

The plugin hides the table and shows the pie. An example (and the plugin itself) can be found here, in case someone finds it useful.

P.S: yes, I do need a code highlighter, sorry.

P.P.S: Thanks Stoyan for pointing me to hiliteme.

Update: I’ve updated the test page to use ExplorerCanvas, so now the test page should work on IE as well.

]]> http://blogs.atalayasec.org/dev/2008/02/a-jquery-plugin-for-canvas-pies/feed/ 11