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
3.203
207
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
3.203
207
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
max1974 [Javascript] Grafico ajax non funziona Javascript 0
J [Cerco] [Collaborazione gratuita] Grafico per piccoli lavori di grafica Offerte e Richieste di Lavoro e/o Collaborazione 0
B Aumento dimensioni grafico Access Database 0
I [cerchiamo][retribuito] Grafico/a per stickers Offerte e Richieste di Lavoro e/o Collaborazione 0
J Videomaker & Grafico/a - Stage curriculare Offerte e Richieste di Lavoro e/o Collaborazione 0
M Grafico dinamico mysql chartjs Ajax 5
O Cerco grafico per sito wordpress Offerte e Richieste di Lavoro e/o Collaborazione 3
F Cerco grafico per inoltro lavori Offerte e Richieste di Lavoro e/o Collaborazione 3
A [Cerco] Staff grafico e programmatore per GdR PbC Offerte e Richieste di Lavoro e/o Collaborazione 1
S [PHP] [HTML] Come creare un grafico dinamico PHP 4
edittaruocco [Photoshop] Immagine in editor grafico Photoshop 0
A [Retribuito][Offro] Restyling grafico portale PHP/HTML Offerte e Richieste di Lavoro e/o Collaborazione 0
V [Collaborazione] Cerco grafico 3D Offerte e Richieste di Lavoro e/o Collaborazione 0
T [HTML] [Prestashop] Problemino grafico su versione Responsive del sito CMS (Content Management System) 9
C [cerco] Webmaster- grafico per tema WP Offerte e Richieste di Lavoro e/o Collaborazione 3
L Offro retribuzione per lo sviluppo di un template grafico Offerte e Richieste di Lavoro e/o Collaborazione 7
M [SI CERCA] Grafico per rinnovare applicazione My Shopping List Offerte e Richieste di Lavoro e/o Collaborazione 0
D [Cerco retribuito] Grafico per UI/UX app e logo Offerte e Richieste di Lavoro e/o Collaborazione 3
P cerco grafico web per rifacimento sito in veste mobile Offerte e Richieste di Lavoro e/o Collaborazione 4
P Cerco grafico per creazione siti web mobile e tradizionali Webdesign e Grafica 1
S Form e tabella, problema grafico HTML e CSS 2
A [Gratuito] [Cerco] Grafico per progetto Offerte e Richieste di Lavoro e/o Collaborazione 0
L Ultrabook pee grafico Hardware 10
P riproduzione schema grafico MS Access 0
D Cercasi grafico web designer per web app Offerte e Richieste di Lavoro e/o Collaborazione 3
M Aggiornare grafico con i dati inseriti in tabella PHP 0
Sargon grafico-php-mysql PHP 6
M Creazione grafico ad istogrammi con dati estratti da database mysql PHP 5
M Grafico con php PHP 0
L Realizzare script con grafico e tabelle che si aggiornano automaticamente jQuery 1
V [Retribuito] Ricerca grafico/sviluppatore per realizzazione sito web aziendale Offerte e Richieste di Lavoro e/o Collaborazione 0
M Creare un grafico continuamente aggiornato con i dati provenienti da un database PHP 12
A Grafico XY con php PHP 3
M Grafico con php e librerie immagine PHP 2
S [GRATUITO] Per framework, e progetto open Source cercasi programmatore PHP e GRAFICO WEB Designer Offerte e Richieste di Lavoro e/o Collaborazione 1
P grafico php PHP 0
neo996sps Inserire grafico google analytics in pagina PHP Google Analytics 0
S Cercasi grafico per creazione giochi Offerte e Richieste di Lavoro e/o Collaborazione 0
S Cercasi grafico per realizzazione banner grafici compenso Offerte e Richieste di Lavoro e/o Collaborazione 6
S Grafico in Chart.js colonne di colore diverso PHP 0
E ricerca grafico per lavoretti urgenti Offerte e Richieste di Lavoro e/o Collaborazione 0
S Grafico in PhpGraphLib PHP 0
I Cerco collaborazione grafico Offerte e Richieste di Lavoro e/o Collaborazione 0
F [inizialmente gratuito]CERCASI GRAFICO Offerte e Richieste di Lavoro e/o Collaborazione 0
F [Offro Collaborazione Retribuita] Cercasi grafico e programmatore Offerte e Richieste di Lavoro e/o Collaborazione 0
D salvare grafico sul server PHP 1
V Viper Management ricerca WEBMASTER e GRAFICO sede Milano Offerte e Richieste di Lavoro e/o Collaborazione 0
I Cercasi 1 grafico 1 programmatore php Offerte e Richieste di Lavoro e/o Collaborazione 2
C Cercasi programmatore e grafico per Gdr play by chat Offerte e Richieste di Lavoro e/o Collaborazione 0

Discussioni simili