2

I have a page full of charts that automatically generates all charts available (because the default page is "All Charts"). In it, there's a select department tag that will hide all charts other than those owned by the selected department. Here's my code:

$(window).load(function(){
            $('#department').change(function(){
                active_department($(this).val());
            });

            function active_department(department){
                for(var i = 0; i < dept['namedept'].length; i++){
                    if(department!='All'){
                        $('.'+dept['namedept'][i]).hide(500);
                    } else {
                        if(typeof rCharts[dept['namedept'][i]] != 'undefined'){
                            $('.'+dept['namedept'][i]).show(500);
                        } else {
                            $('.no-chart-'+dept['namedept'][i]).hide(500);
                        }
                    }
                }
                if(typeof rCharts[department] != 'undefined'){
                    $('.'+department).show(500);
                } else {
                    $('.no-chart-'+department).hide(500);
                }
            }
        });

I want ChartJS animation to re-appear every time I select a department. So far I've tried easing, onProgress, and jQuery animate. none's working. Is it possible to re-animate the chart? If so, how?

citizenofbuitenzorg
  • 37
  • 1
  • 6

1 Answers1

2

From this answer and from the lack of options available in the Docs, it looks like the only feasible options would be these hacks:

  • redraw the chart with JS using new Chart or
  • change some minor configuration, or recreate an instance of the chart data and then call the update() method.

e.g.: Call the data through a function, and when you want the animation to happen, call the same function again. Because it now has a new array (even though it's the same data), the chart re-animates.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

 <button onclick="updateChart()">Update</button>
    <canvas id="myChart"></canvas>
    <script>
    
        var ctx = document.getElementById('myChart').getContext('2d');
  
  var chartData = {
   type: 'line',
   data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: createDataset()
   }
        };
        var chart = new Chart(ctx, chartData);
  
  function updateChart(){
   chartData.data.datasets = createDataset()
   chart.update();
  }
  
  function createDataset(){
   return [{
                label: "My First dataset",
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: [0, 10, 5, 2, 20, 30, 45],
    fill: false
            }];
  }
    //ignore next line, it's to deal with a bug from chartjs cdn on stackoverflow
    console.clear();
    </script>
Ray
  • 3,864
  • 7
  • 24
  • 36