A dynamically updating filled range chart with a threshold

This chart is very similar to the regular scrolling Line chart but is a filled range chart with a threshold set.

Update: It now has also been updated (September 2018) so that there's a gradient cover to the canvas - meaning that the canvas fades on the left hand side to white, Which, rather conveniently, is the same as the background color.

[No canvas support]

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:
<style>
    #cvs-container {
        display:inline-block;
        position: relative;
    }

    #cvs-gradient-cover {
        position: absolute;
        width: 100%;
        height: 100%;
        display: inline-block;
        background-image: linear-gradient(90deg, white,rgba(255,0,0,0) 450px);
        top: 0; left: 0;
    }
</style>

<div id="cvs-container">
    <canvas id="cvs" width="1000" height="250">[No canvas support]</canvas>
    <div id="cvs-gradient-cover"></div>
</div>
This is the code that generates the chart:
<script>
    var obj       = null;
    var numvalues = 600;
    var value     = 25;

    var data1 = RGraph.arrayPad([], numvalues, null);
    var data2 = RGraph.arrayPad([], numvalues, null);

    function drawGraph ()
    {
        // "cache" this in a local variable
        var RG = RGraph;
        var ma = Math;
        var canvas = document.getElementById("cvs");
        RG.clear(canvas);
        

        if (!obj) {
            obj = new RGraph.Line({
                id: 'cvs',
                data: [data1, data2],
                options: {
                    backgroundGridVlinesCount: 15,
                    title: 'Bandwidth used (Mb/s)',
                    titleBold: true,
                    titleFont: 'Verdana',
                    xaxisTitle: 'Bandwidth used',
                    xaxisTitleBold: true,
                    colors: ['black'],
                    linewidth: 0.5,
                    yaxisPosition: 'right',
                    yaxisScaleMax: 50,
                    yaxis: false,
                    xaxis: false,
                    yaxisTickmarksCount: 0,
                    filled: true,
                    filledRange: true,
                    filledRangeThreshold: 25,
                    filledRangeThresholdColors: ['red','#0c0'],
                    filledColors: 'red',
                    colors: ['rgba(0,0,0,0)'],
                    tickmarksStyle: null
                }
            }).draw();
        }

        
        value = value + RG.random(-3,3);
        value = ma.max(0,value);
        value = ma.min(50,value);
        
        obj.original_data[0].push(Math.min(value + 5, 50));
        obj.original_data[1].push(Math.max(value - 5, 0));
        
        obj.original_data[0] = RG.arrayShift(obj.original_data[0]);
        obj.original_data[1] = RG.arrayShift(obj.original_data[1]);
        
        obj.draw();

        RGraph.Effects.updateCanvas(drawGraph);
    }

    drawGraph();
</script>