CODEWITHSUNDEEP
highchartsprogress-bar
logicstar
logicstar

Reputation: 197

How to show progrss bar in highchart while loading data?

I am loading chart using json but it takes while so meanwhile i want to show progress bar to show the process happening behind.

    $.getJSON('frontend/js/tmp/data40.json', function(data) {
           options.series=data; 
           var chart = new Highcharts.Chart(options);
    });

How can i show progress bar?

Upvotes: 0

Views: 2284

Answers (1)

Nishith Kant Chaturvedi
Nishith Kant Chaturvedi

Reputation: 4769

you can use showLoading function of highcharts to show progressbar.

yourChart.showLoading('Loading...');
yourChart.hideLoading();

will share a working demo

see the Alternate way of doing this , as you want to wait till response comes back and data fills in highchart see Working demo on your code
You can style and position this "Loading data" text or use a loading icon/spinner icon as you want.

 $("#container").text("Loading Data");
  $.getJSON('data10.json', function(data) {
    options.series=data;
     chart = new Highcharts.Chart(options);


});

Upvotes: 1

Related Questions