A skeleton Gauge chart

[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.gauge.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="300" height="150">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 50,
        value: 46,
        options: {
            centery: 120,
            radius: 130,
            anglesStart: RGraph.PI,
            anglesEnd: RGraph.TWOPI,
            needleSize: 85,
            borderWidth: 0,
            shadow: false,
            needleType: 'line',
            colorsRanges: [[0,10,'red'], [10,20,'yellow'],[20,50,'#0f0']],
            borderInner: 'rgba(0,0,0,0)',
            borderOuter: 'rgba(0,0,0,0)',
            borderOutline: 'rgba(0,0,0,0)',
            centerpinColor: 'rgba(0,0,0,0)',
            centerpinRadius: 0
        }
    }).grow();
    
    gauge.canvas.onclick = function (e)
    {
        var value = gauge.getValue(e);
        
        if (typeof value === 'number') {
            gauge.value = value;
            gauge.grow();
        }
    }
</script>