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: