Append onload or redraw event functions dynamically in Highcharts

Question

I need to append onload or redraw event functions dynamically in Highcharts, I know make that in config step, like:

$('#container').highcharts({
   chart: {
       events: {
          load: function(event) {
              function1();
              function2();
              function3();
          },
          redraw: function(event) {
              functionA();
              functionB();
              functionC();
          }
       }        
    },
    xAxis: {
    },
    series: [{
        data: [29.9, 71.5]     
    }]
});

But I need do that after config the chart ('cause I don't have access to config chart step, the chart comes to my code by a wrapper) and I need to do something like this:

//The wrapper simulation
^
|
|
/////////////////////////////////////////
//$('#container').highcharts({         //
//    chart: {                         //
//       events: {                     //
//          load: function(event) {    //
//              function1();           //
//          },                         //
//          redraw: function(event) {  //
//              functionA();           //
//          }                          //< "I dont't have access to this code"
//       }                             //  
//    },                               //
//    xAxis: {                         //
//    },                               // 
//    series: [{                       //
//        data: [29.9, 71.5]           //   
//    }]                               // 
//});                                  //
/////////////////////////////////////////

//I only have the container id in my hands, I can get the highchart object:
$('#container').highcharts();

//And I need to do something like this:
appendOnLoadEvent(function2);
appendOnLoadEvent(function3);

appendOnRedrawEvent(functionB);
appendOnRedrawEvent(functionC);

Is this possible?

Answer 1

The easiest way is to create the events as you described in the first example, and in those functions execute all necesary event handlers from an array.

Something like:

  var redrawCallbacks = [];

  $(...).highcharts({
  chart: {
      events: {
          redraw: function(event) {
              for (var i = 0; i < redrawCallbacks.length; ++i) redrawCallbacks[i].call(this, event);
          }
      }
  }});

See full example at: http://jsfiddle.net/5S6hF/2/

UPDATE
Assuming you are using the default jQuery adapter, you can define events later with:

$(chart).on('redraw', function(){ alert('new event handler'); });

See demo at http://jsfiddle.net/5S6hF/6/

Answer 2

For Highchart 4.2, you have to use the addEvent method to add event to chart object. Follow the below code, first retrieve highchart object and then add redraw/load event to it

var chart1= Highcharts.charts[0];
Highcharts.addEvent(chart1,'redraw', function(){alert('hi');});

Answer 3

You need to add callback (like event load), where you can also add redraw events. You need ot do this before creating chart.

See: http://jsfiddle.net/5S6hF/5/

var redrawCallbacks = [];

function appendOnRedrawEvent(callback) {
    redrawCallbacks.push(callback);
}

var loadCallbacks = [];

function appendOnLoadEvent(callback) {
    loadCallbacks.push(callback);
}

appendOnLoadEvent(function () {
    alert('onload added dynamically');
});

H = Highcharts;
H.Chart.prototype.callbacks.push(function (chart) {
    for (var i = 0; i < loadCallbacks.length; ++i) loadCallbacks[i].call(this, event);

    H.addEvent(chart, 'redraw', function (e) {
        for (var i = 0; i < redrawCallbacks.length; ++i) redrawCallbacks[i].call(this, event);
    });
});

//create chart
$('#container').highcharts({
    series: [{
        data: [29.9, 71.5]
    }]
});



appendOnRedrawEvent(function () {
    alert('redraw added later');
});