Highcharts How To Show Loading Animation At Set Data

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

Solution 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();
    });
}

Solution 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();
});

Solution 3:

This is a simple piece i always use to show the loading.

let's say this is our container

<div id='container'>
  <img id="spinner" src="/assets/chart_loader.gif"/>
</div>

And this is the piece of ajax that takes care to show when the getJson starts for the chart and hide when it stops.

$(document).ajaxStart ->
  $("#spinner").show()

$(document).ajaxComplete ->
  $("#spinner").hide()

Solution 4:

You can define globally for each page using this plugin JQuery Block UI

and usage is

  jQuery(document).ready(function ($) {
        $.ajaxSetup({ cache: false });
        $(document).ajaxStart(function () {
        $('body').block({
            message: '<h3><img alt="" class="GifIcon" src="Images/319.gif" />Please wait Data is Loading From Server ...... </h3>'
        });
    });
    $(document).ajaxStop(function () {
        $('body').unblock();
    });

});

Solution 5:

Modify the css classes of highcharts:

.highcharts-loading {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.highcharts-loading-inner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #252222;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Based on: How TO - CSS Loader