A dual-color scrolling Line chart

This demo has been adapted from the updating line chart in the docs.

[No canvas support]

Update
There's information on this HOWTO page about creating dual color Line charts using gradients. It's very simple and can be done using either the RGraph Gradient() shortcut or more directly with the canvas linear gradient functionality.

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.line.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    d1  = [];
    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 obj = null;

    function getGraph(id, d1)
    {
        // After creating the chart, store it in a global variable
        if (!obj) {

            obj = new RGraph.Line({
                id: id,
                data: d1,
                options: {
                    //xaxisTickmarksCount: 100,
                    backgroundGrid: false,
                    backgroundBarsColor1: 'white',
                    backgroundBarsColor2: 'white',
                    title: 'Bandwidth used',
                    titleVpos: 0.5,
                    xaxisTitle: 'Time >>>',
                    xaxisTitlePos: 0.5,
                    yaxisTitle: 'Bandwidth (MB/s)',
                    yaxisTitlePos: 0.5,
                    yaxisPosition: 'right',
                    yaxisScaleMax: 50,
                    colors: ['black'],
                    linewidth: 0.75,
                    xaxisTickmarksCount: 25,
                    filled: true,
                    marginTop: 25,
                    marginBottom: 25,
                    tickmarksStyle: [null,null],
                    shadow: false,
                    colors: ['rgba(0,0,0,0.2)'],
                    textAccessible: false
                }
            })



            var grad = obj.context.createLinearGradient(0,0,0,250);
            grad.addColorStop(0, '#efefef');
            grad.addColorStop(0.9, 'rgba(0,0,0,0)');

            obj.set('fillstyle', [grad]);
        }

        return obj;
    }



    // This gets called repeatedly to update the chart
    function drawGraph()
    {
        // "cache" this in a local variable
        var RG = RGraph;


        RG.clear(document.getElementById("cvs"));
        
        var graph = getGraph('cvs', d1);
        graph.Draw();





        // The color boundary
        var boundary = (200 * ((graph.scale2.max - 20) / graph.scale2.max)) + 25;


        // Clip the canvas tag and draw the upper half
        graph.context.save();
            graph.context.beginPath();                
            graph.context.rect(0,0,600, boundary);
            graph.context.clip();
            
            // Set the color
            graph.Set('filledColors', 'rgba(255,0,0,0.5)');
            graph.draw();
        graph.context.restore();






        // Clip the canvas tag and draw the lower half
        graph.context.save();
            graph.context.beginPath();
            graph.context.rect(0,boundary,600,250 - boundary);
            graph.context.clip();
            
            // Set the color
            graph.Set('filledColors', 'rgba(0,255,0,0.5)');
            graph.draw();
        graph.context.restore();






        // Add some data to the data arrays
        var r1 = RGraph.random(
            RG.isNull(d1[d1.length - 1]) ? 26 : d1[d1.length - 1] - 2,
            RG.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 = RG.arrayShift(d1);
        }

        obj.original_data[0] = d1;
        setTimeout(drawGraph, 50);
    }

    drawGraph();
</script>