Loading effect on google chart refresh

Question

I have a page with multiple google charts. I also have a drop-down at page level. I refresh/ reload the charts when user changes values from this drop-down.

Everything is working fine but there is a few seconds delay between value selection and charts update. I want to show a loading effect overlay and image on the page before all charts are refreshed.

The problem is that I am unable to overlay this effect on top of google charts. The loading effect javascript does trigger and the background gets greyed, but loading image is hidden behind the charts.

Jsfiddle for the problem: https://jsfiddle.net/0tj1pzsk/14/

How can I overlay spinner image on top of google charts? Placing spinner image inside chart div will only display it for the first chart load and not subsequent refreshes

Code:

CSS

#loading-img {
  background: url(https://i1.wp.com/cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif) center center no-repeat;
  height: 100%;
  z-index: 20;
}

.loading {
  background: #a3a3a3;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.5;
}

Javascript

$('#test').click( function() {
  $('.loading').show(); 
});

google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.arrayToDataTable([
    ['Threat', 'Attacks'],
    ['Chandrian', 38],
    ['Ghosts', 12],
    ['Ghouls', 6],
    ['UFOs', 44],
    ['Vampires', 28],
    ['Zombies', 88]
  ]);

  var options = {
    legend: 'none',
    colors: ['#760946'],
    vAxis: { gridlines: { count: 4 } }
  };

  var chart = new google.visualization.LineChart(document.getElementById('line-chart'));
  chart.draw(data, options);
};

 html

 <button id="test">test</button>
 <div class="loading"><div id="loading-img"></div></div>
 <div id="line-chart"></div>

Answer 1

try moving css...

z-index: 20;

from...

#loading-img

to...

.loading

see following example...

$('#test').click( function() {
 $('.loading').show(); 
});

    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.arrayToDataTable([
        ['Threat', 'Attacks'],
        ['Chandrian', 38],
        ['Ghosts', 12],
        ['Ghouls', 6],
        ['UFOs', 44],
        ['Vampires', 28],
        ['Zombies', 88]
      ]);

      var options = {
        legend: 'none',
        colors: ['#760946'],
        vAxis: { gridlines: { count: 4 } }
      };

      var chart = new google.visualization.LineChart(document.getElementById('line-chart'));
      chart.draw(data, options);
    };
	
	
 

#loading-img {
    background: url(https://i1.wp.com/cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif) center center no-repeat;
    height: 100%;

}

.loading {
    background: #a3a3a3;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    z-index: 20;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<button id="test">test</button>
	
<div class="loading"><div id="loading-img"></div></div>
   <div id="line-chart"></div>