# A Donut chart showing browser market share

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.dynamic.js"></script>
    <script src="RGraph.common.tooltips.js"></script>
    <script src="RGraph.common.key.js"></script>
    <script src="RGraph.pie.js"></script>

Put this where you want the chart to show up:

    <canvas id="cvs" width="475" height="350">
        [No canvas support]
    </canvas>

This is the code that generates the chart:

    <script>
        window.onload = function ()
        {
            var donut = new RGraph.Pie({
                id: 'cvs',
                data: [41,37,16,3,3],
                options: {
                    variant: 'donut',
                    linewidth: 5,
                    exploded: 5,
                    strokestyle: 'rgba(0,0,0,0)',
                    title: "Browser share",
                    tooltips: ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)', 'Other (3%)'],
                    key: ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)', 'Other (3%)'],
                    keyShadow: true,
                    keyShadowOffsetx: 1,
                    keyShadowOffsety: 1,
                    keyShadowBlur: 3,
                    keyShadowColor: '#ccc',
                    keyAlign: 'right',
                    align: 'left',
                    shadowOffsetx: 2,
                    shadowOffsety: 2,
                    shadowBlur: 3,
                    centerx: 185
                }
            }).draw();
        };
    </script>

« Back