A Pie chart using AJAX and JSON
A Pie chart that retrieves JSON data via AJAX. JSON data is easy to use when successfully retrieved and fits in well with the RGraph configuration.
As well as the
RGraph.AJAX.getCSV() canvas AJAX functions there's also a convenient way to fetch
JSON content from your server by way of the
As you can see from the example below this means that you can use the response directly in any
chart configuration (ie the
This demo page is intended to show the AJAX+JSON functionality that RGraph has so the rest of the Pie chart configuration is pretty straightforward.
The Pie chart does have a key though - which together with the tooltips use the labels which are part of the JSON response.
Added in March 2020 was the new feature of tooltip templates and the use of the
tooltipsCss property - which makes it much easier to add custom styles to your tooltips.
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.key.js"></script> <script src="RGraph.pie.js"></script>Put this where you want the chart to show up:
<div style="float: right"> <canvas id="cvs" width="450" height="350">[No canvas support]</canvas> </div>This is the code that generates the chart - it should be placed AFTER the canvas tag(s):