定期更新谷歌圖表

我目前有一個靜態的谷歌圖表顯示在我的網頁上，並想知道是否有方法定期更新它？即每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); 

      }); 
     }

來源

2015-09-07 fst104

究竟如何你需要修改數據？每20秒鐘新點將從哪裏來？聽起來像你只需要添加一個新的行到'DataTable'並重新繪製'chart' ...？ – WhiteHat

@WhiteHat - 我想每隔20秒從數據庫中提取一個新點... – fst104

提供的答案沒有幫助嗎？你會使用'downloadUrl'和'Map.php'來獲取新點嗎？你在那裏好嗎？ setTimeout（function（y）{ graph [y] = [''，parseInt（markers [y] .getAttribute（「alt」））]用於（var i = 0; i WhiteHat

對於添加每x秒一個新的起點......

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

來源

2015-09-09 16:05:16 fst104

根據您的具體代碼的簡單方法是：

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

爲了更深入和可定製的方法：（我做雖然只有基礎知識的圖表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的知識，但邏輯應該工作。

來源

2015-09-07 15:22:15

這看起來很好，從原始來源清爽，這是有點矯枉過正，但應該工作，如你所說。要求不明確。順便說一句，我想你錯過了'圖'的聲明...... – WhiteHat

@WhiteHat的確，我做到了，謝謝你。也許是矯枉過正，但如果他打算用這些做更多的話，那麼這種方法是一個不錯的選擇。感謝您的反饋。 –

定期更新谷歌圖表

回答

相關問題