About
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 show charts on your website.

More »

 

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

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

Creating charts asynchronously

Asynchronous processing can speed up the display of your charts, because the browser gets to your code, sets it going and then continues on rendering the page. Particularly if you have a weighty page, it can make quite a difference. The RGraph.async function itself is very simple, but because it can make a significant difference to the speed of your page, it's documented here. There's an example of it below. One thing to remember is to ensure your canvas tag is defined first before you call the function that creates the chart.

Although asynchronous processing can speed up your pages, it can also give the appearance of slower pages due to partial rendering, (ie your pages render a bit at a time). You therefore will need to experiment to get the best result for you.


<!-- Include the library files -->
<script src="RGraph.common.js"></script>
<script src="RGraph.line.js"></script>

<!-- Define the canvas tag -->
<canvas id="cvs" width="300" height="100">[No canvas support]</canvas>

<!-- Create the chart -->
<script>
    function createLineChart ()
    {
        var line = new RGraph.Line({
            id: 'cvs',
            data: [1,2,4,2,1,3,5,6,6,5,3,5],
            options: {
                title: 'Sales for Acme Inc.',
                titleSize: 16,
                titleBold: true,
                xaxisLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                marginInner: 10,
                linewidth: 5,
                shadowOffsetx: 0,
                shadowOffsety: 0,
                shadowBlur: 15,
                textSize: 14,
                xaxis: false,
                yaxis: false,
                backgroundGridVlines: false,
                backgroundGridBorder: false
            }
        }).draw();
    }

    RGraph.async(createLineChart);
</script>

Things to remember

See also

You might also be interested in the alternative, DOMContentLoaded event.