title: Show chart.js animation only when user scroll on the specific DIV
body: <p>I want to show my chart only when an user scroll the page and arrive on the div of the chart.</p>
  
  <p>Now the chart charge together the page's loading and when I arrive on the chart, it is charged yet. </p>
  
  <p>I used Chart.js to make this chart.</p>
  
  <p>This is the link of the site: 
  <a href="http://www.matteoschiatti.it/" rel="nofollow noreferrer">http://www.matteoschiatti.it/</a></p>
  
  <p>I have the chart under the "skills" voice.</p>
  
  <p>This is my skills section:</p>
  
  <pre><code>&lt;section id="skills" class="skills-section"&gt;
  
      &lt;div id="counter"&gt;
          &lt;canvas id="polarChart" height="100%"&gt;&lt;/canvas&gt;
      &lt;/div&gt; 
  
  &lt;/section&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>       $(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 &gt; oTop) &amp;&amp; (chartHidden)) {
              chartHidden = false;
              start_count();
          } else if (pTop &lt; oTop) {
              chartHidden = true;
          }
  
          if ((pTop &gt; 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]
            }]
        }
    });
  }
  </code></pre>