[Chartjs]-Show chart.js animation only when user scroll on the specific DIV

by

1👍

✅

once the chart is drawn after becoming visible,
you don’t want to keep drawing with every scroll

use a flag to know when it’s been drawn for the first time, see chartHidden… 

$(function() {
    var oTop = $('#counter').offset().top - window.innerHeight;
    var chartHidden = true;
    $(window).scroll(function(){
        var pTop = $('body').scrollTop();
        if ((pTop > oTop) && (chartHidden)) {
            chartHidden = false;
            start_count();
        }
    });
});

function start_count(){
  var ctx = document.getElementById("polarChart").getContext('2d');
  var myChart = new Chart(ctx, {
      type: 'polarArea',
      data: {
          labels: ["Php", "Css", "Html", "Wordpress", "Magento", "Photoshop", "Web Analisis", "Seo"],
          datasets: [{
              backgroundColor: [
                  "#0066ff",
                  "#cc3333",
                  "#ffba02",
                  "#009966",
                  "#ff6600",
                  "#db01de",
                  "#00cc33",
                  "#00ccff"
              ],
              data: [65, 85, 90, 95, 75, 75, 85, 85]
          }]
      }
  });
}

Leave a comment