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

This was answered, but not emphatically enough. Highcharts documentation says explicitly

... In most cases the chart is built in one thread, but in Internet Explorer version 8 or less the chart is sometimes initiated before the document is ready, and in these cases the chart object will not be finished directly after calling new Highcharts.Chart(). As a consequence, code that relies on the newly built Chart object should always run in the callback.

So, dealing with the chart object in IE8 must be done in the callback, i.e. new Highcharts.Chart(options, function(chart) { ... }). You can also use function() { ... } and use this in the function.

In regards to your specific concern re a loading message. I had to do it in the callback, but it works.

chart1 = new Highcharts.Chart(options, function(){
  this.showLoading();
});

Answer 2

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 3

Try with the redraw event. This event is triggered after loading, but also after the series was added and chart resizing.

$(function () {
    // create the chart
    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]     
        }]
    });
});

Redraw event from offical Highcharts reference: http://api.highcharts.com/highcharts#chart.events.redraw

And demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-redraw/

Answer 4

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/