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).

[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 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.

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 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>