Handle onload or redraw event functions dynamically - Javascript highcharts

Javascript examples for highcharts:Chart Event

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Event

Description

Handle onload or redraw event functions dynamically

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
      <script type="text/javascript">
    $(function(){/*from   w  w  w  .j  a  va2 s . c  o  m*/
var redrawCallbacks = [];
function appendOnRedrawEvent(callback) {
    redrawCallbacks.push(callback);
}
var loadCallbacks = [];
function appendOnLoadEvent(callback) {
    loadCallbacks.push(callback);
}
appendOnLoadEvent(function(){ console.log('onload added dynamically'); });
$('#container').highcharts({
   chart: {
       events: {
          load: function(event) {
              for (var i = 0; i < loadCallbacks.length; ++i) loadCallbacks[i].call(this, event);
          },
          redraw: function(event) {
              for (var i = 0; i < redrawCallbacks.length; ++i) redrawCallbacks[i].call(this, event);
          }
       }
    },
    xAxis: {
    },
    series: [{
        data: [29.9, 71.5]
    }]
});
appendOnRedrawEvent(function(){ console.log('redraw added later'); });
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container"></div> 
      <p>Redraw: try clicking on the legend, to hide/show series</p>  
   </body>
</html>

Related Tutorials