# A Pie chart using gradients as colors

Using gradients to achieve a bevel effect

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="400" height="300">
        [No canvas support]
    </canvas>

This is the code that generates the chart:

    <script>
        window.onload = function ()
        {
            function createGradient (obj, color)
            {
                return RGraph.radialGradient(
                    obj,
                    200, 150, 95, 200, 150, 125,
                    color, 'black'
                )
            }

            /**
            * Because the pie object is going to be used in one of the options it must
            * be first created - and then we must use the set call to set the properties
            */
            var pie = new RGraph.Pie({
                id: 'cvs',
                data: [4,3,2,6,8],
            })

            pie.set({
                colors: [
                    createGradient(pie, '#ABD874'),
                    createGradient(pie, '#E18D87'),
                    createGradient(pie, '#599FD9'),
                    createGradient(pie, '#F4AD7C'),
                    createGradient(pie, '#D5BBE5')
                ],
                shadowOffsetx: 5,
                shadowOffsety: 5,
                shadowBlur: 15,
                shadowColor: '#bbb',
                tooltips: ['Robert','Louise','Peter','Kevin','Jack'],
                labelsSticksColors: ['green','red','blue','orange','purple'],
                labels: ['Robert','Louise','Peter','Kevin','Jack'],
                labelsSticksList: true,
                radius: 100,
                strokestyle: 'rgba(0,0,0,0)',
                textAccessible: true
            }).draw();
        };
    </script>

« Back