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!
.
