This chart updates itself 20 times per second. New values are appended to the data that's displayed and old values are removed. Careful use is made of local variables - so that the updates are done smoothly.
Setting the yaxisScaleMax property 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 yaxisScaleMax to 250</button>
This is the code that generates the chart: