Show chart.js animation only when user scroll on the specific DIV

Question

I want to show my chart only when an user scroll the page and arrive on the div of the chart.

Now the chart charge together the page's loading and when I arrive on the chart, it is charged yet.

I used Chart.js to make this chart.

This is the link of the site: http://www.matteoschiatti.it/

I have the chart under the "skills" voice.

This is my skills section:

<section id="skills" class="skills-section">

    <div id="counter">
        <canvas id="polarChart" height="100%"></canvas>
    </div> 

</section>

JS:

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

        if ((pTop > oBottom)) {
            chartHidden = true;
        }
    });
});

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]
          }]
      }
  });
}

see [this answer](http://stackoverflow.com/a/488073/5090771) to know when _user scroll the page and arrive on the div of the chart_... — WhiteHat, Apr 18 '17 at 16:59
This solution allow me to understand if an element is in the visible part of the page. But I can't understand how I can show my chart only when an user scroll down on it. Can you help me to understand it? Should I add the js code in the bottom of body? But after? — Crashy, Apr 19 '17 at 12:35
not sure i follow, are you listening for the `'scroll'` event? when the scroll event is fired, use answer provided to know when visible, when visible draw the chart... — WhiteHat, Apr 19 '17 at 12:40
I used the JS function above (question updated) to find the Chart's div in the DOM, but now how can I start the js animation of the chart when I arrive on the div? — Crashy, Apr 19 '17 at 15:19
I added the code for the chart inside to the function "start_count()", but it working bad, and the function load the chart's code all the time that I scroll a bit, it is unusable. — Crashy, Apr 19 '17 at 17:30

score 1 · Accepted Answer · answered Apr 19 '17 at 17:53

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]
          }]
      }
  });
}

answered Apr 19 '17 at 17:53

WhiteHat

59,912
7
51
133

Is there also a way to load the chart all the times that I go over this div (and remove the chart all times I move on another view)? Have I to use the script of this question for this? http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling/488073#488073 – Crashy Apr 20 '17 at 09:05
1

just need to keep track of `pTop` and `oTop`, and maybe bottom as well, if can scroll past -- so when `pTop < oTop` occurs (opposite from above), set `chartHidden` back to true... – WhiteHat Apr 20 '17 at 11:24
I added ' else if (pTop < oTop) { chartHidden = true; } ' and now work well, but only when I scroll from the top, if I scroll up from the bottom doesn't work. Should I create another function with two new variables like oBottom and pBottom? – Crashy Apr 20 '17 at 13:04
I added another var and another if in the function now works as I want, but not very well, I think there are some conflict. I updated my code above. – Crashy Apr 20 '17 at 14:15
when you say _not very well_, how so? looking at the code, it appears the chart will not draw when scrolling up from the bottom, until the top of the chart container is reached. may want to draw when `pTop < oBottom` – WhiteHat Apr 20 '17 at 14:54

Show chart.js animation only when user scroll on the specific DIV

1 Answers1