My chart is only visible if I click on the page first
Posted by Alberto Giribal at 14:34 on Friday 2nd July 2021[link]
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
Posted by Richard at 17:43 on Friday 2nd July 2021[link]
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