An SVG version of a canvas Pie/Bar example chart

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>

« Back