The example on the right shows a Line chart that automatically updates itself every 200 milliseconds. An ideal use for this could be showing a networks bandwidth usage, or a servers load value.
This particular example shows a stacked line chart with two data series, though if you're showing load/stress values, a non-filled chart might be a better choice.
To get up-to-date data from your server you could simply have the page refresh itself, storing the data on the server, or use AJAX if you want the data stored client-side.
Notes:<canvas id="cvs" width="600" height="250">[No canvas support]</canvas> <script> window.onload = function (e) { d1 = []; d2 = []; l = 0; // The letter ell - NOT a one // Pre-pad the arrays with 250 null values for (var i=0; i<250; ++i) { d1.push(null); d2.push(null); } function getGraph(id, d1, d2) { // After creating the chart, store it on the global window object if (!window.__rgraph_line__) { window.__rgraph_line__ = new RGraph.Line(id, d1, d2); window.__rgraph_line__.Set('chart.xticks', 100); window.__rgraph_line__.Set('chart.background.barcolor1', 'white'); window.__rgraph_line__.Set('chart.background.barcolor2', 'white'); window.__rgraph_line__.Set('chart.title.xaxis', 'Time >>>'); window.__rgraph_line__.Set('chart.title.yaxis', 'Bandwidth (MB/s)'); window.__rgraph_line__.Set('chart.title.vpos', 0.5); window.__rgraph_line__.Set('chart.title', 'Bandwidth used by servers 1 and 2'); window.__rgraph_line__.Set('chart.title.yaxis.pos', 0.5); window.__rgraph_line__.Set('chart.title.xaxis.pos', 0.5); window.__rgraph_line__.Set('chart.filled', true); window.__rgraph_line__.Set('chart.fillstyle', ['#daf1fa', '#faa']); window.__rgraph_line__.Set('chart.colors', ['rgb(169, 222, 244)', 'red']); window.__rgraph_line__.Set('chart.linewidth', 1); //obj.Set('chart.ylabels.inside', true); window.__rgraph_line__.Set('chart.yaxispos', 'right'); window.__rgraph_line__.Set('chart.ymax', 20); window.__rgraph_line__.Set('chart.xticks', 25); } return window.__rgraph_line__; } function drawGraph () { document.getElementById("num_updates").innerHTML = parseInt(document.getElementById("num_updates").innerHTML) + 1; RGraph.Clear(document.getElementById("cvs")); var graph = getGraph('cvs', d1, d2); graph.Draw(); // Add some data to the data arrays var r1 = RGraph.random(8, 9); var r2 = RGraph.random(8, 9); d1.push(r1); d2.push(r2); if (d1.length > 250) { d1 = RGraph.array_shift(d1); d2 = RGraph.array_shift(d2); } if (document.all && RGraph.isIE8()) { alert('[MSIE] Sorry, Internet Explorer 8 is not fast enough to support animated charts'); } else { window.__rgraph_line__.original_data[0] = d1; window.__rgraph_line__.original_data[1] = d2; setTimeout(drawGraph, 200); } } drawGraph(); } </script>