Updating your charts dynamically

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: url, callback: callback}), (or you could use jQuery of course).

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 server's 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.

• Remember that browsers can slow down timers (ie setTimeout() calls) for background pages (eg minimised browsers). Google Chrome does this. If you use setInterval() instead of setTimeout() then it can cause "jumpiness" in updates and may also cause unexpected results.
• For long running processes you should not keep recreating the object. Here, the line chart is created once and stored on the window object (ie a global variable).
• Be careful of the data types you use to pass the data to RGraph - you should use numbers to represent values, not strings.

<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 window.obj = null;
    
        function getGraph(id, d1)
        {
            // After creating the chart, it's stored on the global window object
            if (!window.obj) {
                window.obj = new RGraph.Line({
                    id: id,
                    data: d1,
                    options: {
                        xaxisTickmarksCount: 100,
                        colorsBackground: 'white',
                        backgroundGrid: {
                        backgroundGridVlines: false,
                        backgroundGridBorder: false,
                        title: 'Bandwidth used',
                        titleVpos: 0.5,
                        xaxisTitle: 'Last 30 seconds',
                        xaxisTitlePos: 0.5,
                        colors: ['black'],
                        linewidth: 0.5,
                        yaxisPosition: 'right',
                        yaxisScaleMax: 50,
                        xaxisTickmarksCount: 25,
                        filled: true,
                        yaxisTickmarksCount: 2,
                        tickmarksStyle: null,
                        yaxisLabelsCount: 2
                    }
                });
                
                var grad = window.obj.context.createLinearGradient(0,0,0,250);
                grad.addColorStop(0, '#efefef');
                grad.addColorStop(0.9, 'rgba(0,0,0,0)');
    
                window.obj.set({
                    filledColors: [grad]
                });
            }
    
            return window.obj;
        }
    
        function drawGraph ()
        {
            // Update the HTML counter - this is totally optional
            document.getElementById("num_updates").innerHTML =
                parseInt(document.getElementById("num_updates").innerHTML) + 1;
    
            RGraph.clear(document.getElementById("cvs"));
            
            var graph = getGraph('cvs', d1);
            graph.draw();
    
            // Add some data to the data arrays
            var r1 = RGraph.random(
                RGraph.isNull(d1[d1.length - 1]) ? 26 : d1[d1.length - 1] - 2,
                RGraph.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 = RGraph.arrayShift(d1);
            }
    
            if (RGraph.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>