This Gauge is much like the previous one but with AJAX updating instead of click updating. Because of the AJAX it only works when viewed online - which you can do here.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.effects.js"></script> <script src="RGraph.gauge.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="250" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
window.onload = function ()
{
var gauge = new RGraph.Gauge({
id: 'cvs',
min:0,
max: 100,
value: 7,
options: {
borderOutline: 'transparent',
needleColors: ['red'],
needleType: 'line',
centerpinRadius: 0.1,
titleTop: 'Speed',
labelsOffset: 7,
textAccessible: true
}
}).on('draw', function (obj)
{
var co = obj.context;
// This circle becomes the border of the centerpin
RGraph.path2(co, ['b', 'a', obj.centerx, obj.centery, 10, 0, RGraph.TWOPI, false, 'f', 'black']);
})
.draw();
var delay = 1500;
function myAJAXCallback(num)
{
gauge.value = num;
gauge.grow()
// Make another AJAX call after the delay (which is in milliseconds)
setTimeout(function ()
{
RGraph.AJAX.getNumber('/getdata.html', myAJAXCallback);
}, delay);
}
/**
* Make the AJAX call every so often (contolled by the delay variable)
*/
setTimeout(function ()
{
RGraph.AJAX.getNumber('/getdata.html', myAJAXCallback);
}, delay);
};
</script>