Grafico Ajax

[max1974]

salve ragazzi è ora di realizzare qualche grafico,
stavo provando a seguire questo QUI
questo il mio lato 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

        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]

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

 

[max1974]

Come sempre 1000 grazie Marino.
ho risolto cosi, dimmi cosa ne pensi ....
php

$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];
                    }

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

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

 

[max1974]

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