animated chart start on spcific part of the page

Question

I have this script

    var doughnutData = [
            {
                value: 10,
                color:"#444444",
                highlight: "#535353",
                label: "Contrato de Assistência"
            },
            {
                value: 25,
                color: "#707070",
                highlight: "#7F7F7F",
                label: "Assistência Técnica"
            },
            {
                value: 10,
                color: "#CECECE",
                highlight: "#E2E2E2",
                label: "Entrega ao Domicílio"
            },
            {
                value: 55,
                color: "#262626",
                highlight: "#383838",
                label: "Atendimento ao Público"
            }

        ];

        window.onload = function(){
            var ctx = document.getElementById("chart-area").getContext("2d");
            window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
        };

This is a animated doughnut chart like this http://codepen.io/IanVS/pen/EaZWyo .

But the animation starts when page load and I want to start a specific part of the page.

Possible duplicate of [How to make the Chart.js animate when scrolled to that section?](http://stackoverflow.com/questions/18772547/how-to-make-the-chart-js-animate-when-scrolled-to-that-section) — Goowik, Oct 07 '15 at 09:15

score 0 · Answer 1 · answered Oct 07 '15 at 09:24

For something like what you want I used this library:

https://github.com/customd/jquery-visible

This library checks if something is visible on the page, so you can wait to see if something is visible to launch the action. I did put a timer that checked every so often if the element was visible.

In your case it could be something like this:

       jQuery(document).ready(function($) {
          var timer = window.setInterval(check_visible, 250);

          function check_visible(){
             var visible = $('#chart-area').visible( "complete" );
             if(visible){
               clearInterval(timer);
               var ctx = document.getElementById("chart-area").getContext("2d");
               window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
             }
          }
      });

I used it on my web page. You can see if you scroll down.

animated chart start on spcific part of the page

1 Answers1