3
Googleチャートに問題があります。私は今この問題を2、3日間苦労しており、解決策を見つけることができません。Google Chartsを使用したリアルタイムの変更ポイントチャート
私はそれに2行のラインチャートが表示されるのを見ることができるモニタリングシステムを作成するとします。私はJSコードでデータを生成しています（少なくとも現在は）。
私は何が間違っているのか分かりません。私は本当に単純な静的な例では、グラフを表示することができますが、私はグラフにいくつかのデータを追加しようとすると、それは描画を停止します。
"uncaught TypeError: Cannot read property 'length' of undefined"
が、これは私は、チャート、またn番目の異なるエラーに多くのデータを追加する別の方法を試みたn番目の時間である。この現在のバージョンと
エラーがあります。 誰かがGoogleのグラフにデータを追加する方法を知っていれば、聞くのはすばらしいことです。
ありがとうございます。
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>
いや、それは同じファイル気圧にあります。 すべては
タグの末尾にあります。 – Dosentti