I am passing data to Bootstrap charts from Laravel controller using JQuery. The problem is that the charts does not display. But when I click the developer tools (F12), it displays making it difficult to debug.
Other charts that are not using ajax loads just fine. Here is my code:
var Years = new Array();
var Labels = new Array();
var shares = new Array();
$(document).ready(function () {
$.get(url + 'shares/yearly', function (response) {
response.forEach(function (data) {
Years.push(data.year);
Labels.push(data.year);
shares.push(data.shares);
});
});
var ctxB = document.getElementById("sharesAnnullyChart").getContext('2d');
var myBarChart = new Chart(ctxB, {
type: 'bar',
data: {
labels: Years,
datasets: [{
label: 'Shares',
data: shares,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
optionss: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
})
I have tried the answers discussed under this link and it seems there is no console commands in my code: here is the link: The link is here.
Any ideas, Please assist me, I have been trying to find a solution now almost a week.