A dynamically updating Line chart

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

Setting the ymax 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)

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 ymax to 250</button>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var 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,
                        yaxispos: 'right',
                        shadow: false,
                        tickmarks: null,
                        gutterTop: 10,
                        gutterBottom: 15,
                        gutterRight: 40,
                        backgroundGridVlines: false,
                        numyticks: 5,
                        numxticks: 0,
                        ylabelsCount: 5,
                        scaleZerostart: true,
                        noxaxis:true
                    }
                })
            }

            // 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 buttons onclick function
        */
        document.getElementById("toggleButton").onclick = function (e)
        {
            if (obj.get('ymax')) {
                obj.set('ymax', null)
            } else {
                obj.set('ymax', 250)
            }
        }
    };
</script>