Chart.js chart won't animate inside of bootstrap carousel
Question
First off, I really appreciate the help. I am trying to make a slideshow of charts using a bootstrap carousel as the mechanism for the slideshow. And I would like the charts to show animation on each slide. Currently, The chart.js charts all display, but only the first slide displays the charts' animation (I think this is because it is the first chart seen on page load). The rest of the slides show the charts, but the charts do not animate.
TL;DR I would like the charts to show their animation each time their slide is viewed in the carousel (currently, only the first slide shows the chart animation).
Here is the HTML code
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel page location indicator -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
</ol>
<!-- carousel -->
<div class="carousel-inner" role="listbox">
<!-- Slide 1 -->
<div class="item active">
<div class="container">
<h1>Chart 1</h1>
<h4>Chart 2</h4>
<div class="row">
<div class="col-xs-4">
<canvas class="chart" id="chart1Ratings" width="200" height="200"></canvas>
</div>
<div class="col-xs-4">
<canvas class="chart" id="chart1Overall" width="200" height="200"></canvas>
</div>
<div class="col-xs-4">
<img style="margin-top: 110px; border-radius: 50%; object-fit: contain;" width="250" height="250" src="http://prod.static.bears.clubs.nfl.com/nfl-assets/img/schedule-list/logos/helmet-right-weather-mascot-248x220/day/sunny/bears.png" alt="First slide">
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="item">
<div class="container">
<h1>Chart 2</h1>
<h4>Chart 2</h4>
<div class="row">
<div class="col-xs-4">
<canvas class="chart" id="chart2Ratings" width="200" height="200"></canvas>
</div>
<div class="col-xs-4">
<canvas class="chart" id="chart2Overall" width="200" height="200"></canvas>
</div>
<div class="col-xs-4">
<img style="margin-top: 120px; border-radius: 50%; object-fit: contain;" width="250" height="250" src="player_pics/slide2Pic.png" alt="Second slide">
</div>
</div>
</div>
</div>
<!-- Arrows -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
CSS:
.glyphicon {
font-size: 500px;
}
body {
/*background: #b71220!important;*/
background-image: url("https://epicattorneymarketing.com/wp-content/uploads/2015/10/football-field-stripes-1.jpg");
background-size: cover;
}
ul {
list-style: none;
text-align: center;
}
ul > li > h1 {
color: white;
}
body > div > div > div:nth-child(1) > ul > li:nth-child(1) > h1 {
font-size: 40px;
}
canvas.chart {
width: 100%!important;
height: 50%!important;
margin-top: 80px;
}
.container{
background-color: rgba(235, 234, 238, 0.9);
margin-top: 80px;
padding-bottom: 20px;
margin-bottom: 80px;
}
.carousel-control{
margin-bottom: 400px;
background-image: none !important;
color: black !important;
}
.carousel-indicators{
margin-bottom: 37px;
}
h1, h4{
text-align: center;
/*margin-top: 80px;*/
}
JavaScript (I have a different script like this for each slide to create a different chart for each slide) here is an example:
//Chart 1: Ratings
var ctx = document.getElementById('chart2Ratings').getContext('2d');
Chart.defaults.global.animation.duration = 7000;
Chart.defaults.global.defaultFontColor = 'black';
Chart.defaults.global.defaultFontStyle = 'bold';
var Chart1 = new Chart(ctx, {
// The type of chart we want to create
type: 'horizontalBar',
// The data for our dataset
data: {
labels: ["Speed", "Agility", "Strength", "Effort", "Passing", "Football IQ"],
datasets: [{
label: "Rating",
backgroundColor: 'rgb(5, 254, 229)',
borderColor: 'rgb(5, 254, 229)',
data: [99, 99, 80, 80, 99, 99],
}]
},
// Configuration options go here
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
// Chart 2: overall
var cty = document.getElementById('chart2Overall').getContext('2d');
Chart.defaults.global.animation.duration = 5000;
// Chart.defaults.global.title.display = true;
// Chart.defaults.global.title.text = 'Overall Rating: 99';
// Chart.defaults.global.title.fontSize = 30;
var Chart2 = new Chart(cty, {
type: 'doughnut',
data: {
// labels: ['Overall Rating', ''],
datasets: [{
backgroundColor: ['rgb(2, 249, 90)', 'rgb(206, 3, 86'],
borderColor: 'rgb(2, 249, 90)',
data: [99, 1]
}]
},
options: {
scales: {
ticks: {
beginAtZero: true
}
},
tooltips: {
enabled: false
},
title: {
display: true,
text: "Overall Rating: 99",
fontSize: 30
}
}
});
$('#myCarousel').carousel({
interval: 10000
});
$('#myCarousel').on('slid.bs.carousel', function () {
Chart1.render();
Chart2.render();
})
TL;DR
$('#myCarousel').on('slid.bs.carousel', function () {
Chart1.render();
Chart2.render();
})
^ This was my technique to trigger the charts to re-animate every time an arrow was clicked in the carousel. However, it's not working. I have also tried updating the data in the charts with no luck. I have also tried destroying and creating brand new charts in the above function, this works initially, but for some reason the chart font size gets all distorted and the charts look absolutely terrible (but they do animate).
Another technique could be to refresh the page each time I go to a new slide, but then this takes me back to slide one. And I have no way of knowing if all of the charts animate on the each slide re-animate on refresh because I can't see them.
Again, I really appreciate all the help!
Long story short, how to put chartjs charts in a bootstrap carousel, where the charts show their animation on each slide.
1 answers
solution1
0 ACCPTED 2017-12-11 00:20:14
Okay so what I ended up doing is making the bootstrap arrows href links to HTML templates of the new slide. This way it would load a new page (it's loading the new slide) and then load the animation. This wasn't the most efficient but it was the best I could do.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.