An adjustable segmented Meter chart

Share RGraph:   

ID: 264

[No canvas support]

This goes in the documents HEAD:
<script src="/libraries/RGraph.common.core.js"></script>
<script src="/libraries/RGraph.common.dynamic.js"></script>
<script src="/libraries/RGraph.meter.js"></script>

This goes in the documents ONLOAD event (or equivalent):
var meter = new RGraph.Meter('cvs', 0,100,75)
    .set('adjustable', RGraph.PI - 0.55)
    .set('angles.start', RGraph.PI - 0.55)
    .set('angles.end', RGraph.TWOPI + 0.5)
    .set('centery', 250)
    .set('linewidth.segments', 15)
    .set('text.size', 22)
    .set('text.color', 'black')
    .set('green.color', '#0a0')
    .set('segment.radius.start', 175)
    .set('border', false)
    .set('strokestyle', 'white')
    .set('tickmarks.small.num', 0)
    .set('tickmarks.big.num', 0)
    .set('needle.radius', 150)
    .set('centerpin.stroke', '#000')
    .set('centerpin.fill', '#fff')
    .set('text.valign', 'bottom')
    .set('colors.ranges', [
                           [0,10,'#c00'],
                           [10,20,'#cc0'],
                           [20,30,'#cc0'],
                           [30,40,'#0c0'],
                           [40,50,'#0c0'],
                           [50,60,'#0c0'],
                           [60,70,'#0c0'],
                           [70,80,'#0c0'],
                           [80,90,'#0c0'],
                           [90,100,'#0c0']
                          ])
        .draw();

This goes in the documents BODY:
<canvas id="cvs" width="500" height="400">[No canvas support]</canvas>