2020/03/20 部屋の温度を監視したい3 -グラフ化-
部屋の温度を監視したいその３
ここまででデータを格納されるところまでできた。
次はこのデータをわかりやすく可視化するために、グラフ化する。
グラフ化はPHPでSQLiteのデータを読み込み、Chart.jsでグラフ化する。
まずはPHPが使えるようにラズパイにPHPをインストールする。
その後Apache2もインストールし、phpサイトが構築できるようにする。
このへんはネットワークページでも書いてるので割愛。
次にphpのファイルを作成
code:web.php
<?php
$db = null;
$sql = null;
$res = null;
$row = null;
$db = new SQLite3("get_tmp.db");
$sql = "SELECT * FROM data";
$res = $db->query($sql);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>izumin's room Temperature</title>
</head>
<body>
<script>
var insertdate = [];
var inserttemp = [];
var inserthum = [];
<?php while ($row = $res->fetchArray()) { ?>
insertdate.push('<?php echo $row0; ?>'); <?php } ?>
<?php while ($row = $res->fetchArray()) { ?>
inserttemp.push('<?php echo $row1; ?>'); <?php } ?>
<?php while ($row = $res->fetchArray()) { ?>
inserthum.push('<?php echo $row2; ?>'); <?php } ?>
console.log(inserttemp)
console.log(inserthum)
console.log(insertdate)
</script>
<h1>Raspberry Piによる室温監視</h1>
<canvas id="myLineChart"></canvas>
<script src="./javascripts/Chart.bundle.js"></script>
<script>
var ctx = document.getElementById("myLineChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: insertdate,
datasets: [{
label: '室内温度',
data: inserttemp,
borderColor: "rgba(255,78,3,0.9)",
backgroundColor: "rgba(255,78,3,0.1)"
} ,
{
label: '室内湿度',
data: inserthum,
borderColor: "rgba(3,255,217,0.9)",
backgroundColor: "rgba(143,255,233,0.1)"
}
],
},
options: {
title: {
display: true,
text: "izumin's room Temperature"
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 40,
suggestedMin: 0,
}
}]
},
}
});
</script>
<table border="1">
<tr>
<th>日時</th>
<th>室内温度</th>
<th>室内湿度</th>
</tr>
<?php
while ($row = $res->fetchArray()) {
echo '<tr><td>'.$row0.'</td><td>'.$row1.'</td><td>'. $row2. '</td></tr>'; }
?>
</table>
</body>
</html>
まだ細かい設定はしていないが、最低限の表示部分のコードは書いた。
これをドキュメントルートに置くと、、、
https://gyazo.com/3eb6f8b0d4c128103745c5eff7bee6fa
実際に、室内温度がグラフ化できる。
このままでは最初から最後までのグラフになってしまうので
PHPを改修して日付指定ができるようにする。
ちなみに温度が激しく変化しているのは、
窓を開けて窓の近くに置いたから。深夜なのでかなり温度が落ちています。