Highcharts test tool

by Torstein Hønsi

HTML

<script src="https://rawgithub.com/morr/jquery.appear/master/jquery.appear.js"></script>
<a href="https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/studies/appear/">See the updated study without jQuery</a>

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.
 *
 * Updated 2016-01-11
 */
(function (H) {
    function deferRender (proceed) {
        var series = this, 
            $renderTo = $(this.chart.container.parentNode);

        // It is appeared, render it
        if ($renderTo.is(':appeared') || !series.options.animation) {
            proceed.call(series);
            
        // It is not appeared, halt renering until appear
        } else  {
            $renderTo.appear(); // Initialize appear plugin
            $renderTo.on('appear', function () {
                proceed.call(series);
            });
        }
    };
    
    H.wrap(H.Series.prototype, 'render', deferRender);
    
}(Highcharts));

$('#container1').highcharts({
    
    chart: {
        type: 'area'
    },
    
    title: {
        text: 'Area chart'
    },
    
    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'
    },
    
    title: {
        text: 'Pie chart'
    },

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

});

$('#container3').highcharts({
    
    chart: {
        type: 'column'
    },
    
    title: {
        text: 'Column...