This chart is very similar to the regular scrolling line chart but is a filled range chart with a threshold set.
Update: It know also has been updated (1st 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.
<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> 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>