A Meter chart with a triangular needle

[No canvas support]

This goes in the documents header: 
<script src="RGraph.common.core.js"></script>
<script src="RGraph.meter.js"></script>
Put this where you want the chart to show up: 
<canvas id="cvs" width="600" height="300">
    [No canvas support]
</canvas>
This is the code that generates the chart: 
<script>
    meter = new RGraph.Meter({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 62,
        options: {
            segmentRadiusStart: 125,
            needleRadius: 115,
            needleType: 'pointer',
            tickmarksBigColor: 'transparent',
            tickmarksSmallColor: 'transparent',
            labels: false,
            linewidth: 0.0001,
            linewidthSegments: 20,
            strokestyle: 'white',
            colorsRanges: [
                [0, 33, '#FFC900'],
                [33, 66, '#8FCE21'],
                [66, 100, '#0094DA']
            ]
        }
    }).grow();
    
    meter.canvas.onclick = function (e)
    {
        var value = meter.getValue(e);
        
        meter.value = value;
        meter.grow();
    }
</script>

« Back