SVG Pie charts configured to look like meters

This goes in the documents header:

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

Put this where you want the chart to show up:

<style>
    div#meters{
        position: relative;
        background-color: black;
        height: 350px;
    }

    div#meters div {
        position: absolute;
        top: 0;
        width: 300px;
        height: 300px;
    }
    
    
    div#chart-container4 {
        position: absolute !important;
        left: 0 !important;
        top: 280px !important;
        width: 900px !important;
        height: 70px !important;
    }
</style>

<div id="meters">
    <div id="chart-container1"></div>
    <div id="chart-container2"></div>
    <div id="chart-container3"></div>
    <div id="chart-container4"></div>
</div>

This is the code that generates the chart:

<script>
    pie1 = new RGraph.SVG.Pie({
        id: 'chart-container1',
        data: [85,15],
        options: {
            colors: ['red', 'gray']
        }
    }).draw().exec(function (obj)
    {
        RGraph.SVG.create({
            svg: obj.svg,
            type: 'circle',
            parent: obj.svg.all,
            attr: {
                cx: obj.centerx,
                cy: obj.centery,
                r: obj.radius - 10,
                fill: 'black'
            }
        });

        // Add the text label
        RGraph.SVG.text({
            object: obj,
            parent: obj.svg.all,
            text:   obj.data[0] + '%',
            x:      obj.centerx,
            y:      obj.centery,
            halign: 'center',
            valign: 'center',
            size:   45,
            bold: true,
            color:  '#999'
        });

        // Add the text label of the name
        RGraph.SVG.text({
            object: obj,
            parent: obj.svg.all,
            text:   'Charles',
            x:      obj.centerx,
            y:      obj.centery + 20,
            halign: 'center',
            valign: 'top',
            size:   16,
            bold: true,
            color:  '#999'
        });
    });

















    new RGraph.SVG.Pie({
        id: 'chart-container2',
        data: [12,88],
        options: {
            colors: ['red', 'gray']
        }
    }).draw().exec(function (obj)
    {
        RGraph.SVG.create({
            svg: obj.svg,
            type: 'circle',
            parent: obj.svg.all,
            attr: {
                cx: obj.centerx,
                cy: obj.centery,
                r: obj.radius - 10,
                fill: 'black'
            }
        });

        // Add the text label
        RGraph.SVG.text({
            object: obj,
            parent: obj.svg.all,
            text:   obj.data[0] + '%',
            x:      obj.centerx,
            y:      obj.centery,
            halign: 'center',
            valign: 'center',
            size:   45,
            bold: true,
            color:  '#999'
        });

        // Add the text label of the name
        RGraph.SVG.text({
            object: obj,
            parent: obj.svg.all,
            text:   'Ricky',
            x:      obj.centerx,
            y:      obj.centery + 20,
            halign: 'center',
            valign: 'top',
            size:   16,
            bold: true,
            color:  '#999'
        });
    });














    new RGraph.SVG.Pie({
        id: 'chart-container3',
        data: [42,58],
        options: {
            colors: ['red', 'gray']
        }
    }).draw().exec(function (obj)
    {
        RGraph.SVG.create({
            svg: obj.svg,
            type: 'circle',
            parent: obj.svg.all,
            attr: {
                cx: obj.centerx,
                cy: obj.centery,
                r: obj.radius - 10,
                fill: 'black'
            }
        });

        // Add the text label of the value
        RGraph.SVG.text({
            object: obj,
            parent: obj.svg.all,
            text:   obj.data[0] + '%',
            x:      obj.centerx,
            y:      obj.centery,
            halign: 'center',
            valign: 'center',
            size:   45,
            bold: true,
            color:  '#999'
        });

        // Add the text label of the name
        RGraph.SVG.text({
            object: obj,
            parent: obj.svg.all,
            text:   'Freddy',
            x:      obj.centerx,
            y:      obj.centery + 20,
            halign: 'center',
            valign: 'top',
            size:   16,
            bold: true,
            color:  '#999'
        });
    });














    new RGraph.SVG.HBar({
        id: 'chart-container4',
        data: [100],
        options: {
            colors: ['#666'],
            gutterTop: 40,
            gutterBottom: 5,
            backgroundGrid: false,
            xaxis: false,
            xaxisScale: false,
            yaxis: false,
            title: 'Overall 16%',
            titleSize: 22,
            titleColor: '#666',
            titleBold: true
        }
    }).draw();














    new RGraph.SVG.HBar({
        id: 'chart-container4',
        data: [16],
        options: {
            xaxis: false,
            xaxisScale: false,
            xaxisMax: 100,
            xaxisLabels: false,
            yaxis: false,
            colors: ['red'],
            gutterTop: 40,
            gutterBottom: 5,
            backgroundGrid: false
        }
    }).grow();
</script>

« Back