16

Is there any onReady (or similar) ready event for HighCharts?

Currently, HighCharts only offers addSeries, click, load, redraw, and selection for chart object (http://www.highcharts.com/ref/#chart-events). Apparently the load should be the one which fires "on chart ready" event, but it's not. It's firing the event "when data is loaded"

Here is a sample they have for load: http://jsfiddle.net/hgbQm/

Here is a modified version of the above code which shows the chart is not ready when load is fired: http://jsfiddle.net/QzKky/1/

Any idea?

Alternatively, I will need to do a delayed calls but that will be so ugly. Thanks!

Lionel Chan
  • 7,894
  • 5
  • 40
  • 69

3 Answers3

21

Indeed the delayed call is not a very good approach. The load event is working properly, but the current chart is referred by the this keyword, i.e.

// create the chart
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            load: function(event) {
                //When is chart ready?
                console.log(this); //this refers to the loaded chart.
            }
        }        
    },
    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]     
    }]
});

Demo

Hope this helps :)

stecb
  • 14,478
  • 2
  • 50
  • 68
6

The Highcharts.Chart constructor takes a callback argument that is called "when the chart object is finished loading and rendering". The chart object is passed as an argument to the callback.

$("#the-chart").highcharts(options, function (chart) {
    alert("The chart is ready now");
    console.log("chart", chart);
});

Chart (Object options, Function callback) This is the constructor for creating a new chart object.

Parameters

  • options: Object
    The chart options, as documented under the heading "The options object"in the left menu.

  • callback: Function
    A function to execute when the chart object is finished loading and rendering. In most cases the chart is built in one thread, but in Internet Explorer version 8 or lessthe chart is sometimes initiated before the document is ready, and in thesecases the chart object will not be finished directly after callingnew Highcharts.Chart(). As a consequence, code that relies on the newly built Chart object should always run in the callback. Defining a chart.event.load handler is equivalent.

Returns

  • Chart
Jason Bright
  • 61
  • 1
  • 2
3

This is definitely less elegant than the accepted answer, but still works fine with a few lines of code. The essence is to simply poll all chart container HTML elements.

The code below assumes you have one or more Highcharts attached to elements having class="chart": 

var chartsToLoad = [];

$('.chart').each(function(n,elem) {

    chartsToLoad[n] = window.setInterval(function() {

        if(typeof($(elem).highcharts()) !== 'undefined') {

            // It's loaded now, go ahead...
            $(elem).highcharts().doSomeHighchartsStuffHere()

            // Permanently stop polling
            window.clearInterval(chartsToLoad[n]);
        }

  }, 100); // Check every 100ms


});
Adam Friedman
  • 520
  • 6
  • 20
  • Worked well for me this solution because the `plotOptions.series.animation.complete` callback didn't work and the load callback fired too early – rjbultitude Oct 25 '16 at 11:19
  • Worked well for me too, since I wanted to make updates (e.g. tickInterval etc) after the series data was available and thus, neither 'load' nor 'redraw' event would work! One issue I am still facing, though, is that I get an intermediate temporary visual state before the final rendering after my updates have been complete. Would there be an easy way to keep the chart state as loading until window.clearInterval is called? Thanks for posting your solution anyways! – Katerina Mpagouli Oct 27 '16 at 10:33