This chart updates itself 20 times a second.New values are appended to the data that's displayed and old values are removed from the data. Careful use is made of local variables - so that the updates are done smoothly.
Setting the ymax to 250 means the scale stays the same - but you can also have a dynamic scale that changes to accommodate the values on the chart.
<script src="RGraph.common.core.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<div style="text-align:center; font-weight: bold; font-size: 14pt; width: 600px">
Bandwidth used (Mb/s)<br />
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas><br />
<span style="font-size: 12pt; font-weight: normal">
Last 60 seconds
</span>
</div>
<button id="toggleButton">Toggle ymax to 250</button>
This is the code that generates the chart:
<script>
window.onload = function ()
{
var RG = RGraph;
var ma = Math;
var canvas = document.getElementById("cvs");
var obj = null;
var data = [];
var l = 0; // The letter 'L' - NOT a one
var numvalues = 1200;
var updates = 0;
// Pre-pad the arrays with null values
for (var i=0; i<numvalues; ++i) {
data.push(null);
}
function drawGraph ()
{
RG.Clear(canvas);
if (!obj) {
obj = new RG.Line({
id: 'cvs',
data: [],
options: {
colors: ['black'],
linewidth: 0.75,
yaxispos: 'right',
shadow: false,
tickmarks: null,
gutterTop: 10,
gutterBottom: 15,
gutterRight: 40,
backgroundGridVlines: false,
numyticks: 5,
numxticks: 0,
ylabelsCount: 5,
textAccessible: true,
scaleZerostart: true,
noxaxis: true
}
})
}
// Add some data to the data arrays
var len = data.length;
var lastvalue = RG.isNull(data[len - 1]) ? 26 : data[len - 1];
var random_value = RG.random(lastvalue - 2,lastvalue + 2);
random_value = ma.max(random_value, 0);
random_value = ma.min(random_value, 250);
data.push(random_value);
if (data.length > numvalues) {
data = RG.arrayShift(data);
}
if (RG.ISIE8) {
alert('[MSIE] Sorry, Internet Explorer 8 is not fast enough to support dynamic charts');
} else {
obj.original_data[0] = data;
obj.draw();
setTimeout(drawGraph, 16.666);
}
updates++;
if (updates % 100 === 0) {
console.log(updates);
}
}
drawGraph();
/**
* Add the toggle buttons onclick function
*/
document.getElementById("toggleButton").onclick = function (e)
{
if (obj.get('ymax')) {
obj.set('ymax', null)
} else {
obj.set('ymax', 250)
}
}
};
</script>