Chart Js not display issue: Ajax Call - ajax

Question

I am a newbie to Chart JS library. Iam facing issues in displaying my charts automatically. The charts do no display until I click on one of them or trigger the load by using chrome developer tools. Can you help me in displaying the charts automatically without having to click ?
Thanks for your help.
The code of my page is as follows:
<!-- Layout of the different charts -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="chart-wrapper">
<div class="chart-title">
Distance totale (en mètres) par Tag
</div>
<div class="chart-stage">
<div id="grid-1-1">
<div id="chart-01"></div>
<canvas id="chart01" ></canvas>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="chart-wrapper">
<div class="chart-title">
Durée totale (en secondes) par Tag
</div>
<div class="chart-stage">
<div id="chart-02"></div>
<canvas id="chart02"></canvas>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="chart-wrapper">
<div class="chart-title">
Nombre de Trajets par Zone
</div>
<div class="chart-stage">
<div id="chart-03"></div>
<canvas id="chart03"></canvas>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-sm-6 col-md-4">
<div class="chart-wrapper">
<div class="chart-title">
Durée totale (en secondes) par Zone
</div>
<div class="chart-stage">
<div id="chart-04"></div>
<canvas id="chart04"></canvas>
</div>
</div>
</div>
</div>
<hr/>
</div>
<!-- The scripts to inject data in the graphs -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script>
var userSite = '';
var ctx1 = document.getElementById("chart01");
var ctx2 = document.getElementById("chart02");
var ctx3 = document.getElementById("chart03");
var ctx4 = document.getElementById("chart04");
var tags = [];
var tagsColor = [];
var tagsBorderColor = [];
var distances = [];
var durations = [];
var areas = [];
var nbpaths = [];
var chart01 = {};
var chart02 = {};
var chart03 = {};
var chart04 = {};
<!-- Uitlity to create colors adapted to the graphs -->
function getRandColor(){
var color = [{c:'rgba(255, 99, 132, 0.2)',b:'rgba(255,99,132,1)'},
{c:'rgba(54, 162, 235, 0.2)',b:'rgba(54, 162, 235, 1)'},
{c:'rgba(255, 206, 86, 0.2)', b:'rgba(255, 206, 86, 1)'},
{c:'rgba(75, 192, 192, 0.2)', b:'rgba(75, 192, 192, 1)'},
{c:'rgba(153, 102, 255, 0.2)',b:'rgba(153, 102, 255, 1)'},
{c:'rgba(255, 159, 64, 0.2)]',b:'rgba(255, 159, 64, 1)'}];
return color[Math.floor(Math.random()*(color.length-1))];
}
<!-- Get the specific site to feed data -->
window.onload = function() {
$.ajax({
type: 'GET',
url: 'rest/maps/sites',
dataType: 'json',
async: false,
success: function(data) {
userSite = data[0];
}
});
<!-- Calling webservices to get data -->
$.ajax({
url: 'rest/tags/' + userSite + '/chartinfos',
dataType: 'json',
success: function(response, status){
for ( i=0; i<response.length; i++){
var color = getRandColor();
tags.push(response[i].idTag);
durations.push(response[i].duration);
tagsColor.push(color.c);
tagsBorderColor.push(color.b);
distances.push(response[i].distance);
}
}
});
chart01 = new Chart(ctx1, {
type: 'bar',
data: {
labels: tags,
datasets: [{
label: 'Distance/Tag',
data: distances,
backgroundColor: tagsColor,
borderColor: tagsBorderColor,
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
chart02 = new Chart(ctx2, {
type: 'bar',
data: {
labels: tags,
datasets: [{
label: 'Durée/Tag',
data: durations,
backgroundColor: tagsColor,
borderColor: tagsBorderColor,
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
$.ajax({
url: 'rest/areas/' + userSite + '/chartinfos2',
dataType: 'json',
success: function(response, status){
for ( i=0; i<response.areas.length; i++){
var color = getRandColor();
areas.push(response.areas[i].idAreas);
nbpaths.push(response.areas[i].nbPaths);
tagsColor.push(color.c);
tagsBorderColor.push(color.b);
}
}
});
chart03 = new Chart(ctx3, {
type: 'bar',
data: {
labels: areas,
datasets: [{
label: 'Trajets/Zone',
data: nbpaths,
backgroundColor: tagsColor,
borderColor: tagsBorderColor,
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
chart04 = new Chart(ctx4, {
type: 'bar',
data: {
labels: areas,
datasets: [{
label: 'Durée/Zone',
data: durations,
backgroundColor: tagsColor,
borderColor: tagsBorderColor,
hidden: false,
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
};
</script>
</body>
</html>