Note Because Chrome slows down timers when it's in the background - this chart can occassionally miss out X values when the browser is in the background or is minimised. So for that reason - if you're running this, or another timer based updating chart, then you're advised to use a browser other than Chrome (or if in Chrome keep it in the foregound).
<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="800" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
function format (value)
{
value = String(value);
if (value.length === 1) {
value = '0' + value;
}
return value;
}
var lastnumber = 50;
var chart = null;
var data = [];
var labels = [];
/**
* Make the array of empty values
*/
for (var i=0; i<600; i+=1) {
data[i] = [];
labels[i] = '';
}
// Make and draw the chart
var line = new RGraph.Line({
id: 'cvs',
data: [],
options: {
ymax: 100,
backgroundGridAutofitNumvlines: 10,
backgroundGridVlines: false,
backgroundGridBorder: false,
numxticks: 10,
tickmarks: null,
labels: labels,
noaxes: true,
textSize: 16,
gutterLeft: 50,
textColor: '#aaa',
scaleZerostart: true,
textAccessible: true
}
}).draw();
/**
* The draw() function gets called repeatedly every second
*/
function draw()
{
var d = new Date();
var seconds = d.getSeconds();
// Reset the canvas
RGraph.reset(document.getElementById('cvs'));
/**
* Add the label
*/
if (parseInt(seconds) === 0) {
labels.unshift(format(d.getHours() ) + ':' + format(d.getMinutes()));
labels.pop();
} else {
labels.unshift('');
labels.pop();
}
// Add a new value to the chart data
var random = RGraph.random(-5,5);
/**
* Create the random value
*/
lastnumber = lastnumber + random;
lastnumber = Math.max(0, lastnumber);
lastnumber = Math.min(100, lastnumber);
data[0] = lastnumber
data.unshift(null);
data.pop();
line.original_data[0] = data;
line.draw();
// Update the counter
document.getElementById('numvalues').innerHTML = d.getSeconds();
// Call this function again in one seconds time
//
// TODO Could change things so that the function runs 4 times a second (though only updates the chrt once persecond)
// Might be a little more accurate. It would be a significant change though
setTimeout(draw, 1000);
}
draw();
</script>