Highcharts onComplete

by sqiudward

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container">
    <div id="main-chart"></div>
    <div id="sub-chart"></div>
    <div style="clear:both"></div>
</div>
<input type="button" id="add-point" value="Add point">

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}
#main-chart {
    float: left;
    width: 80%;
}
#sub-chart {
    float: left;
    width: 20%;
}

JavaScript

var mainChart = $('#main-chart').highcharts({
    chart: {
        type: 'areaspline',
        height: 300,
        padding: 0,
        events:{
        	load: function(chart){ alert(chart); }
        }
    },
    animation: false,
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    title: {
        text: null
    },
    subtitle: {
        text: null
    },
    plotOptions: {
        series: {
            animation: false
        }
    },
    xAxis: {
        categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
    },
    yAxis: {

        events: {
            setExtremes: function (min, max) {
                console.log(this);
            }
        },
        title: {
            enabled: false
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],
    events: {
        redraw: function () {
            alert('a');
        }
    }
});

var subChart = $('#sub-chart').highcharts({
    chart: {
        type: 'area',
        height: 300,
        padding: 0
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    title: {
        text: null
    },
    subtitle: {
        text: null
    },
    xAxis: {
        categories: ['0', '0']
    },
    yAxis: {
        title: {
            enabled: false
        }
    },
    series: [{
        data: [54.4, 54.4]
    }],
});

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

function addPoint() {
    var chartObj = $('#main-chart').highcharts();
    var mainSeries = chartObj.options.series[0].data;
    mainSeries = mainSeries.slice(1, mainSeries.length);
    var random = getRandomArbitrary(1, 10)
    mainSeries.push(random);
    
    $('#sub-chart').highcharts({
        chart: {
            
            
       ...