Note: For security reasons the AJAX demos don't work offline. You can view the demos on the RGraph website here: https://www.rgraph.net/demos/index.html

A customised Gauge chart (with AJAX updating)

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.

[No canvas support]

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>
    gauge = new RGraph.Gauge({
        id: 'cvs',
        min:0,
        max: 100,
        value: 7,
        options: {
            borderOutline: 'transparent',
            needleColors: ['red'],
            needleType: 'line',
            centerpinRadius: 0.1,
            titleTop: 'Speed'
        }
    }).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>