A dynamically updating Line chart

This chart updates itself 20 times per second. New values are appended to the data that's displayed and old values are removed. Careful use is made of local variables - so that the updates are done smoothly.

Setting the yaxisScaleMax property to 250 means the scale stays the same - but you can also have a dynamic scale that changes to accommodate the values on the chart.

Bandwidth used (Mb/s)
[No canvas support]
Last 60 seconds

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>
Put this where you want the chart to show up:
<div style="text-align:center; font-weight: bold; font-size: 14pt; width: 600px">
    Bandwidth used  (Mb/s)<br />
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas><br />
    <span style="font-size: 12pt; font-weight: normal">
        Last 60 seconds
    </span>
</div>

<button id="toggleButton">Toggle yaxisScaleMax to 250</button>
This is the code that generates the chart:
<script>
    RG        = RGraph,
    ma        = Math,
    canvas    = document.getElementById("cvs"),
    obj       = null,
    data      = [],
    l        = 0, // The letter 'L' - NOT a one
    numvalues = 1200,
    updates   = 0;

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

    function drawGraph ()
    {
        RG.Clear(canvas);
        

        if (!obj) {
            obj = new RG.Line({
                    id: 'cvs',
                data: [],
                options: {
                    colors: ['black'],
                    linewidth: 0.75,
                    yaxisPosition: 'right',
                    shadow: false,
                    tickmarksStyle: null,
                    marginTop: 10,
                    marginBottom: 15,
                    marginRight: 40,
                    backgroundGridVlines: false,
                    yaxisTickmarksCount: 5,
                    xaxisTickmarksCount: 0,
                    yaxisLabelsCount: 5,
                    xaxis: false
                }
            })
        }

        // Add some data to the data arrays
        var len          = data.length,
            lastvalue    = RG.isNull(data[len - 1]) ? 26 : data[len - 1],
            random_value = RG.random(lastvalue  - 2,lastvalue  + 2);
       
       random_value = ma.max(random_value, 0);
       random_value = ma.min(random_value, 250);

        data.push(random_value);
        
        if (data.length > numvalues) {
            data = RG.arrayShift(data);
        }

        obj.original_data[0] = data;
        obj.draw();
        setTimeout(drawGraph, 16.666);

        updates++;
        if (updates % 100 === 0) {
            console.log(updates);
        }
    }

    drawGraph();





    /**
    * Add the toggle button's click function
    */
    document.getElementById("toggleButton").onclick = function (e)
    {
        if (obj.get('yaxisScaleMax')) {
            obj.set('yaxisScaleMax', null)
        } else {
            obj.set('yaxisScaleMax', 250)
        }
    }
</script>