Ajax and Highcharts - display “download” before receiving data, then fill in the chart

Question

I have several php scripts that retrieve data for a long time. As a result, this affects the loading time of high-speed charts, since the current code I just wrote records the chart after all the data has been extracted, since the highcharts code will only echo after all the processing is complete.

This leads to the fact that the page basically does not show anything until the data is restored. The goal is to download the high speed chart right away and then write the data returned by php scripts into a series.

So, I want all the graphs to load immediately and display a “load” without data, and then use setData to transfer data to a series of graphs after the completion of php scripts.

I'm just wondering if anyone has any examples of this? Another problem that I encountered is only the ability to set data in the $ (document) .ready (function () function, for example.

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

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

Thanks so much and any help would be very helpful.

Answer 1

You cannot access a variable outside the scope, move it to that area, or make the variable global.

• http://jsfiddle.net/M2jv7/33/ -region area

• 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); 

Answer 2

I don’t know if you continue to search for this, but you can use the setLoading () method in the diagram to display the “loading” message.

 pipeline_by_sales_stage_highchart.setLoading("Loading...") 

Check out this script: http://jsfiddle.net/QSfEJ/

Answer 3

See my answer here: Highchart series update in javascript

---

Summary:

Initialize the chart with an empty series, then use addSeries in a loop to update the chart, for example:

 this.dataFromApi.forEach(function(serie) { // for each row of data, add a series this.chart.addSeries(serie, false); // false is to prevent redrawing }.bind(this)); this.chart.redraw(); // manually redraw this.chart.hideLoading(); // stop loading if showLoading() was call before 

jsFiddle here: https://jsfiddle.net/qyh81spb/