Two dual-scale Meter charts
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>