前回の記事で温度をcsvで一定間隔ごとに保存できたので、それをグラフ化します。
グラフ化は、Google Chartを使うと簡単にできます。
webページで表示したいため、phpでcsvファイルの読み出し&htmlファイルの書き出し、書き出したhtmlファイル中にGoogle chartを記述します。
まず、phpをインストール&アパッチを再起動します。
$ sudo apt-get install php5 $ sudo /etc/init.d/apache2 restart
次に、phpファイルを以下のディレクトリに作成し、パーミッションを変更します。(パーミッションを変更しないと、webページとして表示できないため)
webページで表示したいものは、/var/www以下に置きます。
cd /var/www/ sudo nano home.php chmod 755 home.php
home.phpの中身は記事の最後に書きます。先に進みます。
前回の記事で作製したcsvの中身を、以下のように変更します。というのも、カンマの前は、グラフの横軸とするために、文字列化する必要があります。
ついでに、吐き出すC言語のプログラムも変更しておきましょう。
2015/09/11 00:50:01, 28.250000 ↓ '2015/09/11 00:50:01', 28.250000
で、home.phpの中身を以下のように書きます。(まんまサンプルのままです)
<?php $csv_dir = '/home/pi/shared/work/'; // $csv_file = $today.'.csv'; $csv_file = 'temp.csv'; $grapgh = ''; //CSV読み込み if (($handle = fopen($csv_dir.$csv_file, "r")) !== false) { while (($line = fgets($handle)) !== false) { $grapgh .= '['.rtrim($line).'],'.PHP_EOL; } fclose($handle); }else{ echo 'no data'; } ?> <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={ 'modules':[{ 'name':'visualization', 'version':'1', 'packages':['corechart'] }] }"></script> <script type="text/javascript"> google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['time', 'temperatuer'], <?php echo $grapgh; ?> ]); var options = { title: 'temperature', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </head> <body> <body> <div id="curve_chart" style="width: 900px; height: 500px"></div> </body> </html>
で、PCのwebブラウザで、
http://(ラズパイのアドレス)/home.php
とすると、以下のような表示になります。
帰ってきた時間で窓を開けたので、そこがわかりやすいですね(笑)
見た感じ、実際の温度より、若干高めに出てる気がします。
横軸の表記がえらいことになっているので、何とかしないとですね(笑)
■参考
Line Chart:https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=ja