Creare grafico con Ajax e chartjs

[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
   ]
}