Showing Loader GIF till Chart is Rendered | CanvasJS JavaScript Charts

Showing Loader GIF till Chart is Rendered | CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;">
  <center><img src="https://i.imgur.com/Pdr7Mvk.gif" id="loader"/><br/>Chart Renders Here...</center>  
</div>

CSS

#loader {
  height: 300px;
}

JavaScript

function renderChart() {
  var options = {
  	title: {
    	text: "Showing Loader GIF till Chart is rendered"
    },
    animationEnabled: true,
    data: [{
      type: "line",
      dataPoints: []
    }]
  };
  $.when(addDataPoints(100000, options)).then(function( data, textStatus, jqXHR ) {
    var chart = new CanvasJS.Chart("chartContainer", options);
    chart.render();
  }); 
}

function addDataPoints(noOfDps, options) {
  var xVal = options.data[0].dataPoints.length + 1, yVal = 100;
  for(var i = 0; i < noOfDps; i++) {
    yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
    options.data[0].dataPoints.push({x: xVal,y: yVal});	
    xVal++;
  }
}

setTimeout(function() {
	renderChart();
}, 2000);