Периодически обновляю диаграмму Google

Question

В настоящее время у меня есть статическая диаграмма google, отображаемая на моей веб-странице, и мне было интересно, есть ли способ периодически ее обновлять? т. е. добавить точку каждые 20 секунд?

Похоже, что я не могу найти информацию об этом. Пожалуйста, пришлось взглянуть на мой код ниже

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

Для добавления новой точки каждые х секунд ...

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

Простой подход, основанный на ваш точный код будет:

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

---

Для более углубленного и настраиваемый подход: (я сделал это имея лишь базовые знания о Charts API, хотя.)

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

Я уверен, что есть лучший способ сделать это с более близкими знание API диаграмм, но логика должна работать.