Highcharts How to Show Loading Animation At Set Data

Question

I have highcharts graphics. When I create my page I show empty graphics (I don't set data attribute and there is only titles of graphics, inside of them is empty.) I get data from server asynchronously and call

setData()

function at callback. However user sees an empty page and I want to show a loading image for them. This: http://api.highcharts.com/highcharts#loading doesn't work for me.

Any ideas?

Answer 1

I did it work as explained at given URL:

function updateGraphic(url, chartName) {
    chartName.showLoading();
    $.getJSON(url, function(data){
        chartName.series[0].setData(data);
        chartName.hideLoading();
    });
}

Answer 2

"Loading.." word seems too amateur. Use that trick instead

var chart = new Highcharts.Chart(options);
chart.showLoading('<img src="/images/spinner.gif">');

$.getJSON(url, function(data){
       //load data to chart
       chart.hideLoading();
});