Creare grafico con Ajax e chartjs

[max1974]

Ho un dataset che esce così....

results = [
{Mese: "December", Importo: "1000", Nome: "Mario"},
{Mese: "December", Importo: "1275", Nome: "Gigi"},
{Mese: "December", Importo: "1300", Nome: "Antonio"},
{Mese: "November", Importo: "1100", Nome: "Mario"},
{Mese: "November", Importo: "1375", Nome: "Gigi"},
{Mese: "November", Importo: "1310", Nome: "Antonio"}];

Vorrei ottenere un grafico ove asse x i mesi asse y gli importi ed avere una line per ogni persona ma non riesco a riportare gli importi giusti in (XXImporto).....una mano per favore...

               
results = [
                       {Mese: "December", Importo: "1000", Nome: "Mario"},
                       {Mese: "December", Importo: "1275", Nome: "Gigi"},
                       {Mese: "December", Importo: "1300", Nome: "Antonio"},
                       {Mese: "November", Importo: "1100", Nome: "Mario"},
                       {Mese: "November", Importo: "1375", Nome: "Gigi"},
                       {Mese: "November", Importo: "1310", 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: fillChartJsColors('line',[])
                }
                var XXNome = [];
                uniqueMese.forEach(function(XXa, a) {
                  XXNome = [];
                  XXImporto = [];
                  uniqueNome.forEach(function(XXb, b) {
                    XXImporto.push(Importo[b]);                   
                  }); 

Help please.....

[ciro78]

magari se spieghi meglio cosa vuoi ottenere ...quale è il problema e posti un link in cui analizzare il problema......forse forse ti si può aiutare

[max1974]

Grazie della risposta.....in finale con quel dataset dovrei creare questo grafico QUI

[max1974]

sarei arrivato fin qui...
ma poi non riesco a mettere gli Importi.....
Help Please

[ciro78]

Personalmente ritengo che fai un giro di pazzi per generare quei dati ...detto questo che vuol dire

//qui come estrapolo importo relativo ??

[max1974]

significa che ad esempio nel mese Ottobre al nome Mario deve darmi Importo 1148 {Mese: "Ottobre", Importo: "1148", Nome: "Mario"} e nel mese Novembre con nome Antonio deve darmi Importo = 1310 {Mese: "Novembre", Importo: "1310", Nome: "Antonio"},
ma io sto ciclando dentro i nomi univoci (uniqueNome.forEach) e non sapro quanti mesi e quanti nomi dovro ciclare....
Risp. "Personalmente ritengo che fai un giro di pazzi per generare quei dati" hai altra soluzione Please ???

[ciro78]

significa che ad esempio nel mese Ottobre al nome Mario deve darmi Importo 1148 {Mese: "Ottobre", Importo: "1148", Nome: "Mario"} e nel mese Novembre con nome Antonio deve darmi Importo = 1310 {Mese: "Novembre", Importo: "1310", Nome: "Antonio"},
ma io sto ciclando dentro i nomi univoci (uniqueNome.forEach) e non sapro quanti mesi e quanti nomi dovro ciclare....
Risp. "Personalmente ritengo che fai un giro di pazzi per generare quei dati" hai altra soluzione Please ???

Si a mio avviso sbagli approccio.

<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.

Presumo che results sia il risultato ottenuto da una interrogazione lato server. Ma quel set di dati può essere costruito anche in un altro modo. Addirittura potresti generare il dataset in js direttamente lato server. Ad esempio potresti raggruppare gli importi per serie(nomi delle persone). I dati vengono presi nell'ordine come li inserisci per cui se li estrai in ordine di data corrisponderanno ai mesi..non so se rendo l'idea ma sono le 22.33


quindi:

{ 
   "mario":[ 
      1200,
      1230
   ],
   "gigi":[ 
      2000,
      1000
   ]
}

[max1974]

Dalla mia interrogazione posso ottenere un file del genere......cosa ne pensi puo andare bene??

[{"sEcho":1,"aoData":[{"Anno":"2019",
"0":[{"Mese":"Novembre"},
{"Nome":"Gigi","Importo":"1025"},
{"Nome":"Antonio","Importo":"2018"},
{"Nome":"Angela","Importo":"1050"},
{"Nome":"Massimo","Importo":"1785"},
{"Nome":"Mario","Importo":"1063"}],
"1":[{"Mese":"Dicembre"},
{"Nome":"Gigi","Importo":"2789"},
{"Nome":"Antonio","Importo":"2458"},
{"Nome":"Angela","Importo":"2069"},
{"Nome":"Massimo","Importo":"1895"},
{"Nome":"Mario","Importo":"2458"}]
}]
}];

Mi dai una mano a metterlo nel grafico....PLEASE!!!

[ciro78]

modifica i dati che tieni. che senso ha restituire un oggetto e poi modificarlo per adeguarlo a ciò che ti serve?
presumo tu li generi in php. fai in modo che php ti restituisca esattamente quello che ti serve.

[max1974]

Grazie Ciro78
credo di essere a buon punto
sono arrivato Fin Qui
ma ora ho un solo problema....
quando la Qta è maggiore di zero ad esempio mettendo che ho 3 valori [1,2,3]
tutto ok mi restituisce data = [1,2,3]
quando la Qta è zero ad esempio mettendo che ho 3 valori [1,0,3]
quando la Qta è zero mi restituisce data = [1,3]
perche nel data.map dentro createData() mi omette di aggiungere il valore zero ???
Grazie 1000!!!!