A basic SVG Donut chart

This goes in the documents header:

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

Put this where you want the chart to show up:

<div style="width: 350px; height: 350px" id="chart-container"></div>

This is the code that generates the chart:

<script>
    new RGraph.SVG.Pie({
        id: 'chart-container',
        data: [5,3,8,4,6,4],
        options: {
            exploded: 5,
            donut: true,
            title: "Browser share",
            tooltips: ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)', 'Other (3%)'],
            shadow: true,
            colors: [
              'Gradient(red:red:red:#faa:red)',
              'Gradient(#0f0:#0f0:#0f0:#afa:#0f0)',
              'Gradient(#00f:#00f:#00f:#aaf:#00f)',
              'Gradient(gray:gray:gray:#ccc:gray)',
              'Gradient(#f0f:#f0f:#f0f:#faf:#f0f)',
              'Gradient(#ff0:#ff0:#ff0:#ffa:#ff0)',
              'Gradient(red:red:red:#faa:red)'
            ]
        }
    }).roundRobin();
</script>

« Back