Grafico Ajax

max1974

Utente Attivo
7 Mar 2013
107
0
16
salve ragazzi è ora di realizzare qualche grafico,
stavo provando a seguire questo QUI
questo il mio lato PHP
PHP:
if (mysqli_num_rows($result)>0) {
               while($row = $result->fetch_assoc()) {
                             $data4[]='['.$row['Periodo'].','.$row['ConsMedio'].']';
                             }
                  $Values['GRAPH'] = ['status' => 'success',
                              'Message' => "Elaborazione Avvenuta con Successo",
                               'iTotalRecords' => count($data4),
                                'aaData' => $data4];
                    }
Questo lato JS
PHP:
        var options = {
                chart: {
                    type: 'spline'
                },
                series: [{}]
            };
            Highcharts.ajax({
                url: '../php/gest-statistics.php',
                dataType:"json",
                success: function(data) {
                    var $data = JSON.stringify(data.GRAPH.aaData);
                    console.log($data);
                    options.series[0].data = $data;
                    Highcharts.Chart('container', options);
                }
            });
nella mia console.log($data) ho questo ["[19/3/2020,0],","[10/4/2020,1.250000],"] , ma non mi funziona, credete che i doppi apici possono dargli fastidio o che altro ???
vorrei mettere le date su asseX e consumo su asse y e tracciare una unica serie....
 

marino51

Utente Attivo
28 Feb 2013
2.912
162
63
Lombardia
trovo un poco fuorvianti le indicazioni al link che hai indicato, mi spiego,
il grafico lo ottieni completando la struttura "options" indicata al punto 2 del "Preprocess data using CSV"
la struttura la puoi completare ottenendo un json da ajax

del link, possiamo dire che csv, json, xml sono delle strutture per ottenere / trasferire i dati, per esempio con ajax,
ma poi questi dati vanno messi nella struttura "options"

ti consiglio di guardare le demo scegliendo il grafico più attinente a quello che ti serve,
la demo ti consente di scaricare il codice js e da questo puoi impostare il tuo "ajax" per recuperare i dati necessari

buon grafico

1584739390081.png
 
  • Like
Reactions: max1974

max1974

Utente Attivo
7 Mar 2013
107
0
16
Come sempre 1000 grazie Marino.
ho risolto cosi, dimmi cosa ne pensi ....
php
Codice:
$result=mysqli_query($connect,$query);
                    if (mysqli_num_rows($result)>0) {
                       while($row = $result->fetch_assoc()) {
                             $data4[]=['Periodo'=>(string)$row['Periodo'],'ConsMedio'=>(Double)$row['ConsMedio'],'KMpercorsi'=>(Double)$row['KMpercorsi'],'TOTLT'=>(Double)$row['TOTLT']];
                             }
                       $Values['GRAPH'] = ['status' => 'success',
                                  'Message' => "Elaborazione Avvenuta con Successo",
                                  'iTotalRecords' => count($data4),
                                  'aaData' => $data4];
                    }
PHP:
        $.ajax({
          url:'../php/myphp.php',
          method:"POST",         
          dataType:"json",
          success: function(response){
            //Converto in Object
            let object=JSON.parse(JSON.stringify(response.GRAPH.aaData));
            let data={
                title: {
                  text: 'Grafico Consumo Medio / Percorsi / Rifornimenti Per Periodo'
                },
                subtitle: {
                  text: 'By.'
                },
                xAxis: {
                  categories: [...new Set(createData(object,'Periodo'))],
                  tickmarkPlacement: 'on',
                  title: {
                    enabled: false
                  }
                },
                yAxis: {
                  title: {
                    text: 'Consumo'
                  },
                  labels: {
                    formatter: function () {
                      return this.value;
                    }
                  }
                },

                plotOptions: {
                  area: {
                    stacking: 'normal',
                    lineColor: '#666666',
                    lineWidth: 1,
                    marker: {
                      lineWidth: 1,
                      lineColor: '#666666'
                    }
                  }
                },
                series:[{
                        name:'Consumo Medio',
                        data:createData(object,'ConsMedio'),
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{series.name}:</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{point.key}</td>' +
                              '<td style="padding:0;white-space: nowrap;"><b>{point.y:.2f} <label style="font-size:9px">Lt/Km</label></b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                          },
                        },
                       {
                        name:'Percorsi',
                        data:createData(object,'KMpercorsi'),
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{series.name}:</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{point.key}</td>' +
                              '<td style="padding:0;white-space: nowrap;"><b>{point.y:.2f} <label style="font-size:9px">Km</label></b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                          },
                        },
                       {
                         name:'Rifornimenti',
                         data:createData(object,'TOTLT'),
                         tooltip: {
                             headerFormat: '<span style="font-size:10px">{series.name}:</span><table>',
                             pointFormat: '<tr><td style="color:{series.color};padding:0">{point.key}</td>' +
                               '<td style="padding:0;white-space: nowrap;"><b>{point.y:.2f} <label style="font-size:9px">Lt</label></b></td></tr>',
                             footerFormat: '</table>',
                             shared: true,
                             useHTML: true
                           },
                       }]
            };
            Highcharts.chart('chart-line', data);
            function createData(data,type){
                if(typeof type=== 'object'){
                    return data.map(function(v,k){
                        if(type.f1===v[type.f2])
                          if (v[type.return]==undefined){
                            return 0;//v[type.return];
                          }
                          else{
                              var $r=v[type.return];
                              return parseFloat($r).toFixed(2);
                          };
                      },type);
                }else{
                    return data.map(function(v,k){
                        return v[type];
                    },type);
                }
            }
          }

        })
 

marino51

Utente Attivo
28 Feb 2013
2.912
162
63
Lombardia
formalmente é un buon lavoro,
ma considera che passando tutte le "variabili", ovvero, evitando le "variabili hard coded",
puoi costruire la funzione "$.ajax" in modo da produrre una molteplicità di grafici diversi,
non solo nei numeri ma anche nella rappresentazione
se hai tempo da dedicare, potresti creare una base già pronta da utilizzare in futuro
 
  • Like
Reactions: max1974

max1974

Utente Attivo
7 Mar 2013
107
0
16
Ottimo, grazie 1000.
Appena termino il progetto giuro che mi ci dedicherò un po visto che tanto i grafici sono soltanto il riepilogo di tutto quello che fa il software percuì sempre implementabili, migliorabili etc.....
Grazie di nuovo Marino