Aggiornamento google chart periodicamente

Question

Attualmente ho un grafico google statico visualizzato sulla mia pagina web e mi chiedevo se c'è un modo per aggiornarlo periodicamente? Ad esempio, aggiungere un punto ogni 20 secondi?

Non riesco a trovare alcuna informazione su questo. Si prega di avere avuto uno sguardo al mio codice qui sotto

function drawAltitudeChart(){ 

      var graph = []; 
      downloadUrl("Map.php", function (data){ 
       var xml = data.responseXML; 
       var markers =  xml.documentElement.getElementsByTagName("marker"); 
       var dataTable = new google.visualization.DataTable(); 
       var options = {title:'Altitude (m above sea level)', 
        curveType:'function', 
        legend:{position:'bottom'}, 
        is3d:true  
       }; 
       var chart; 

       for(var i = 0; i<markers.length; i++){ 
        graph[i] = ['', parseInt(markers[i].getAttribute("alt"))]; 
       } 

       dataTable.addColumn('string', 'id'); 
       dataTable.addColumn('number', 'Altitude'); 
       dataTable.addRows(graph); 


       chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
       chart.draw(dataTable, options); 

      }); 
     } 

Answer 1

Per aggiungere un nuovo punto di ogni x secondi ...

for(var i = 0; i<markers.length; i++){ 
        graph[i] = ['', parseInt(markers[i].getAttribute("alt"))]; 
       } 

       var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
       dataTable.addColumn('string', 'id'); 
       dataTable.addColumn('number', 'Altitude'); 

       var array = []; 
       for(var i = 0; i<graph.length; i++){ 
        console.log('in loop'); 
         setTimeout(function(y){ 
         array.push(graph[y]); 
         dataTable.addRows(a);    
         chart.draw(dataTable, options); 
         array = []; 
        }, i*5000, i); 
       } 

Answer 2

Un approccio semplice in base al codice esatto sarebbe:

(function redraw() { 
    drawAltitudeChart(); 
    setTimeout(redraw, 20000); 
})(); 

---

Per una più approfondita e l'approccio personalizzabile: (ho fatto questo avendo solo una conoscenza di base delle API Charts però.)

function AltitudeChart() { 
    this.chart = new google.visualization.LineChart(
     document.getElementById('curve_chart') 
    ); 
} 

AltitudeChart.prototype = { 
    draw: function() { 
     var graph = []; 
     downloadUrl('Map.php', function(data) { 
      var xml  = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      var dataTable = new google.visualization.DataTable(); 
      var options = { 
       title: 'Altitude (m above sea level)', 
       curveType: 'function', 
       legend: { position:'bottom' }, 
       is3d: true  
      }; 

      for (var i = 0; i < markers.length; i++) { 
       graph[i] = ['', parseInt(markers[i].getAttribute("alt"))]; 
      } 

      dataTable.addColumn('string', 'id'); 
      dataTable.addColumn('number', 'Altitude'); 
      dataTable.addRows(graph); 

      this.chart.draw(dataTable, options); 
     }); 
    }, 

    refreshDraw: function() { 
     this.drawTimeout = setTimeout(function() { 
      this.draw(); 
      this.refreshDraw(); // recursive call 
     }.bind(this), 20000); // every 20 seconds 
    } 
}; 

new AltitudeChart().refreshDraw(); 

sono sicuro che c'è un modo migliore per fare questo con un più intimo conoscenza dell'API Charts, ma la logica dovrebbe funzionare.