A basic SVG Bar chart using the AJAX getJSON function

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 id="klkl" style="display: none">
    Richard,8,4,7,6,5,3,4
    Dave,7,4,6,9,5,8,7
    Luis,4,3,5,2,6,5,4
    Kevin,4,2,8,9,6,7,3
    Joel,4,5,1,3,5,8,6
    Pete,4,5,6,3,5,8,6
</div>

<div style="width: 750px; height: 300px" id="chart-container"></div>
    [No canvas support]
</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>

« Back