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