Aktualizowanie wykresu Google okresowo

Question

Mam obecnie statyczny wykres google wyświetlający się na mojej stronie internetowej i zastanawiałem się, czy istnieje sposób na jej aktualizację okresową? tj. dodać punkt co 20 sekund?

Nie mogę znaleźć żadnych informacji na ten temat. Proszę mieli do obejrzenia mojego kodu poniżej

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

Aby dodać nowy punkt co X sekund ...

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

proste podejście oparte na dokładnym kodu będzie:

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

---

Dla bardziej dogłębne i konfigurowalny podejścia: (zrobiłem to ma tylko podstawową wiedzę z API wykresów.)

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(); 

Jestem pewien, że jest lepszy sposób na zrobienie tego z bardziej intymnym znajomość API wykresów, ale logika powinna działać.