A basic SVG Bar chart using the AJAX getJSON() function

Like the basic CSV example the getJSON() function is an AJAX function that you can use to fetch data from your server. Unlike CSV data, JSON data can be easier to read and make use of. This example reloads the JSON data every second.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.ajax.js"></script>
<script src="RGraph.svg.bar.js"></script>
Put this where you want the chart to show up:
<div style="width: 750px; height: 300px" id="chart-container"></div>
This is the code that generates the chart:
<script>
    // This is the function that runs every second to fetch new data
    function update ()
    {
        RGraph.SVG.AJAX.getJSON('/getdata.html?json', function (json)
        {
            var data   = json.data;
            var labels = json.labels;

            if (window.bar) {
                RGraph.SVG.clear(bar.svg);
            }

            window.bar = new RGraph.SVG.Bar({
                id: 'chart-container',
                data: data,
                options: {
                    xaxisLabels: labels
                }
            }).draw();
        });

        setTimeout(function ()
        {
            update()
        }, 1000);
    }

    // Initiate the first AJAX request
    update();
</script>