Toggle alert visibility using highcharts

Question

I am using highcharts to generate the line chart after loading huge data. Since the data is huge it is taking extra time to load the data and show the chart. Is it possible to show an alert (like: data loading) before start loading data and hide that alert/message after showing the chart.

Answer 1

Look at the loading options in the API. Since the chart has to exist before you and use the options, I find it best to use in the following workflow:

• Create a "blank" graph before loading data with a redraw event to hide the loading message and the load event set to show the loading message:

  // blank graph
  $('#container').highcharts({
      chart: {
          events: {
              redraw: function(){
                  this.hideLoading();
              },
              load: function(){
                  this.showLoading();
              }
          }
      }
  });
  

• Make your AJAX call to retrieve data and load into chart using addSeries(), the above events will show/hide the message.

Here's an example jsFiddle.