when is a highchart completely loaded?

Question

I saw this code: http://jsfiddle.net/AVygG/

I'm curious when is the point that the highchart gets loaded completely? I saw in highcharts documentation that events: load: should do the magic of being able to call the callback function when the highchart is completely loaded.

If it were completely loaded, then could I assume that var chart should already have the values when the alert pops? Is that a good basis that the chart is already loaded?

The reason I asked is that I'm working on another code that the highchart apparently doesn't get loaded completely in IE8. Looks like highcharts is potentially having a race condition on the loading of its elements.

Thanks!

$(function () {
// create the chart
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            load: function(event) {
                alert ('Chart loaded');
            }
        }        
    },
    xAxis: {
    },

    series: [{
        animation: false,
        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]     
    }]
});

}); ​

Answer 1

Highcharts has callback function

 var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                redraw: function(event) {
                    alert ('Chart loaded');
                }
            }        
        },
        series: [{
            animation: false,
            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]     
        }]
    },function(chart){

alert('LOADED');

});

Answer 2

In the load callback function, you can access the chart object by using "this" pointer.

        events: {
            load: function(event) {
                alert ('Chart loaded with series :'+ this.series[0].name);
                console.log(this);
            }
        }        

JsFiddle : http://jsfiddle.net/msjaiswal/AVygG/25/