Share RGraph on Facebook Share RGraph on Twitter

A Pie chart that retrieves JSON data via AJAX

Note: For browser security reasons the AJAX demos don't work offline. You can view the demos on the RGraph website here: https://www.rgraph.net/demos/index.html
[No canvas support]

As well as the RGraph.AJAX.getNumber(), RGraph.AJAX.getString() and RGraph.AJAX.getCSV() canvas AJAX functions there's also a convenient way to fetch JSON content from your server by way of the RGraph.AJAX.getJSON() function.

Since the responses to AJAX calls start off as strings this function handily converts the response into a JavaScript object automatically for you.

As you can see from the example below this means that you can use the response directly in any chart configuration (ie the json.data and json.labels variables).

This demo page is intended to show the AJAX+JSON functionality that RGraph has so the rest of the Pie chart configuration is pretty straight forward.

The Pie chart does have a key though - which together with the tooltips use the labels which are part of the JSON response.


This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.pie.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="450" height="350">
    [No canvas support]
</canvas>
This is the code that generates the chart: