I have chartjs like this picture
it has code like this
// Line chart
var ctx = document.getElementById("lineChart");
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(38, 185, 154, 0.31)",
borderColor: "rgba(38, 185, 154, 0.7)",
pointBorderColor: "rgba(38, 185, 154, 0.7)",
pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(22,22,22,1)",
pointBorderWidth: 3,
data: [31, 74, 6, 39, 20, 85, 7]
}, {
label: "My Second dataset",
backgroundColor: "rgba(3, 88, 106, 0.3)",
borderColor: "rgba(3, 88, 106, 0.70)",
pointBorderColor: "rgba(3, 88, 106, 0.70)",
pointBackgroundColor: "rgba(3, 88, 106, 0.70)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
pointBorderWidth: 1,
data: [82, 23, 66, 9, 99, 4, 2]
}]
},
});
// Bar chart
var ctx = document.getElementById("mybarChart");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Yes - of Votes',
backgroundColor: "#26B99A",
data: [51, 30, 40, 28, 92, 50, 45]
}, {
label: 'No - of Votes',
backgroundColor: "#03586A",
data: [41, 56, 25, 48, 72, 34, 12]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
but I want to use data from database with query, but those codes above the data isnt with query. What should I do to change those codes so that I could take data from database with query? I also want to make the chart that looks like the picture above. I want to make 2 charts that is the chart on the left colomn, and chart on the right colomn. Please help me to solve that problem. Thankyou so much
Aucun commentaire:
Enregistrer un commentaire