谷歌圖表刷新凍結頁面/ div +內存不足

所以我一直在玩谷歌圖表爲我使用python和web.py的儀表板。我得到它的工作，以顯示一切，因爲我想和技術上它的工作原理。然而谷歌圖表的自動刷新會在ajax調用期間掛起我的頁面，而且由於我在一頁上可能有多個圖表，所以它非常糟糕（獲得1秒的正常移動，然後在凍結的圖表上處理幾秒鐘的時間這一頁）。過了一段時間，它停止工作，並顯示我資源不足錯誤。谷歌圖表刷新凍結頁面/ div +內存不足

有人可以看看下面的代碼，並告訴我哪裏出了問題。請注意，我的ajax調用現在完成異步，它只凍結了div，但仍然出現錯誤。另請注意，代碼來自web.py模板系統，因此有些javascript調用在前面有2個美元符號。

謝謝！

$def with (cpuUsage, nodes) 

<div id="cpu_usage_graphs"> 

</div> 

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

    <script> 
     // load chart lib 
     //google.load('visualization', '1', { 
     // packages: ['corechart'] 
     //}); 
     google.charts.load('current', {packages: ['corechart']}); 

     var nodes = $:nodes; 
     var graphRow = document.getElementById("cpu_usage_graphs"); 
     $$.each(nodes, function(i, node) { 
      graphRow.insertAdjacentHTML('beforeend', '<div class="col-lg-6"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> CPU Usage for Node ' + node.hostName + '</h3></div><div id="CPU_Usage' + node.nodeId + '" class="panel-body"></div></div></div>'); 

      // call drawChart once google charts is loaded 
      google.charts.setOnLoadCallback(drawChart); 

      function drawChart() { 
       // JSONP request 
       var jsonData = $$.ajax({ 
        url: 'http://192.168.1.100:5051/CPU_Usage?node=' + node.nodeId, 
        type: 'GET', 
        async: true, 
        dataType: 'json', 
       }).done(function (results) { 
        var data = new google.visualization.DataTable(); 

        data.addColumn('datetime', 'Time'); 
        data.addColumn('number', 'cpu usage'); 

        $$.each(results[0], function (i, row) { 
         data.addRow([ 
         (new Date(row.timestamp)), 
         parseFloat(row.value), 
         ]); 
         }); 

        var chart = new google.visualization.LineChart($$('#CPU_Usage' + node.nodeId).get(0)); 

        chart.draw(data, { 
         'legend':'left', 
         }); 

        }).fail(function() { 
         console.log("Sorry. Server unavailable. "); 
        }); 
       setInterval(refreshData, 5000); 
       } 

      function refreshData() { 
       drawChart(); 
      } 

      //refreshData(); 
     }); 
    </script> 

    </head> 
    <body> 
    <div id="chart" style="width: 100%;"></div> 
    </body> 
</html>

來源

2016-12-02 Triplus

資源最有可能被抽乾由於setInterval電話

每間隔與下一個干擾的數量和沒有足夠的資源來完成所有這些

此外，谷歌的setOnLoadCallback通常只用於每頁的負載一次，
它不需要第一回調之後完成

推薦放置回調在load語句，而不是

建議設置如下，只有1 setInterval用於重新繪製所有的圖表...

注：5秒似乎有點快開始重新繪製，使推薦足夠的時間讓所有的圖表在開始下一輪之前完成繪圖...

$def with (cpuUsage, nodes) 

<div id="cpu_usage_graphs"> 

</div> 

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

    <script> 
     google.charts.load('current', { 
      callback: function() { 
      var nodes = $:nodes; 
      var graphRow = document.getElementById("cpu_usage_graphs"); 

      function drawCharts() { 
       $$.each(nodes, function(i, node) { 
       if (document.getElementById('CPU_Usage' + node.nodeId) === null) { 
        graphRow.insertAdjacentHTML('beforeend', '<div class="col-lg-6"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> CPU Usage for Node ' + node.hostName + '</h3></div><div id="CPU_Usage' + node.nodeId + '" class="panel-body"></div></div></div>'); 
       } 

       $$.ajax({ 
        url: 'http://192.168.1.100:5051/CPU_Usage?node=' + node.nodeId, 
        type: 'GET', 
        async: true, 
        dataType: 'json', 
       }).done(function (results) { 
        var data = new google.visualization.DataTable(); 

        data.addColumn('datetime', 'Time'); 
        data.addColumn('number', 'cpu usage'); 

        $$.each(results[0], function (i, row) { 
        data.addRow([ 
         (new Date(row.timestamp)), 
         parseFloat(row.value), 
        ]); 
        }); 

        var chart = new google.visualization.LineChart($$('#CPU_Usage' + node.nodeId).get(0)); 
        chart.draw(data, { 
        'legend':'left', 
        }); 
       }).fail(function() { 
        console.log("Sorry. Server unavailable. "); 
       }); 
       }); 
      } 

      drawCharts(); 
      setInterval(drawCharts, 5000); 
      }, 
      packages: ['corechart'] 
     }); 
    </script> 

    </head> 
    <body> 
    <div id="chart" style="width: 100%;"></div> 
    </body> 
</html>

來源

2016-12-02 12:46:21 WhiteHat

在第一眼看來，這似乎工作。我已經實施了，現在也運行了幾分鐘。我會標記爲已解決，並希望沒有問題會回來:) 謝謝！ – Triplus

谷歌圖表刷新凍結頁面/ div +內存不足

回答

相關問題