Chart show when I inspect element

[EzSanji]

Hello,

i’m curently working on a project for my first stage and i’m kinda stuck.
I’m using a carousel with boostrap that show few graph, the first graph on the first slide is showing well but the second and the third doesn’t show. When I inspect element it appear by magic, it is something with the resize event maybe?

the code for the carousel :

<div class="carousel-inner">
	<div class="carousel-item active">
	<img src="img/bgWhite.jpg" alt="..." />
	<div class="carousel-caption d-none d-md-block">
		<div id="firstCanvas" style="height: 700px; width: 100%;"> </div>
	</div>
	</div>
	<div class="carousel-item">
	<img src="img/bgWhite.jpg" alt="..." />
	<div class="carousel-caption d-none d-md-block">
		<div id="secondCanvas" style="height: 700px; width: 100%;"> </div>
	</div>
	</div>
	<div class="carousel-item">
	<img src="img/bgWhite.jpg" alt="..." />
	<div class="carousel-caption d-none d-md-block">
		<div id="thirdCanvas" style="height: 700px; width: 100%;"> </div>
	</div>
</div>

javascript code for the showing canvas : (their is an incrementer named i that render canvas when it slide on it), also i’m using twig for displayind data and it’s working fine.

var chart = new CanvasJS.Chart("firstCanvas", {
title:{
text: "Nombre d’operation par cle de reference",
fontSize: 30
},
axisX: {
labelAngle: -90,
labelFontSize: 10,
labelAutoFit: true, //false by default.
interval:1
},
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [
{% for stat in statOpeClef %}
{ label: "{{ stat[‘metric’] }}" , y: {{ stat[‘time’] }} },
{% endfor %}
]
}
]
});
if (i == 1)
chart.render();

var chart2 = new CanvasJS.Chart("secondCanvas", {
title:{
text: "Tonnage total par machine",
fontSize: 30
},
axisX: {
labelAngle: -90,
labelFontSize: 10,
labelAutoFit: true, //false by default.
interval:1
},
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [
{% for stat in statOpeMachine %}
{ label: "{{ stat[‘metric’] }}" , y: {{ stat[‘time’] }} },
{% endfor %}
]
}
]
});
if (i == 2)
chart2.render();

I hope someone can help me out before my stage end!

[Indranil]

@ezsanji,

Please take a look at this JSFiddle for an example on rendering CanvasJS Charts within Bootstrap Carousel.

___________
Indranil Deo
Team CanvasJS