I've made a deck.js slideshow and one of the slides has a chart.js piechart in it.
I'm trying to get the piechart to animate eachtime its slide is transitioned too. It currently only animates the first time it is transitioned to after a browser refresh.
I've tried adding the deck.events.js extension and using chart.update(), but it says the chart is not defined. Without the deck.becameCurrent snippet, the chart shows, and with the snippet the console.log works.
How do i get the deck.event to recognise the chart instance?
Is chart.update() the correct method to trigger the initial animations here?
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
<script src='{% static "vendor/deckjs/core/deck.core.js" %}'></script>
<script src='{% static "vendor/deckjs/extensions/events/deck.events.js" %}'>
<div class="deck-container">
<section class="slide" id="pie">
<script>
var ctx1 = $("#NestedChart").get(0).getContext("2d");
var myChart1 = new Chart(ctx1, {
type: 'doughnut',
data: {
labels: [1,2,3,4,5],
datasets: [{
data: [10,89,4,34,33],
},
options: {
animation: {
duration:2000
},
});
})
</script>
<div style="position: relative; height: 500px; width:500px" class='col-sm-6'>
<canvas style="position:absolute; top: 0px; left: 0px" id="NestedChart" width="400" height="400"></canvas>
</div>
</section>
</div>
<script>
$(function() {
$.deck('.slide', {countNested: false});
$("#pie").bind('deck.becameCurrent', function(ev, direction) {
console.log("test chart update");
myChart1.update();
});
});
</script>
</body>
I got this to work by moving the code that defines the chart to be within the
becameCurrentevent function:This then re-renders the chart on each transition. An if loop allows it to only animate on a forward transition. Putting the myChart1 variable declaration anywhere else initialises the chart the first time, but
myChart1.render()ormyChart1.reset().update()within the becameCurrent() function still don't seem to do anything.