Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 11
  1. #1
    Utente di HTML.it
    Registrato dal
    Jul 2007
    Messaggi
    322

    Creare grafico con Ajax e chartjs

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

    Codice PHP:

                   
    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(iel){
                        if($.
    inArray(eluniqueMese) === -1uniqueMese.push(el);
                    });
                    var 
    uniqueNome = [];
                    $.
    each(Nome, function(iel){
                        if($.
    inArray(eluniqueNome) === -1uniqueNome.push(el);
                    });
                        var 
    data = {
                            
    labelsuniqueMese,
                        
    datasetsfillChartJsColors('line',[])
                    }
                    var 
    XXNome = [];
                    
    uniqueMese.forEach(function(XXaa) {
                      
    XXNome = [];
                      
    XXImporto = [];
                      
    uniqueNome.forEach(function(XXbb) {
                        
    XXImporto.push(Importo[b]);                   
                      }); 
    Help please.....

  2. #2
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,177
    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
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  3. #3
    Utente di HTML.it
    Registrato dal
    Jul 2007
    Messaggi
    322
    Grazie della risposta.....in finale con quel dataset dovrei creare questo grafico QUI

  4. #4
    Utente di HTML.it
    Registrato dal
    Jul 2007
    Messaggi
    322
    sarei arrivato fin qui...
    ma poi non riesco a mettere gli Importi.....
    Help Please

  5. #5
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,177
    Personalmente ritengo che fai un giro di pazzi per generare quei dati ...detto questo che vuol dire

    //qui come estrapolo importo relativo ??
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  6. #6
    Utente di HTML.it
    Registrato dal
    Jul 2007
    Messaggi
    322
    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 ???

  7. #7
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,177
    Quote Originariamente inviata da max1974 Visualizza il messaggio
    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.


    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.

    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:

    codice:
    { 
       "mario":[ 
          1200,
          1230
       ],
       "gigi":[ 
          2000,
          1000
       ]
    }
    
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  8. #8
    Utente di HTML.it
    Registrato dal
    Jul 2007
    Messaggi
    322
    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!!!
    Ultima modifica di max1974; 06-12-2019 a 17:05

  9. #9
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,177
    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.
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  10. #10
    Utente di HTML.it
    Registrato dal
    Jul 2007
    Messaggi
    322
    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!!!!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.