Buongiorno a tutti ho un problema con chart.js in particolare vorrei creare un grafico dinamico che vada a prendere i dati in esso contenuti direttamente dal mio database e qui entra in gioco Angular.js dato che lo sto utilizzando per recuperare i valori dal database e funziona infatti se provo ad inserirli all'interno di un tag <h1> me li scrive senza problemi, il fatto è che non sò come inserirli all'interno del grafico fatto con chart.js, quindi il problema che mi si pone è contenuto nell'interazione tra la libreria Chart.js e il framework Angular.js.
questo è lo script fatto in Angular che mi permette di prendere i dati dal database tramite una pagina php tramite il servizio $http:
Codice:
var app = angular.module('app', []);
app.controller('DoughnutCtrl', function($scope, $http) {
$http.get("customers_mysql.php")
.then(function (response) {$scope.names = response.data.records;});
});
quest'altro invece è lo script del grafico a ciambella fatto con chart.js:
Codice:
var ctx = document.getElementById("myChart");
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Red", "Blue"],
datasets: [{
label: '# of Votes',
data: [22, 19],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
},
options: {
cutoutPercentage:[50]},
});
Ora il valore che io voglio inserire nel grafico è contenuto nello $scope.names (il valore è un numero intero), però non sò come fare a inserire il suo contenuto nell'array data che contiene i valori da rappresentare nel grafico.
Vi ringrazio dell'attenzione e buona giornata.