Animate - Defer animation until chart is in viewport

by bizamajig

HTML

<script src="https://rawgithub.com/morr/jquery.appear/master/jquery.appear.js"></script>
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="main">
    
    <h2>Scroll down the page to watch charts appear</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate egestas nibh, et gravida ante ultricies ut. Nulla ultrices felis massa, a placerat elit auctor id. Aliquam at ipsum porta, laoreet turpis et, rutrum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et viverra justo. Proin sit amet rhoncus dui. Vivamus non diam non lorem elementum blandit. Sed interdum sodales ante eu semper. Aenean malesuada erat sit amet ligula posuere, sed lacinia lorem posuere. Vivamus venenatis ullamcorper purus, eget consequat odio malesuada id.</p>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mollis dui non commodo varius. Phasellus eu purus tincidunt, bibendum neque interdum, egestas leo. Quisque porttitor eros ac enim hendrerit, ut laoreet nulla fermentum. Suspendisse lobortis mi est. Vestibulum volutpat risus eu eleifend aliquet. Proin commodo, sem quis feugiat feugiat, magna odio lacinia metus, in auctor purus nisi sed enim. Fusce aliquam magna in odio viverra accumsan. Praesent gravida porttitor velit vitae aliquam. Suspendisse porta arcu nec velit tincidunt, ac ullamcorper lacus laoreet. Pellentesque vehicula diam ut lorem varius, at vehicula nunc volutpat. Sed sit amet ultrices mauris.</p>

<p>Aliquam vestibulum tortor quis nunc mattis varius. Proin a condimentum velit, id rutrum est. Morbi venenatis ornare leo eget interdum. Ut facilisis diam felis. Praesent luctus porta augue, in scelerisque lorem convallis blandit. Integer non laoreet ligula. Cras ultrices, dui a vulputate pharetra, ante sem auctor eros, sodales pharetra mauris turpis eu felis. In hac habitasse...

CSS

body {
    padding: 1em;
}
#main {
    width: 300px;
    margin: 0 auto;
}
p {
    margin: 1em 0;
}

JavaScript

/**
 * 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 animation
        if (init) {
            series.group.hide();
        }
        
        // Prepare for animation
        if (init) {
            $renderTo.appear(); // initialize appear plugin
            proceed.call(this, init);
        
        // It is appeared, run animation
        } else if ($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));

$('#container1').highcharts({
    
    chart: {
        type: 'area'
    },
    
    xAxis: {
        type: 'category'
    },

    series: [{
        data: [
            ['Jan', 29.9], 
            ['Feb', 71.5], 
            ['Mar', 106.4], 
            ['Apr', 129.2], 
            ['May', 144.0], 
            ['Jun', 176.0], 
            ['Jul', 135.6], 
            ['Aug', 148.5], 
            ['Sep', 216.4], 
            ['Oct', 194.1], 
            ['Nov', 95.6], 
            ['Dec', 54.4]
        ]
    }]

});

$('#container2').highcharts({
    
    chart: {
        type: 'pie'
    },
    xAxis: {
        type: 'category'
    },

    series: [{
        data: [
        ...