Canvas Pie Chart Example

Source

https://github.com/thomasandersen/canvas-pie-chart

Setup

HTML

<div id="canvas-pie-chart-browser-usage">
    This browser does not support the canvas tag
</div>

JavaScript

// Create some data
var browserUsageData = [
    // Object: label, value, color
    { 'label' : 'Firefox', 'value' : 39.1, 'color' : '#6685A3' },
    { 'label' : 'Safari', 'value' : 2.2, 'color' : '#99AEC2' },
    { 'label' : 'All others', 'value' : 4.9, 'color' : '#CCD7E1' },
    { 'label' : 'IE 6', 'value' : 29.9, 'color' : '#2B5564' },
    { 'label' : 'IE 7', 'value' : 24.9, 'color' : '#002F4D' }
];

// Create a new instance of CanvasPieChart
var canvasPieChart = new CanvasPieChart( 'canvas-pie-chart-browser-usage', browserUsageData,
{
    'width'             : 330,
    'height'            : 330,
    'strokeLineColor'   : '#FFF',
    'font'              : 'Tahoma',
    'fontSize'          : 12,
    'onSectorClick'     : function( evt, data )
    {
        var alertText = '';
        alertText += 'label: ' + data.label + '\n';
        alertText += 'value: ' + data.value + '\n';
        alertText += 'color: ' + data.color;
        alert( alertText );
    },
    'onSectorMouseOver' : function( evt, data )
    {
        evt.target.title = data.label + ' (' + data.value + ')';
    },
    'sectorTextRendrer' : function( data, total )
    {
        return data.label + ' ' + Math.round( data.value / total * 100 ) + '%';
    }

} ); 

Config