Zend Certified Engineer

phpguru.org

Free PHP, Javascript and C# code
Download RGraph - the HTML5 graphing library... Home ~ Downloads ~ FAQs ~ Search ~ Licensing

Blog Categories

[Index]

Me

Articles

PHP5

HTML5

PHP4

Javascript

C#

HTML5 Goodies

Warning: The only browser these examples seem to work fully on is Firefox.

A HTML5 pie chart

A HTML5 pie chart that is implemented using the canvas tag. Good for showing items as a part/percentage of a whole.

<canvas id="myPie" width="250" height="250" style="margin-right: 20px">
    This is the fallback content for browsers which don't yet support the canvas tag (ie. MSIE).
</canvas>
<script type="text/javascript">
<!--
    /**
    * These are not angles - these are values. The appropriate angles are calculated
    */
    var pie = new PieChart('myPie', [45,79,89,60,99]);
    pie.SetOutline('#fff');
    pie.SetLinewidth(3);
    pie.Draw();
// -->
</script>

This is a pie chart Useful for expressing something as part of a whole. Think percentages, but a pie chart is somewhat more visual

The white bits seperating the segments are done by simply specifying the line colour to be white. In effect, it looks like the pie segments are exploded. Kaboom.

The values for this pie chart represent the market shares for browsers on June 30th 2008.

Legends

No not me, but some sort of key could be made by doing it manually (kind of), using the same colours as the pie chart. Eg:


Browser market share at the beginning of July 2008

This is the fallback content for browsers which don't yet support the canvas tag (ie. MSIE).
Microsoft Internet Explorer 7 (41%)
Microsoft Internet Explorer 6 (37%)
Firefox (16%)
Safari (3%)
Other (3%)


Similar graph types

I might also create a "stacked bar". Similar to a pie chart, but a bar. Like a pie chart it would be best for showing something as a part of a whole, eg percentages.


This is the fallback content for browsers which don't yet support the canvas tag (ie. MSIE). This is the fallback content for browsers which don't yet support the canvas tag (ie. MSIE). This is the fallback content for browsers which don't yet support the canvas tag (ie. MSIE).

Download

Download the Javascript file.

Download RGraph - the HTML5 graphing library... Home ~ Downloads ~ FAQs ~ Search ~ Licensing
© Copyright 2005-2008 Richard Heyes