# A dynamic SVG Bar chart

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>