Another dynamically updating Line chart
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="600" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
/**
* Define the variables that we're going to use
*/
// Refresh rate (in milliseconds - 1000 per second)
//
// *** This is not actually used on this page because ***
// *** setTimeout() is not used - requestAnimationFrame() ***
// *** is used instead which handles the timing for you ***
var delay = 40;
// The number of points shown on the chart
var points = 1200;
// Make a data array of null values
for (var i=0,data=[]; i<points; ++i) {
data[i] = null;
}
// A shortcut reference to the global RGraph object
var RG = RGraph;
// A shortcut reference to the global Math object
var ma = Math;
// Maximum Y value on the chart
var max = 100;
// Minimum Y value on the chart
var min = 0;
// Halfway between the minimum and maximum
var num = (( (max - min) / 2) + min);
// Generate the labels that are spread across the X axis.
var labels = ['20s', '18s','16s','14s','12s','10s','8s','6s','4s','2s','0s'];
// The increment/decrement of each iteration
var delta = 2;
/**
* Draw the chart. On subsequent draws this chart is updated with new data and
* redrawn. This is faster than creating a whole new object and drawing that.
*/
var obj = new RGraph.Line({
id: 'cvs',
data: data,
options: {
marginLeft: 35,
yaxisScaleMax: max,
tickmarksStyle: null,
linewidth: 1,
shadow: null,
backgroundGridVlines: false,
backgroundGridBorder: false,
backgroundGridColor: '#eee',
color: 'black',
xaxisTickmarksCount: 5,
axesColor: '#666',
textColor: '#666',
textSize: 14,
colors: ['red'],
xaxisLabels: labels,
xaxis: false
}
}).draw();
/**
* This is the main draw() function that is called multiple times per
* second to update the chart with new data. It:
*
* 1. Clears the canvas so that it's ready to be drawn on again
* 2. Removes a piece of data from the rear of the Line chart internal data
* variable
* 3. Adds a new piece of data to the end of the same array
* 4. Draws the chart again
*/
function draw()
{
// Clear (NOT reset) the canvas
RG.clear(obj.canvas);
// Generate a random number between -5 and 5 and add it to the num
// variable. Adding a small change instead of generating a whole new
// number results in a gentler change.
num += RG.random(-1 * delta, delta);
// Limit the num variable to the minimum - maximum
num = ma.max(min, num);
num = ma.min(max, num);
// Remove a number from the front of the data array
obj.original_data[0].shift();
// Add the new number on to the end of the data array
obj.original_data[0].push(num);
// Draw the chart
obj.draw();
// Call this function again after the delay (using requestAnimationFrame()
// NOT setTimeout() ). This function is a compatibility wrapper around
// requestAnimationFrame().
RG.Effects.updateCanvas(draw);
}
draw();
</script>