與谷歌圖表實時更改點圖表

我有一個谷歌圖表的問題。我已經爲這個問題掙扎了兩天了，而且我似乎無法找到解決方案。與谷歌圖表實時更改點圖表

我想創建一個監控系統，我可以看到其中有兩條線的變化折線圖。我在JS代碼中生成數據（至少現在）。

我不知道我在做什麼錯。我可以通過非常簡單的靜態示例使圖表可見，但只要我試圖將一些數據添加到圖表中就會停止繪圖。

錯誤與此目前的版本是：

"uncaught TypeError: Cannot read property 'length' of undefined"

但是這是第n次我曾嘗試添加更多數據到圖表和第n也不同的錯誤的不同方法。所以，如果有人知道如何將數據添加到谷歌圖表的作品，它會很高興聽到。

在此先感謝。

setInterval(function() { 
 
    //this is how I create a random data and call the drawChart function. 
 
    var temperature = (Math.random() * (35 - 30) + 30).toFixed(1), 
 
     humidity = (Math.random() * (40 - 15) + 15).toFixed(1), 
 
     timestamp = new Date(); 
 
    google.charts.setOnLoadCallback(drawChart(timestamp, temperature, humidity)); 
 
}, 5000); 
 

 
function drawChart(timestamp, temperature, humidity) { 
 
    //Cast temperature to proper format for the chart 
 
    //This works...don't understand why but it does. 
 
    temperature = parseFloat("temperature"); 
 
    humidity = parseFloat("humidity"); 
 

 
    // Define the chart to be drawn. 
 
    var data = new google.visualization.DataTable(); 
 

 
    if (data[0].length == 0) { 
 
    var datetime = new Date(); 
 
    data.addColumn('datetime', 'Time'); 
 
    data.addColumn('number', 'Temperature'); 
 
    data.addColumn('number', 'Humidity'); 
 
    data.addRow(datetime, 0, 0); 
 

 
    var options = { 
 
     'title' : 'Temperature and Humidity', 
 
     hAxis: {title: 'Time'}, 
 
     vAxis: {title: 'Temperature and Humidity'}, 
 
     'width':550, 
 
     'height':400 \t 
 
    }; 
 
    } 
 
    data.addRow(timestamp, temperature, humidity); 
 
    // Instantiate and draw the chart. 
 
    var chart = new google.visualization.LineChart(document.getElementById('monitor-chart')); 
 
    chart.draw(data, options); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
 
    <title>Projekti 1, sivusto</title> 
 

 
    <!-- Latest BOOTSTRAP minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
 

 
    <!-- jQuery library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
    <!-- Latest BOOTSTRAP JC--> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    <!-- JS Generate new data Class --> 
 
    <script type="text/javascript" src="js/generate_data.js"></script> 
 

 
    <!-- GOOGLE CHARTS visualization --> 
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <script type="text/javascript"> 
 
     google.charts.load('current', {packages: ['corechart','line']}); 
 
    </script> 
 

 
    <!-- My css file --> 
 
    <link rel="stylesheet" type="text/css" href="css/ulkoasu.css"/> 
 

 
    </head> 
 
    <body> 
 
    <article> 
 
     <h1>This is Monitor content</h1> 
 
     <div id="monitor-data"></div> 
 
     <div id="monitor-chart"></div> 
 
    </article> 
 
    </body> 
 
</html>

來源

2016-12-02 Dosentti

不，它在同一個文件大氣壓。一切都在結尾標籤。 – Dosentti

第一，爲setOnLoadCallback的說法應該是一個函數的引用，類似如下...

google.charts.setOnLoadCallback(drawChart);

不是一個函數調用的結果 ...

google.charts.setOnLoadCallback(drawChart(timestamp, temperature, humidity));

和setOnLoadCallback通常只用於每頁的負載一次，
回調後完成了第一次，這種方法不再需要

無論如何，callback可以被添加到所述load語句
setOnLoadCallback是不是真的需要

其他錯誤包括使用addRow - >data.addRow(timestamp, temperature, humidity);

列值應在陣列中傳遞...

data.addRow([timestamp, temperature, humidity]);

推薦類似於設置以下 - 回調時火災，
所有資源，圖表等，選項和數據表中創建

drawChart被簡單地用於添加一行並繪製圖表

請參閱以下工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var chart = new google.visualization.LineChart(document.getElementById('monitor-chart')); 
 

 
    var options = {'title' : 'Temperature and Humidity', 
 
     animation: { 
 
     duration: 1000, 
 
     easing: 'out', 
 
     startup: true 
 
     }, 
 
     hAxis: { 
 
     title: 'Time' 
 
     }, 
 
     vAxis: { 
 
     title: 'Temperature and Humidity' 
 
     }, 
 
     height: 400 
 
    }; 
 

 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('datetime', 'Time'); 
 
    data.addColumn('number', 'Temperature'); 
 
    data.addColumn('number', 'Humidity'); 
 

 
    var formatDate = new google.visualization.DateFormat({pattern: 'hh:mm:ss'}); 
 
    var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.0'}); 
 

 
    getTemp(); 
 
    setInterval(getTemp, 5000); 
 
    function getTemp() { 
 
     var temperature = (Math.random() * (35 - 30) + 30); 
 
     var humidity = (Math.random() * (40 - 15) + 15); 
 
     var timestamp = new Date(); 
 
     drawChart(timestamp, temperature, humidity); 
 
    } 
 

 
    function drawChart(timestamp, temperature, humidity) { 
 
     data.addRow([timestamp, temperature, humidity]); 
 

 
     formatDate.format(data, 0); 
 
     formatNumber.format(data, 1); 
 
     formatNumber.format(data, 2); 
 

 
     chart.draw(data, options); 
 
    } 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="monitor-chart"></div>

來源

2016-12-02 13:28:47 WhiteHat

這正是我想要做的！非常感謝！仍然不明白前兩行，但我想我必須谷歌google.charts.load的東西。關於你說的data.AddRow應該是數組格式.. 我在官方文檔中讀到data.AddRows應該是數組格式，但有一個例子，其中data.AddRow的寫法與我在我的代碼中一樣。我想這只是在文檔中的錯誤。 – Dosentti

['addRow']（https://developers.google.com/chart/interactive/docs/reference#addrow）需要一個數組'[col1，col2]' - ['addRows']（https：//開發人員.google.com/chart/interactive/docs/reference＃DataTable_addRows）接受一組數組''[[col1，col2]，[col1，col2]]' – WhiteHat

與谷歌圖表實時更改點圖表

回答

相關問題