Question

153

Append onload or redraw event functions dynamically in Highcharts

rated 0 times [ 160] [ 7] / answers: 1 / hits: 11340 / 10 Years ago, tue, march 11, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tammyb

Add To Favorites

Follow

Total Points: 278

Total Questions: 101

Total Answers: 103

Location: Botswana

Member since Sat, Jan 7, 2023

1 Year ago

tammyb questions

1 regex InputNumber formatter ant-design

Sat, Aug 15, 20, 00:00, 4 Years ago

1 Redirect to a URL when browser back button is pressed using JavaScript

Mon, May 25, 20, 00:00, 4 Years ago

1 How can I redirect a URL for post request using AWS lambda?

Thu, Oct 3, 19, 00:00, 5 Years ago

1 useState and splice react

Wed, Sep 25, 19, 00:00, 5 Years ago

1 Using Template Literals with Lodash _.template()

Sun, Jun 9, 19, 00:00, 5 Years ago

View All

answered 10 Years ago kyla · Accepted Answer

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/