Display a "waiting" message until the data is fetched, and subsequently populate the chart with Ajax and Highcharts

Question

Display a "waiting" message until the data is fetched, and subsequently populate the chart with Ajax and Highcharts

I'm currently facing a challenge with my php scripts that fetch data, as they take quite a long time to complete. Consequently, this delays the loading time of highcharts on my website, since the chart is only displayed once the data retrieval process is finished.

This results in the page appearing blank until all the data is retrieved. My goal is to have the highcharts load immediately and show a 'loading' message without any data, and then dynamically update the graph series with the returned data from the php scripts.

Therefore, I'm seeking examples or guidance on how to achieve this functionality. Additionally, I've encountered an issue where I can only set the data within the $(document).ready(function() function.

An example where it works:

But this breaks:

Thank you very much for your assistance and any help provided will be greatly appreciated.

ajax highcharts

Answer 1

Answer №1

If you're still in need of this information, I can help you with displaying a "loading" message using the "setLoading()" method on the chart.

Let's say you have an instance called pipeline_by_sales_stage_highchart. To display the loading message, you can use the following code: 

pipeline_by_sales_stage_highchart.setLoading("Loading...")

For a practical example, you can check out this demo on JSFiddle: http://jsfiddle.net/QSfEJ/

Answer 2

If you're still in need of this information, I can help you with displaying a "loading" message using the "setLoading()" method on the chart.

Let's say you have an instance called pipeline_by_sales_stage_highchart. To display the loading message, you can use the following code: 

pipeline_by_sales_stage_highchart.setLoading("Loading...")

For a practical example, you can check out this demo on JSFiddle: http://jsfiddle.net/QSfEJ/

Answer 3

Answer №2

Modifying a variable outside its scope is not possible, you must either move it into that specific scope or declare it as a global variable.

http://jsfiddle.net/M2jv7/37/ -within the scope

http://jsfiddle.net/M2jv7/39/ -global declaration

var pipeline_data_chart;
$(document).ready(function () {
            pipeline_data_chart = new Highcharts.Chart({
});

...

// somewhere in the code:
pipeline_data_chart.series[0].setData(data);

Answer 4

Modifying a variable outside its scope is not possible, you must either move it into that specific scope or declare it as a global variable.

http://jsfiddle.net/M2jv7/37/ -within the scope

http://jsfiddle.net/M2jv7/39/ -global declaration

var pipeline_data_chart;
$(document).ready(function () {
            pipeline_data_chart = new Highcharts.Chart({
});

...

// somewhere in the code:
pipeline_data_chart.series[0].setData(data);

Answer 5

Answer №3

Check out my response over here: Updating Highchart series in javascript

Summary of the solution:

To begin, initialize the chart with empty series and then update the chart using the addSeries method within a loop:


this.apiData.forEach(function(serie) { // for each row of data, add a series
  this.chart.addSeries(serie, false); // use false to prevent redrawing
}.bind(this));

this.chart.redraw(); // manually redraw the chart
this.chart.hideLoading(); // stop loading if showLoading() was called before

You can also find a working example on jsFiddle: https://jsfiddle.net/qyh81spb/

Answer 6

Check out my response over here: Updating Highchart series in javascript

Summary of the solution:

To begin, initialize the chart with empty series and then update the chart using the addSeries method within a loop:


this.apiData.forEach(function(serie) { // for each row of data, add a series
  this.chart.addSeries(serie, false); // use false to prevent redrawing
}.bind(this));

this.chart.redraw(); // manually redraw the chart
this.chart.hideLoading(); // stop loading if showLoading() was called before

You can also find a working example on jsFiddle: https://jsfiddle.net/qyh81spb/

Display a "waiting" message until the data is fetched, and subsequently populate the chart with Ajax and Highcharts

Answer №1

Answer №2

Answer №3

Similar questions

Continuously retrieving information from a database to display on a web page

How to Retrieve a Specific Line with jQuery

Obtaining a return value from a function that involves a series of chained Ajax requests in jQuery

Ways to stop a JavaScript function from running during page loading

When I clicked on the event in Javascript, the result was not what I expected

Displaying foreign exchange rates using Shield UI Chart

Can a form and an HTML request be sent using the same event with Mootools?

The Rails text area fails to load through JavaScript when a line break is detected

Access Denied: Phonegap Is Off Limits

Error in PHP script when making an AJAX call

Unexpected issue with Typo3 v9 - receiving empty Ajax Plugin JSON response

Incorporate Product Choices into Shopping Cart using AJAX and <form> | Opencart

Populate a pair of div elements using just one AJAX request

Incorporating PayUMoney into MVC and utilizing ajax for seamless integration

What is the process for accessing a website using Java programming language?

Ajax undoes any modifications enacted by JavaScript

Loading jQuery on Ajax can be a challenge

Enhance your search experience with AJAX-powered search boxes

Send the ID through an Html.ActionLink using ajax to retrieve a specific partial view

Using Ajax and jQuery to fetch information from a previous search query