A Meter-esque SVG Pie chart

Note: There's a dedicated chart type that looks similar to this called the Activity meter. It can also be further configured to look even more like this. And because it's a dedicated chart type - to do so requires a lot less code. You can see demos in the download archive (which have the prefix svg-activity- and activity-).

Here's a set of Pie objects that have been configured so that they appear as circular progress meters.

This is done by adding one Pie object that has the real color and is configured with the real value on top of another which is used as the background and has a single value of 100 so it's a full Pie segment.

The labels are added by utilising the RGraph.SVG.text API function. You can use this function to add your own text labels to your visualisations. To position the text the pie.centerx and pie.centery api variables are used.

One more thing that's used is the RGraph.SVG.GLOBALS variable. All objects get any values that are set on this object first before their own properties. This means that you can set common values as defaults and all subsequently created objects will use them.

This goes in the documents header:

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

Put this where you want the chart to show up:

<div style="float: right">
    <div style="width: 350px; height: 350px; background-color: black; border-radius: 5px" id="chart-container"></div>
</div>

This is the code that generates the chart - it should be placed AFTER the div tag:

<script>
    // These global settings are applied to all objects that are created
    // subsequently. If you're creating multiple charts that use the same
    // properties and settings you can use the RGraph.SVG.GLOBALS object
    // to 'centralise' the configuration.
    RGraph.SVG.GLOBALS = {
        colors: ['#666'],
        donut: true,
        donutWidth: 30,
        marginLeft: 5,
        marginRight: 5,
        marginTop: 5,
        marginBottom: 5
    };



    // Create the outer Donuts background
    pie1a = new RGraph.SVG.Pie({
        id: 'chart-container',
        data: [100],
        options: {
            responsive: [
                {maxWidth:null,parentCss:{'float':'right',textAlign:'none'}},
                {maxWidth:700,parentCss:{'float':'none',textAlign:'center'}}
            ]
        }
    }).draw();

    // Create the outer Donut. This chart shows the real values.
    pi1b = new RGraph.SVG.Pie({
        id: 'chart-container',
        data: [65,35],
        options: {
            colors: ['#9AC17E','transparent']
        }
    }).roundRobin();



    // Create the second Donuts background. Note the reduction in the
    // radius setting.
    pie2a = new RGraph.SVG.Pie({
        id: 'chart-container',
        data: [100],
        options: {
            radius: pie1a.radius - 33
        }
    }).draw();

    // Create the second Donuts foreground. It uses the same radius
    // as the above Donut.
    pie2b = new RGraph.SVG.Pie({
        id: 'chart-container',
        data: [23,77],
        options: {
            radius: pie2a.radius,
            colors: ['#FADA31','transparent']
        }
    }).roundRobin();



    // Create the background for the third Donut chart. The radius has
    // been reduced again from the second Donut chart.
    pie3a = new RGraph.SVG.Pie({
        id: 'chart-container',
        data: [100],
        options: {
            radius: pie2a.radius - 33
        }
    }).draw();

    // The foreground for the third donut chart.
    pie3b = new RGraph.SVG.Pie({
        id: 'chart-container',
        data: [65,35],
        options: {
            radius: pie3a.radius,
            colors: ['#D3696B','transparent']
        }
    }).roundRobin();
    
    


    // The background for the fourth Donut chart. Again,
    // the radius has been reduced from the previous
    // Donut chart.
    pie4a = new RGraph.SVG.Pie({
        id: 'chart-container',
        data: [100],
        options: {
            radius: pie3a.radius - 33
        }
    }).draw();

    // The foreground for the the fourth Donut chart.
    pie4b = new RGraph.SVG.Pie({
        id: 'chart-container',
        data: [63,37],
        options: {
            radius: pie4a.radius,
            colors: ['#82C1E0','transparent']
        }
    }).roundRobin();
    
    
    
    

    // Add some custom text - the label - for the outer Donut chart.
    RGraph.SVG.text({
        object: pie1a,
        text: 'First option',
        x: pie1a.centerx - 5,
        y: pie1a.centery - pie1a.radius + (RGraph.SVG.GLOBALS.donutWidth / 2),
        color: 'white',
        bold: true,
        halign: 'right',
        valign: 'center',
        background: 'rgba(255,255,255,0.35)',
        padding: 2
    });

    // The label for the second Donut.
    RGraph.SVG.text({
        object: pie1a,
        text: 'Second option',
        x: pie2a.centerx - 5,
        y: pie2a.centery - pie2a.radius + (RGraph.SVG.GLOBALS.donutWidth / 2),
        color: 'white',
        bold: true,
        halign: 'right',
        valign: 'center',
        background: 'rgba(255,255,255,0.35)',
        padding: 2
    });

    // The label for the third Donut.
    RGraph.SVG.text({
        object: pie1a,
        text: 'Third option',
        x: pie3a.centerx - 5,
        y: pie3a.centery - pie3a.radius + (RGraph.SVG.GLOBALS.donutWidth / 2),
        color: 'white',
        bold: true,
        halign: 'right',
        valign: 'center',
        background: 'rgba(255,255,255,0.35)',
        padding: 2
    });

    // The label for the fourth Donut - the innermost one.
    RGraph.SVG.text({
        object: pie1a,
        text: 'Fourth option',
        x: pie4a.centerx - 5,
        y: pie4a.centery - pie4a.radius + (RGraph.SVG.GLOBALS.donutWidth / 2),
        color: 'white',
        bold: true,
        halign: 'right',
        valign: 'center',
        background: 'rgba(255,255,255,0.35)',
        padding: 2
    });
</script>