A dual-color scrolling Line

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

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.

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.line.js"></script>

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

<script>
    window.onload = function ()
    {
        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: {
                        xticks: 100,
                        backgroundGrid: false,
                        backgroundBarcolor1: 'white',
                        backgroundBarcolor2: 'white',
                        title: 'Bandwidth used',
                        titleXaxis: 'Time >>>',
                        titleXaxisPos: 0.5,
                        titleYaxis: 'Bandwidth (MB/s)',
                        titleYaxisPos: 0.5,
                        titleVpos: 0.5,
                        colors: ['black'],
                        linewidth: 0.75,
                        yaxispos: 'right',
                        ymax: 50,
                        xticks: 25,
                        filled: true,
                        gutterTop: 25,
                        gutterBottom: 25,
                        tickmarks: [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 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('fillstyle', 'rgba(255,0,0,0.5)');
                graph.draw();
            graph.context.restore();






            /**
            * Clip the canvas 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('fillstyle', '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);
            }

            if (RGraph.ISIE8) {
                alert('[MSIE] Sorry, Internet Explorer 8 is not fast enough to support animated charts');
            } else {
                obj.original_data[0] = d1;
                setTimeout(drawGraph, 50);
            }
        }
    
        drawGraph();
    };
</script>

« Back