Updating your charts dynamically

  Read comments...

Summary
How you can update your charts dynamically using AJAX. AJAX may be a preferable method to use instead of refreshing the whole page. RGraph contains a method specifically for AJAX - RGraph.AJAX(url, callback), (or you could use jQuery of course).

[No canvas support]
Number of updates: 0

The example on the right shows a Line chart that automatically updates itself every 50 milliseconds. An ideal use for this could be showing a networks bandwidth usage, or a servers load value.

This particular example shows a filled line chart.

To get up-to-date data from your server you could simply have the page refresh itself, storing the data on the server, or use AJAX if you want the data stored client-side.

Notes:
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

<script>
window.onload = function ()
{
    d1  = [0];
    l   = 0; // The letter 'L' - NOT a one

    // Pre-pad the arrays with null values
    for (var i=0; i<600; ++i) {
        d1.push(null);
    }
    
    var obj = null;

    function getGraph(id, d1)
    {
        // After creating the chart, it's stored on the global window object
        if (!obj) {
            obj = new RGraph.Line({
                id: id,
                data: d1,
                options: {
                    xticks: 100,
                    backgroundColor: 'white',
                    backgroundGrid: {
                    backgroundGridVlines: false,
                    backgroundGridBorder: false,
                    title: 'Bandwidth used',
                    titleVpos: 0.5,
                    titleXaxis: 'Last 30 seconds',
                    titleXaxisPos: 0.5,
                    colors: ['black'],
                    linewidth: 0.5,
                    yaxispos: 'right',
                    ymax: 50,
                    xticks: 25,
                    filled: true,
                    numyticks: 2,
                    tickmarks: null,
                    ylabelsCount: 2
                }
            });
            
            var grad = obj.context.createLinearGradient(0,0,0,250);
            grad.addColorStop(0, '#efefef');
            grad.addColorStop(0.9, 'rgba(0,0,0,0)');

            obj.set({
                fillstyle: [grad]
            });
        }

        return obj;
    }

    function drawGraph ()
    {
        // "cache" this in a local variable
        var RG = RGraph;

        // Update the HTML counter - this is totally optional
        document.getElementById("num_updates").innerHTML =
            parseInt(document.getElementById("num_updates").innerHTML) + 1;

        RG.clear(document.getElementById("cvs"));
        
        var graph = getGraph('cvs', d1);
        graph.draw();

        // Add some data to the data arrays
        var r1 = RG.random(
            RG.isNull(d1[d1.length - 1]) ? 26 : d1[d1.length - 1] - 2,
            RG.isNull(d1[d1.length - 1]) ? 24 : d1[d1.length - 1] + 2
        );

       r1 = Math.max(r1, 0);
       r1 = Math.min(r1, 50);

        d1.push(r1);
        
        if (d1.length > 600) {
            d1 = RG.arrayShift(d1);
        }

        if (RG.ISIE8) {
            alert('[MSIE] Sorry, Internet Explorer 8 is not fast enough to support animated charts');
        } else {
            obj.original_data[0] = d1;
            setTimeout(drawGraph, 50);
        }
    }

    drawGraph();
}
</script>
Share RGraph
X

Comments