Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    Chart dinamica con JSON

    Ciao a tutti!
    Sto cercando di inserire dei grafici all'interno di una pagina Web che prende i dati JSON da un server che li trasmette in questo formato:
    [{“key”:0, “value”:20}, {“key”:1, “value”:40}
    , {“key”:3, “value”:50}]

    A questo indirizzo vi è un esempio di "bar chart perfettamente funzionante:
    http://arduinobasics.blogspot.it/201...net-using.html
    Qui il codice:
    https://gist.github.com/ArduinoBasics/bcc517e4e5493654d947#file-arduinobasics-webserver-data-viewer-html


    Vorrei capire come come poter creare un'altro grafico(tipo Line Chart di Google) dinamico che prenda sempre i dati dal server. E' possibile? Ci sto provando in tutti i modi ma non riesco a capire come ha fatto l'autore del progetto. Qualsiasi aiuto mi sarà prezioso grazie in anticipo!

  2. #2
    Sì è possibile, devi usare il tuo linguaggio lato-server per generare il codice Javascript necessario al grafico.

  3. #3
    Quote Originariamente inviata da lucavizzi Visualizza il messaggio
    Sì è possibile, devi usare il tuo linguaggio lato-server per generare il codice Javascript necessario al grafico.
    Potresti farmi un esempio? Google mi dà il seguente codice, ma come lo collego al mio JSON?
    codice HTML:
    <html>
      <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
          google.charts.load('current', {'packages':['corechart']});
          google.charts.setOnLoadCallback(drawChart);
    
          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Year', 'Sales', 'Expenses'],
              ['2004',  1000,      400],
              ['2005',  1170,      460],
              ['2006',  660,       1120],
              ['2007',  1030,      540]
            ]);
    
            var options = {
              title: 'Company Performance',
              curveType: 'function',
              legend: { position: 'bottom' }
            };
    
            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    
            chart.draw(data, options);
          }
        </script>
      </head>
      <body></body>
    </html>
    Ultima modifica di droide94; 15-03-2017 a 00:53

  4. #4
    Devi trasformare il tuo json in questo array bidimensionale:

    codice:
    [
              ['Year', 'Sales', 'Expenses'],
              ['2004',  1000,      400],
              ['2005',  1170,      460],
              ['2006',  660,       1120],
              ['2007',  1030,      540]
            ]
    Il primo array, quello con le etichette, lo definisci staticamente.
    I dati li crei facendo un loop sul tuo json di partenza.

    Dopo averlo creato, lo passi ad arrayToTable, nella funzione drawChart

    codice:
     var data = google.visualization.arrayToDataTable( tuo_array );
    Ultima modifica di lucavizzi; 15-03-2017 a 10:45

  5. #5
    Intanto grazie dell'aiuto. Non mi è chiaro cosa intendi per creare un loop sul json di partenza. Ho provato a modificare una bar-chart con quello che trovavo su internet, ma credo di essere fuori strada.

    codice:
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  <script type="text/javascript">
        var url = 'http://192.168.0.100:80';  
    	  
    	  google.charts.load('current', {'packages':['bar']});
          google.charts.setOnLoadCallback(drawChart);
          var data; 
    	  var chart;
     //////////////////////////////////////////////////////////////     
    	$(document).ready(function(){
    
    
        var i = 0;
    	function requestData(){
    	
        	$.ajax({
    		    url: url,
    		    data: { '': ''}, 
    		    dataType: 'jsonp', 
    		    crossDomain: true, 
    		    jsonp: false,
    		    jsonpCallback: 'dati', 
    		    success: function(data) {
    			
    				$('#sensor1').text(data.sensor1);
    				$('#sensor2').text(data.sensor2);
    				
    				i++;
    				setGrafico(i,data.sensor1,data.sensor2);
    				console.log(data);
    		    }
    		  });
            return false;
        }  
    	  
    	setInterval(requestData, 400);  
        });	  
    	  
    /////////////////////////////////////////////////////////////////	  
    	function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Temperature ed Umidità', 'Temperatura', 'Umidità'],
           //   ['Interno', 1000, 400]
                       
            ]);
    
    
            var options = {
              chart: {
                title: 'Grafico Temperatura e umidità',
                subtitle: 'Interni ed esterni',
              },
              bars: 'horizontal' // Required for Material Bar Charts.
            };
    
    
            
    	function setGrafico(i, sensor1,sensor2){	
    		data.addRow([i,sensor1,sensor2]);
    	    chart = new google.charts.Bar(document.getElementById('barchart_material'));
           	chart.draw(data, options);
    		return false;
    		
          }
    	  
    	</script>
    
        <div id="barchart_material" style="width: 900px; height: 500px;"></div>


    Seguendo un esempio in rete ho modificato il json in questo modo:
    codice:
    dati({sensor1: 0, sensor2: 0})
    Però non ne capisco il funzionamento

    Ultima modifica di droide94; 15-03-2017 a 16:52

  6. #6
    QUalche suggerimento per capire cosa sbaglio?

  7. #7
    up

  8. #8
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,131
    Ritengo che gli up servino a poco, come a detto Luca devi eseguire un ciclo sul json per avere vettore e valore con questi dati crei l'array se non lo sai fare prova a postare entrambi i formati sia l'json che l'array (entrambi i formati meglio se hanno gli stessi vettori e valori) forse trovi qualcuno disposto a farti un esempio.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

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 © 2024 vBulletin Solutions, Inc. All rights reserved.