My chart is only visible if I click on the page first

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