codice:
<canvas id="chart" width="800" height="450"></canvas>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script>
var results = [
{Mese: "Ottobre", Importo: "1148", Nome: "Mario"},
{Mese: "Ottobre", Importo: "1175", Nome: "Gigi"},
{Mese: "Ottobre", Importo: "1240", Nome: "Antonio"},
{Mese: "Novembre", Importo: "1100", Nome: "Mario"},
{Mese: "Novembre", Importo: "1375", Nome: "Gigi"},
{Mese: "Novembre", Importo: "1310", Nome: "Antonio"},
{Mese: "Dicembre", Importo: "1200", Nome: "Mario"},
{Mese: "Dicembre", Importo: "1275", Nome: "Gigi"},
{Mese: "Dicembre", Importo: "1300", Nome: "Antonio"}
];
var Mese = [];
var Nome = [];
var Importo= [];
results.forEach(function(data) {
Mese.push(data.Mese);
Nome.push(data.Nome);
Importo.push(data.Importo);
});
var uniqueMese = [];
$.each(Mese, function(i, el){
if($.inArray(el, uniqueMese) === -1) uniqueMese.push(el);
});
var uniqueNome = [];
$.each(Nome, function(i, el){
if($.inArray(el, uniqueNome) === -1) uniqueNome.push(el);
});
var data = {
labels: uniqueMese,
datasets: []
}
var XXNome = [];
var XXImporto = [];
uniqueNome.forEach(function(XXa, a) {
XXImporto.push(Importo[a]);
XXColor = "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ",0.55)";
data.datasets.push(
{
label: uniqueNome[a],
backgroundColor: XXColor,
borderColor:XXColor,
data: [15*(a+1),25*(a+1),18*(a+1)]//qui come estrapolo importo relativo ???
});
});
var config = {
type: 'bar',
data : {
labels: ['Ottobre','Novembre','Dicembere'],
datasets: [{
data: [1148,1120,1200],
label: "Mario",
backgroundColor:"#3e95cd",
borderColor: "#3e95cd",
fill: false
}, {
data: [1175,1375,1275],
label: "Gigi",
backgroundColor:"#8e5ea2",
borderColor: "#8e5ea2",
fill: false
}, {
data: [1240,1310,1300],
label: "Antonio",
backgroundColor:"#3cba9f",
borderColor: "#3cba9f",
fill: false
}
]
}
}
var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, config);
</script>
Devi metterti nell'ottica che devi creare i dati così come indicato nel link di esempio e quindi così come ho fatto io.