# An SVG version of a canvas Pie/Bar example chart

This is an SVG version of an, originally canvas based, demo that shows the combination of a Pie and grouped Bar chart. Both are animated - the Pie chart with th roundRobin effect and the Bar chart with the wave effect. The Bar chart has the labelsAbove option enabled.

This goes in the documents header:

    <script src="RGraph.svg.common.core.js"></script>
    <script src="RGraph.svg.pie.js"></script>
    <script src="RGraph.svg.bar.js"></script>

Put this where you want the chart to show up:

    <div style="width: 650px; height: 350px" id="cc"></div></div>

This is the code that generates the chart:

    <script>
        var bar = new RGraph.SVG.Bar({
            id: 'cc',
            data: [[50,60,52],[65,30,50],[40,80,70],[115,100,70]],
            options: {
                labelsAbove: true,
                labelsAboveSize: 10,
                xaxisLabels: ['Bob', 'Jamie', 'Cynthia', 'Peter'],
                xaxis: false,
                yaxis: false,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                hmargin: 25,
                colors: [
                    'Gradient(#f11:#f11:white)',
                    'Gradient(#1cc:#1cc:white)',
                    'Gradient(#00f:#00f:white)'
                ],
                shadow: true,
                shadowOffsetx: 0,
                shadowOffsety: 0,
                shadowBlur: 7
            }
        }).wave();

        var pie = new RGraph.SVG.Pie({
            id: 'cc',
            data: [270,270,164],
            options: {
                exploded: [7,2,],
                centerx: 90,
                centery: 85,
                radius: 30,
                shadow: true,
                shadowBlur: 7,
                shadowOffsetx: 0,
                shadowOffsety: 0,
                shadowOpacity: .25,
                tooltips: [
                    'Total Monday sales: 270',
                    'Total Tuesday sales: 270',
                    'Total Wednesday sales: 264'
                ],
                tooltipsEvent: 'mousemove',
                strokestyle: 'rgba(0,0,0,0)',
                colors: [
                    'Gradient(white:red)',
                    'Gradient(white:#0f0)',
                    'Gradient(white:blue)'
                ],
                labels: ['Mondays results'],
                labelsSticks: false,
                textBold: true
            },
        }).roundRobin({frames: 50});
    </script>