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/