reference link (all you need): https://www.chartjs.org/docs/latest/charts/bar.html
Sexy right?
not much of a tutorial but... my code:
home.php (you need the html and .css code for that also to work, follow the link instructions, bellow is the combo ajax call + chart)
Code: Select all
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + dd;
console.log(today);
$j.ajax({
url: 'cs_get.php',
data: { entidad_id: today },
success: function(data){
if (data) {
var tbl = jQuery.parseJSON(data);
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'doughnut',
// The data for our dataset
data: {
labels: ['CONSUMIDO', 'POSSO COMER','OBJETIVO'],
datasets: [{
label: 'VISÃO DO DIA',
backgroundColor: ['rgb(217, 83, 79)', 'rgb(240, 173, 78)', 'rgb(92, 184, 82)'],
borderColor: 'rgba(255, 255, 255, 0.4)',
data: [tbl.data_1, tbl.data_2, tbl.data_3]
}]
},
// Configuration options go here
options: {
rotation : Math.PI,
legend: {
labels: {
// This more specific font property overrides the global property
fontColor: 'white',
fontFamily: "Gothamf",
}
}
}
});