Ajax and Highcharts - Display 'loading' until data is retrieved, then populate chart

Question

I have some php scripts which esentially take a long time to retrieve data. As a result this impacts highcharts loading times as the current code I have only writes the chart once all the data is retrieved as the highcharts code is only echoed once all processing is complete.

This causes the page to basically show nothing until the data is retrieved. The goal is to have the highcharts load immedietly and then write to the series with the data returned by the php scripts.

So, what I'm looking to to is have all the graphs load immedietly and display 'loading' with no data and then use setData to pass in the data to the graph series once the php scripts have completed.

I'm just wondering if anyone had any examples of this being done? Another problem I'm having is only being able to set the data within the $(document).ready(function() function. e.g.

works: http://preview.tinyurl.com/b724bxo

breaks: http://preview.tinyurl.com/a7mqqkc

Many thanks and any help would be greatly appriciated.

Answer 1

Don't know if you're still looking for this, but to display a "loading" message, you can use the "setLoading()" method on the chart.

pipeline_by_sales_stage_highchart.setLoading("Loading...")

Check this fiddle: http://jsfiddle.net/QSfEJ/

Answer 2

You can't access variable out of scope, move that into that scope, or make variable global.

• http://jsfiddle.net/M2jv7/33/ -inside scope

• http://jsfiddle.net/M2jv7/34/ -global variable

  var pipeline_by_sales_stage_highchart;
  $(document).ready(function () {
              pipeline_by_sales_stage_highchart = new Highcharts.Chart({
  });
  
  ...
  
  // somewhere:
  pipeline_by_sales_stage_highchart.series[0].setData(data);