# 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.

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:

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

This is the code that generates the chart:

    <script>
        window.onload = function ()
        {
            var obj       = null;
            var numvalues = 600;
            var value     = 25;

            // RGraph.array_pad(array, length[, value])
            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: {
                            xticks: 100,
                            backgroundGridAutofitNumvlines: 15,
                            title: 'Bandwidth used (Mb/s)',
                            titleXaxis: 'Bandwidth used',
                            titleXaxisPos: 0.5,
                            colors: ['black'],
                            linewidth: 0.5,
                            yaxispos: 'right',
                            ymax: 50,
                            noxaxis: true,
                            numyticks: 0,
                            filled: true,
                            filledRange: true,
                            filledRangeThreshold: 25,
                            filledRangeThresholdColors: ['red','#0c0'],
                            fillstyle: 'red',
                            colors: ['rgba(0,0,0,0)'],
                            tickmarks: null,
                            textAccessible: true,
                            scaleZerostart: true
                        }
                    }).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>