Updating your charts dynamically

[No canvas support]
Number of updates: 0

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

This particular example shows a stacked line chart with two data series, though if you're showing load/stress values, a non-filled chart might be a better choice.

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 (e)
    {
        d1  = [];
        d2  = [];
        l   = 0; // The letter ell - NOT a one
    
        // Pre-pad the arrays with 250 null values
        for (var i=0; i<250; ++i) {
            d1.push(null);
            d2.push(null);
        }

        function getGraph(id, d1, d2)
        {
            // After creating the chart, store it on the global window object
            if (!window.__rgraph_line__) {
                window.__rgraph_line__ = new RGraph.Line(id, d1, d2);
                window.__rgraph_line__.Set('chart.xticks', 100);
                window.__rgraph_line__.Set('chart.background.barcolor1', 'white');
                window.__rgraph_line__.Set('chart.background.barcolor2', 'white');
                window.__rgraph_line__.Set('chart.title.xaxis', 'Time >>>');
                window.__rgraph_line__.Set('chart.title.yaxis', 'Bandwidth (MB/s)');
                window.__rgraph_line__.Set('chart.title.vpos', 0.5);
                window.__rgraph_line__.Set('chart.title', 'Bandwidth used by servers 1 and 2');
                window.__rgraph_line__.Set('chart.title.yaxis.pos', 0.5);
                window.__rgraph_line__.Set('chart.title.xaxis.pos', 0.5);
                window.__rgraph_line__.Set('chart.filled', true);
                window.__rgraph_line__.Set('chart.fillstyle', ['#daf1fa', '#faa']);
                window.__rgraph_line__.Set('chart.colors', ['rgb(169, 222, 244)', 'red']);
                window.__rgraph_line__.Set('chart.linewidth', 1);
                //obj.Set('chart.ylabels.inside', true);
                window.__rgraph_line__.Set('chart.yaxispos', 'right');
                window.__rgraph_line__.Set('chart.ymax', 20);
                window.__rgraph_line__.Set('chart.xticks', 25);
            }

            return window.__rgraph_line__;
        }
    
        function drawGraph ()
        {
            document.getElementById("num_updates").innerHTML = parseInt(document.getElementById("num_updates").innerHTML) + 1;

            RGraph.Clear(document.getElementById("cvs"));
            
            var graph = getGraph('cvs', d1, d2);
            graph.Draw();

            // Add some data to the data arrays
            var r1 = RGraph.random(8, 9);
            var r2 = RGraph.random(8, 9);

            d1.push(r1);
            d2.push(r2);
            
            if (d1.length > 250) {
                d1 = RGraph.array_shift(d1);
                d2 = RGraph.array_shift(d2);
            }

            if (document.all && RGraph.isIE8()) {
                alert('[MSIE] Sorry, Internet Explorer 8 is not fast enough to support animated charts');
            } else {
                window.__rgraph_line__.original_data[0] = d1;
                window.__rgraph_line__.original_data[1] = d2;
                setTimeout(drawGraph, 200);
            }
        }
    
        drawGraph();
    }
</script>