Two dual-scale Meter charts

[No canvas support] [No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.meter.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs1" width="600" height="450">[No canvas support]</canvas>
<canvas id="cvs2" width="600" height="450">[No canvas support]</canvas>
This is the code that generates the chart:
<script>
    meter1 = new RGraph.Meter({
        id: 'cvs1',
        min: 0,
        max: 50,
        value: 22,
        options: {
            anglesStart: RGraph.PI - 0.55,
            anglesEnd: RGraph.TWOPI + 0.5,
            centery: 290,
            textSize: 12,
            textValign: 'bottom',
            greenStart: 40,
            greenEnd: 50,
            redStart:0,
            redEnd: 30,
            yellowStart: 30,
            yellowEnd: 40,
            greenColor: '#000',
            yellowColor: '#000',
            redColor: '#000',
            segmentRadiusStart: 242,
            border: 0,
            tickmarksSmallNum: 0,
            tickmarksBigNum: 0,
            needleRadius: 50,
            needleColor: '#ddd',
            centerpinStroke: 'white',
            centerpinFill: 'black',
            textAccessible: false,
            unitsPost: 'pc'
        }
    }).on('beforedraw', function (obj)
    {
        RGraph.clear(obj.canvas, 'white');
    }).on('draw', function (obj)
    {
        RGraph.path2(
            obj.context,
            'b a % % % 0 6.2830 false f white',
            obj.centerx,
            obj.centery,
            obj.radius - 50
        );
    }).draw();






    meter2 = new RGraph.Meter({
        id: 'cvs1',
        min: 0,
        max: 100,
        value: 75,
        options: {
            radius: meter1.radius - 10,
            backgroundColor: 'rgba(0,0,0,0)',
            anglesStart: RGraph.PI - 0.55,
            anglesEnd: RGraph.TWOPI + 0.5,
            centery: 290,
            textSize: 12,
            textColor: 'black',
            textValign: 'bottom',
            greenColor: 'black',
            yellowColor: 'black',
            redColor: 'black',
            segmentRadiusStart: 234,
            border: 0,
            tickmarksSmallNum: 0,
            tickmarksBigNum: 0,
            needleRadius: 150,
            needleColor: 'gray',
            centerpinStroke: 'gray',
            centerpinFill: 'gray',
            textAccessible: false,
            labelsRadiusOffset:-30,
            unitsPost:'%'
        }
    }).draw();
    
    meter2.canvas.onclick = function (e)
    {
        var value = meter2.getValue(e);
        
        meter2.value = value;
        meter2.grow();
    }



    
    
    /*******************************************
     * Make the second, more colourful example *
     *******************************************/
    meter3 = new RGraph.Meter({
        id: 'cvs2',
        min: 0,
        max: 50,
        value: 22,
        options: {
            backgroundColor: 'black',
            anglesStart: RGraph.PI - 0.55,
            anglesEnd: RGraph.TWOPI + 0.5,
            centery: 290,
            textSize: 12,
            textColor: 'pink',
            textValign: 'bottom',
            greenStart: 40,
            greenEnd: 50,
            greenColor: '#0a0',
            redStart:0,
            redEnd: 30,
            yellowStart: 30,
            yellowEnd: 40,
            segmentRadiusStart: 235,
            border: 0,
            tickmarksSmallNum: 0,
            tickmarksBigNum: 0,
            needleRadius: 50,
            needleColor: '#ddd',
            centerpinStroke: 'black',
            centerpinFill: '#ddd',
            textAccessible: false,
            adjustable: true
        }
    }).on('beforedraw', function (obj)
    {
        RGraph.clear(obj.canvas, 'black');
    }).on('draw', function (obj)
    {
        RGraph.path2(
            obj.context,
            'b a % % % 0 6.2830 false f black',
            obj.centerx,
            obj.centery,
            obj.radius - 50
        );
    }).draw();

    meter4 = new RGraph.Meter({
        id: 'cvs2',
        min: 0,
        max: 100,
        value: 75,
        options: {
            radius: meter1.radius - 50,
            backgroundColor: 'black',
            anglesStart: RGraph.PI - 0.55,
            anglesEnd: RGraph.TWOPI + 0.5,
            centery: 290,
            textSize: 12,
            textColor: 'white',
            textValign: 'bottom',
            greenColor: '#0a0',
            segmentRadiusStart: 193,
            border: 0,
            tickmarksSmallNum: 0,
            tickmarksBigNum: 0,
            needleRadius: 150,
            needleColor: '#ddd',
            centerpinStroke: 'black',
            centerpinFill: '#ddd',
            textAccessible: false,
            adjustable: true
        }
    }).draw();
</script>