This is an example of a dynamic Bar chart where the values auto-update to new ones. The values are, in this case, random but they could just as easily be taken from a database or connected device (eg a monitor of some sort). Also, if you have just a single data-point then you could, using the Bar chart, have an auto-updating progress bar. If you were to employ this technique but with the Horizontal Bar chart then you could have a dynamic Horizontal Progress bar. It wouldn't make as much sense (IMO) , but you could also use other charts too, for example the Line or Waterfall charts.
This goes in the documents header:<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.bar.js"></script>Put this where you want the chart to show up:
<div style="width: 550px; height: 300px" id="chart-container"></div>This is the code that generates the chart:
<script> data = [3,5,4,9,5,6,3,5,2,5,4,2]; delay = 200; bar = new RGraph.SVG.Bar({ id: 'cc', data: data, options: { labelsAbove: true, labelsAboveDecimals: 1, labelsAboveUnitsPost: 'kg', labelsAboveSize: 10, title: 'A dynamic Bar chart', titleFont: 'Impact', titleSize: 18, backgroundGridVlines:false, backgroundGridBorder: false, xaxis: false, yaxis: false, xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] } }).draw(); function update() { for (var i=0; i<12; ++i) { // This condition means that a value is only changed 10% of the time. ish. if (Math.random() > .9) { var random = Math.random(); bar.data[i] = bar.data[i] + (random > 0.5 ? .1 : -.1); bar.data[i] = Math.max(bar.data[i], 0); bar.data[i] = Math.min(bar.data[i], 10); } } RGraph.SVG.redraw(); setTimeout(update, delay); } setTimeout(update, delay); </script>