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 »

 

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 »

 

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 »

Hello,
I Have 3 graphs in 3 different canvas in the same page. The last one only turns to visible if I click over it, otherwise it remains hidden.
I didn't use any kind of hidden and show events, and I don't understand why this behavior. I tried to disable the others 2 graphs (commenting the draw line), and it's the same result.
Thank you all

It sounds like you have the <canvas> tag positioned below the code that creates the chart - is this the case?

If you're not using the window.onload or DOMContentLoaded events then the positioning of the <canvas> tags and the code that creates the charts matters - the tags should be above the code.

Like this:

<!-- The canvas tag is first -->
<canvas id="cvs"></canvas>

<!-- Then the code to create the chart -->
<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,3,8,4,2,5,6],
        options: {
        }
    }).draw();
</script>

If you don't want to change things around then try using the window.onload or DOMContentLoaded events:

window.onload = function ()
{
    // Create the chart here
};

OR:

document.addEventListener('DOMContentLoaded', function (e)
{
    // Create the chart here
}, false);


Optionally, you can add a redraw after a small timeout (feel free to adjust the duration):

setTimeout(function ()
{
    RGraph.redraw();
}, 250); // 250 = Quarter of a second