I am exploring ways to enhance the animations in Chart.js for a new web project. The content is organized in tabs, with the chart displayed on the third tab out of four.
Currently, the chart animates upon loading. How can I make it so that when #chartTrigger (Tab Three) is clicked, a new chart is generated?
Furthermore, is there a way to limit the number of animations? For instance, if a user switches to Tab Four and then returns to Tab Three, can we prevent the animation from replaying?
You can preview what I have implemented here: https://codepen.io/drewalth/pen/wppNbJ
<style>
body {
font-family:sans-serif;
}
div.tab button {
border: none;
outline: none;
cursor: pointer;
padding: 0.6em 1em;
flex-basis: 12%;
color: #34495E;
letter-spacing: 1px;
text-transform: capitalize;
font-size: 0.9em;
background-color: #BDC3C7;
}
div.tab button.active {
background-color: #34495E;
color:#fff;
}
.tabcontent {
display: none;
height:300px;
width:50%;
color:#fff;
padding:35px;
}
#tabOne {
background-color:#E74C3C;
}
#tabTwo {
background-color:#3498DB;
}
#tabThree {
text-align:center;
}
#tabFour {
background-color:#2ECC71;
}
</style>
<div class="tab">
<button id="defaultOpen" class="tablinks"
onclick="openTab(event, 'tabOne')">Tab One</button>
<button class="tablinks" onclick="openTab(event,
'tabTwo')">Tab Two</button>
<button id="chartTrigger" class="tablinks"
onclick="openTab(event, 'tabThree')">Tab Three</button>
<button class="tablinks" onclick="openTab(event,
'tabFour')">Tab Four</button>
</div>
<div id="tabOne" class="tabcontent">
Click Tab Three for Chart
</div>
<div id="tabTwo" class="tabcontent">
</div>
<div id="tabThree" class="tabcontent">
<canvas id="test-chart" height="500"></canvas>
</div>
<div id="tabFour" class="tabcontent">
</div>
<script>
// function to switch between tabs
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
// Working Chart.js
var ctx = document.getElementById("test-chart").getContext('2d');
var newTestChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["10/21", "10/22", "10/23", "10/24", "10/25", "10/26",
"10/27", "10/28", "10/29", "10/30", "10/31", "11/01", "11/02", "11/03",
"11/04"],
datasets: [{
data: [150, 550, 500, 880, 200, 100, 102, 102, 99, 105, 100,
103, 100, 102, 100],
backgroundColor: ['rgba(77, 112, 144, 0.4)', ],
borderColor: ['rgba(77, 112, 144,1)', ],
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
defaultFontFamily: "'Titillium Web'",
defaultFontSize: 16,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
}
});
// Desired functionality...
var $chartTrigger = document.getElementById("chartTrigger");
$chartTrigger.onclick(newChart);
</script>