Here's a straight-forward Gauge chart that shows how you can use a non-zero minimum value. It also uses the colorsRanges property to add the red, yellow, green, yellow and red bars around the Gauge. It's also adjustable by way of a small snippet of custom code (that's shown below in the code). By doing this instead of the built-in adjusting the movement of the needle can be animated using the Grow effect.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.gauge.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="350" height="350"> [No canvas support] </canvas>This is the code that generates the chart:
<script>
var gauge = new RGraph.Gauge({
id: 'cvs',
min: -50,
max: 50,
value: 26,
options: {
valueTextUnitsPost: 'mm',
tickmarksSmal: 50,
tickmarksMedium: 5,
tickmarksBig: 5,
labelsCount: 10,
colorsRanges: [
[-50,-45,'red'],
[-45,40,'yellow'],
[-40,40, '#cfc'],
[40,45, 'yellow'],
[45,50,'red']
]
}
}).draw();
/**
* This is all the code that's necessary to make the Gauge interactive
*/
gauge.canvas.addEventListener('mousedown', function (e)
{
var gauge = RGraph.ObjectRegistry.getObjectByXY(e);
gauge.value = gauge.getValue(e);
gauge.grow();
}, false);
</script>