.net Powerful JavaScript charts
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »


Get the latest version of RGraph (version 6.18, 1st June 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to hosted libraries.

More »


RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

A Pie chart using AJAX and JSON

[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 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 and json.labels variables).

This demo page is intended to show the ajax and 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>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):
    // Use the AJAX function RGraph.AJAX.getJSON to fetch some JSON from the server.
    // When you make an AJAX request to the server the reponse is a string - so RGraph
    // will convert the response to JSON for you automatically. The function is given
    // the URL of the AJAX script and a callback function that creates the chart. Here
    // the data ( and the labels (json.labels) are used in the configuration.
    RGraph.AJAX.getJSON('/getdata.html?json', function (json)
        var pie = new RGraph.Pie({
            id: 'cvs',
            options: {
                tooltips: 'Score for <b>%{property:myNames[%{index}]}</b> was  %{value_formatted}',
                tooltipsFormattedUnitsPost: '%',
                tooltipsCss: {
                    fontSize: '18pt'
                myNames: json.labels,
                shadow: false,
                key: json.labels,
                keyPositionGraphBoxed: false,
                colors: ['red','gray','#afa','blue','pink','yellow','black','orange','cyan','purple'],                    
                centerx: 175,
                responsive: [