Chart.js Pie Animation, Play One Time, When At Certain Position In Page Via Vertical Scroll

I have a simple pie chart, that animates on load out of the box from chart.js -- I am trying to allow the animation to que via a certain scroll point in a long vertical webpage --

Solution 1:

If anyone is interested -- I achieved my goal with this plugin. Appear.js

<scriptsrc="http://rawgit.com/morr/jquery.appear/master/jquery.appear.js"></script>

__

/**
 * Highcharts plugin to defer initial series animation until the element has appeared. Requieres
 * jQuery.appear.
 */
(function (H) {
    function deferAnimate (proceed, init) {
        var series = this, 
            $renderTo = $(this.chart.container.parentNode);

        // Prevent pre-rendering without animationif (init) {
            series.group.hide();
        }

        // Prepare for animationif (init) {
            $renderTo.appear(); // initialize appear plugin
            proceed.call(this, init);

        // It is appeared, run animation
        } elseif ($renderTo.is(':appeared')) {
            proceed.call(series);
            series.group.show();

        // It is not appeared, halt animation until appear
        } else  {
            $renderTo.on('appear', function () {
                if (!series.animated) { 
                    proceed.call(series);
                    series.group.show();
                    series.animated = true;
                }
            });
        }


    };

    H.wrap(H.Series.prototype, 'animate', deferAnimate);
    H.wrap(H.seriesTypes.column.prototype, 'animate', deferAnimate);
    H.wrap(H.seriesTypes.pie.prototype, 'animate', deferAnimate);

}(Highcharts));