2016/01/31
高精度温度センサLM35を使う(3)
前回に引き続き、今回はファイル保存されたデータをiPadで確認できるようにします。サーバ側のWebアプリは、鈴木憲治共著「PHP逆引きレシピ 第2版」を参考に、Google Chartsを利用して作成しました。大変分かりやすくまとまった参考書です。1〜6行目でデータファイルを読み込み、10行目はGoogle Chartsを使うためのおまじないで、11行以下のスクリプトがグラフ作成の本体です。Google Chartsは機能盛りだくさんで、簡便にデータをグラフ化できるので、何かと使えそうです。
<?php
$data = array();
$fp = fopen('/home/pi/mea.csv', 'r');
while ($row = fgetcsv($fp)) { $data[] = sprintf("['%s', %4.1f] ", $row[0], $row[1]); }
$str = implode(', ' . PHP_EOL, $data);
?>
<html>
<head>
<!-- AJAX API のロード -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Visualization API と折れ線グラフ用のパッケージのロード
google.load("visualization", "1", {packages:["corechart"]});
// Google Visualization API ロード時のコールバック関数の設定
google.setOnLoadCallback(drawChart);
// グラフ作成用のコールバック関数
function drawChart() {
// データテーブルの作成
var data = google.visualization.arrayToDataTable([ ['time', '温度'],
<?= $str; ?>
]);
// グラフのオプションを設定
var options = { title: '室温',
titleTextStyle: {fontSize:16},
hAxis: {title: '時刻'},
vAxis: {title: '気温(℃)', minValue: 20, maxValue: 30},
backgroundColor: '#f1f8e9'
};
// LineChart のオブジェクトの作成
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// データテーブルとオプションを渡して、グラフを描画
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 80%; height: 400px;"></div>
</body>
</html>
