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

});

Can you demonstrate the problem that you are having in jsfiddle? — jasonlfunk, Jun 19 '12 at 13:24

score 25 · Answer 1 · answered Apr 24 '13 at 11:39

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');

});

is there something like on animation start? – ivkremer Feb 24 '14 at 09:23 — ivkremer, Feb 24 '14 at 09:23

score 8 · Answer 2 · edited Sep 06 '16 at 00:18

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/

and where did you left type? – Fernando Torres Jul 07 '20 at 01:21 — Fernando Torres, Jul 07 '20 at 01:21

score 8 · Answer 3 · answered Apr 24 '13 at 11:27

8

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/

answered Apr 24 '13 at 11:27

Mayank Jaiswal

12,338
7
39
41

3

how about this? http://jsfiddle.net/AVygG/97/ The callback function triggers earlier than expected. – AGamePlayer Aug 18 '16 at 02:11

carlosayam · Answer 4 · 2020-07-25T19:54:26.313

This was answered, but not clearly enough imo. Highcharts documentation says

... 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();
});

score 1 · Answer 5 · answered Apr 24 '19 at 16:35

1

In angular project I had to use setTimeout() function to get width working properly as below:

setTimeout(()=>this.chart.reflow())

answered Apr 24 '19 at 16:35

User3250

2,961
5
29
61

Ys, seems like in Angular callback function doesn't have a complete chart object. I have to use timeout to apply zoom to it. The delay is about 800 milliseconds. A lot. – Mark Sep 04 '20 at 15:54
@Mark How did you come up it 800 ms? Just curios – User3250 Sep 07 '20 at 08:56
1

Simply by experimenting. However, I have moved my code into load event, now I dont have that problem with resetting zoom. – Mark Sep 07 '20 at 18:02

score 0 · Answer 6 · answered Jul 17 '20 at 10:04

0

in Polymer 3 I had to use window.setTimeout() function to get width working properly as below.load: function() { window.setTimeout(() => { this.reflow(); }, 1); },

answered Jul 17 '20 at 10:04

Krishna Pvs

43
6

when is a highchart completely loaded?

6 Answers6

Linked