CODEWITHSUNDEEP
ajaxhighcharts
r1901156
r1901156

Reputation: 123

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

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.

Upvotes: 4

Views: 15133

Answers (3)

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41895

See my answer here: Highchart series update in javascript

Summary :

Initialise chart with empty series, then use addSeries in a loop to update chart, like this:

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/

Upvotes: 1

estemendoza
estemendoza

Reputation: 3085

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/

Upvotes: 6

Paweł Fus
Paweł Fus

Reputation: 45079

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

Upvotes: 3

Related Questions