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.
This is cool, thanks for taking my experiment to the next level.
For the source highlighting – I do it manually, copy/pasting from hiliteme.com
want to toss in the ExplorerCanvas (http://excanvas.sourceforge.net/) mentioned in the original post and see if it all plays nice cross browser?
got it working in IE, just had to remove the trailing comma in your default values
Thanks for the comments
@Stoyan: good link!
@Wade: I’ll see to find the time to play with excanvas, in the meantime thanks for the bug-fixing
working in IE now! great!!!
Thank you for your site
I made with photoshop backgrounds for myspace,youtube and even more
my backgrounds:http://tinyurl.com/6kw9wq
Hope you had a good day and thank you again!
i used this in an aspx page and it works perfectly fine….but when i use it in a content page of master page i start getting js error in inside the mootools-beta-1.2b2.js
line: C.prototype.constructor
error: prototype is null or not an object.
can you please help…its urgent…thanks
I am not sure what you mean…I haven’t used neither mootools nor prototype for this plugin. Are you using these in your page? There might be some clashing then, but I’m not sure, sorry.
Hi
am sorry i did not put the issue correctly.
On a screen i used ajaxtoolkit and this started conflcting with the pie script. Once i removed the reference for mootools-beta-1.2b2.js
it works fine. Can you please confirm
1 if this script will work on a page which has a ajax control ?(i had a <cc1:CalendarExtender control on the page)
2 The pie does not work on IE8.
Appreciate any help on 1&2
thanks
Hi again
I’m glad you solved it. Wrt your points:
1. I can confirm it works with JQuery-style ajax, but I haven’t got any experience with the Ajax control toolkit
2. Never tried with IE8, sorry.
I’d be interested to know your findings on any of these;)
Hi
Thanks for your prompt reply
i tried opening the following url on IE8 and it shows me a blank page
http://atalayasec.org/~villo/canvaspie.html
so it does not work with IE8.
Can you pl point me to a jquery chart script which i can use on IE8?
thanks again