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.
<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>