This is a basic example of dynamic updates using AJAX to request the data from the server. There are more examples here:
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> // Prefill the data array for (i=0,data=[];i<60; ++i) data[i] = null; /** * Ths window.onload function initiates the AJAX request. The AJAX page is: http://www.rgraph.net/getdata.html * If you view this in your browser you'll see that all it does is output a sequence of numbers. */ window.onload = function () { var line = new RGraph.Line({ id: 'cvs', data: data, options: { labels: ['60s','55s','50s','45s','40s','35s','30s','25s','20s','15s','10s','5s','0s'], numxticks: 12, backgroundGridAutofitNumvlines: 12, ymax: 100, gutterLeft: 35, textAccessible: true } }).draw(); /** * This is the AJAX callback function. It adds the number retrieved via * AJAX to the data array */ function draw () { // Set the data on the object line.original_data[0].push(RGraph.random(0, 100)); line.original_data[0].shift(); // Clear the canvas RGraph.clear(line.canvas); line.draw(); setTimeout(draw, 1000); } setTimeout(draw, 1000); }; </script>