# A basic Pie chart

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.pie.js"></script>

Put this where you want the chart to show up:

    <canvas id="cvs" width="550" height="300">
        [No canvas support]
    </canvas>

This is the code that generates the chart:

    <script>
        data     = [41.2,18.2,17.2,14.2,5,4.2];
        labels   = ['Symbian','Blackberry','Android','iOS','Windows','Others'];
        tooltips = [];

        labels.forEach(function (v, k, arr)
        {
            tooltips[k] = '<b>{1}</b><br /><br /><i>Market share: {2}%</i>'.format(
                labels[k],
                data[k]
            );

            labels[k] = labels[k] + ' ' + data[k] + '%';
        });

        pie = new RGraph.Pie({
            id: 'cvs',
            data: data,
            options: {
                tooltips: tooltips,
                labels: labels,
                labelsBold: true,
                labelsSticks: true,
                labelsSticksLength: 45,
                labelsSticksUsecolors: false,
                shadow: false,
                strokestyle: 'rgba(0,0,0,0)',
                colors: ['#F0F0F0','#08306B','#D9D9D9','#BDBDBD','#969696','#D9D9D9'],
                textFont: '"Lucida Grande", "Lucida Sans Unicode", Arial',
                textSize: 10,
                textColor: 'black',
                labelsColors: ['black'],
                tooltipsEvent: 'mousemove',
                highlightStyle: 'outline',
                title: 'Smartphone share in Q2 2010',
                titleY: -25,
                titleSize: 18,
                gutterTop: 50
            }
        }).roundRobin();

        // Align the tooltip text to the left
        RGraph.tooltips.style.textAlign = 'left';
    </script>

« Back