温湿度データをグラフ表示する

前回、ESP-WROOM-02からWebサーバーに温湿度データを取り込むことが出来ました。

今回は、取り込んだデータをグラフに表示します。

※11/16追記

プログラム部分はスマホでは正しく表示されません。

プログラムをご利用の方はPCでご確認下さい。m(_ _ )m

index.html

今回はhtmlとJavaScriptを使います。

プログラムは全部index.htmlに書きました。笑

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="../lib/jquery/js/jquery-1.11.0.min.js"></script>

<title>温湿度管理</title>

</head>
<body>

</body>
</html>

基本はこれだけ　

datepickerを使う

IEでdateタグが使えないけれど、日付指定をカレンダークリックで行いたいのでdatepickerを使います。

日付データはグローバル変数に入れます。

datepickerの準備と変数宣言

var selDate;

日付がクリックされたときテキストボックスに表示する表示形式を指定しています。csvファイル名に合わせておけばそのまま利用できます。

日付の表示形式を指定

   $(function(){
    $("#datepicker").datepicker({
     dateFormat: 'yymmdd'
    });
   });

日付テキストボックスの日付が変わったときに呼び出される関数です。

日付が変わったとき

   function dateChange(){
    //日付テキストボックスの内容を取得する
    selDate = document.getElementById("datepicker").value;
    //グラフを再描画する
    getCSVFile();
   }

ブラウザが開かれたときに実行される関数です。

今日の日付を日付テキストボックスに登録し、csvファイルを読みます。

setIntervalで1分毎にcsvファイルを読むようにしています。

onload

csvファイル読み込み

データをグラフに渡すための配列をグローバル変数にしています。

ここでは、csvArray[i][]のデータ数は指定しません。

グローバル配列を初期化してXMLHttpRequestでサーバー上のcsvファイルを読み込みます。

読み込みが終わったら、配列に登録しグラフを描画します。

csvファイルはindex.htmlと同じフォルダにあります。

csvデータ読み込み

   var csvArray = new Array(3);
   for(i=0; i<3; i++){
    csvArray[i] = new Array();
   }

   function createXMLHttpRequest() {
    var XMLhttpObject = null;
    XMLhttpObject = new XMLHttpRequest();
    return XMLhttpObject;
   }

csvデータをグローバル配列に登録しています。

大量のデータを扱うときは特に配列の初期化を行っておきましょう。

csvデータを配列に登録

Chart.jsを使う

Chart.jsを使って1分毎にグラフを更新します。

Chart.jsはブラウザ画面を拡大・縮小すると勝手に拡大・縮小してくれるので便利です。

グラフを描画する関数です。配列がそのままデータとして利用できます。

グラフ描画

<script

src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js>

</script>

　function draw(){
    var lineChartData = {
     labels: csvArray[0],
     datasets: [{
      label: 'Temperature',
      borderColor: "rgba(255,0,0,1)",
      backgroundColor: "rgba(255,0,0,1)",
      fill: false,
      lineTension: 0,
      pointRadius: 0,
      data: csvArray[1],
      yAxisID: "y-axis-1",
     }, {
      label: 'Humidity',
      borderColor: "rgba(0,0,255,1)",
      backgroundColor: "rgba(0,0,255,1)",
      fill: false,
      lineTension: 0,
      pointRadius: 0,
      data: csvArray[2],
      yAxisID: "y-axis-2"
     }]
    };
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
     type: 'line',
     data: lineChartData,
     options: {
      responsive: true,
      hoverMode: 'index',
      stacked: false,
      title:{
       display: true,
       text:'Temp-Humid Sensor1'
      },
      scales: {
       yAxes: [{
        type: "linear",
        display: true,
        position: "left",
        id: "y-axis-1",
        scaleLabel:{
         display:true,
         labelString:"Tempture(℃)",
         fontSize:10
        }
       }, {
        type: "linear",
        display: true,
        position: "right",
        id: "y-axis-2",
        scaleLabel:{
         display:true,
         labelString:"Humidity(%)",
         fontSize:10
        },

        // grid line settings
        gridLines: {
         drawOnChartArea: false, // only want the grid lines for one axis to show up
        },
       }],
      }
     }
    });
   };

Y軸の設定yAxisで軸見出しscaleLabelを付けています。これ、ネット上を探してもほとんど出てこないので貴重です。　笑

Y軸見出し

        scaleLabel:{
         display:true,
         labelString:"Tempture(℃)",
         fontSize:10
        }

Chart.jsはCanvasを使っているのでcanvasのスタイルです。

canvasのstyle

bodyの中は2行だけ

canvasを表示するエリアと、日付を選ぶテキストボックスだけです。

bodyの中

一連のプログラムを掲載しておきます。

index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script type="text/javascript" src="../lib/jquery/js/jquery-1.11.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
  <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/blitzer/jquery-ui.css" rel="stylesheet" />
  <title>温湿度管理</title>
  <script type="text/javascript">

   //グローバル変数
   var csvArray = new Array(3);
   for(i=0; i<3; i++){
    csvArray[i] = new Array();
   }
   var selDate;

   $(function(){
    $("#datepicker").datepicker({
     dateFormat: 'yymmdd'
    });
   });

   function createXMLHttpRequest() {
    var XMLhttpObject = null;
    XMLhttpObject = new XMLHttpRequest();
    return XMLhttpObject;
   }

        // grid line settings
        gridLines: {
         drawOnChartArea: false, // only want the grid lines for one axis to show up
        },
       }],
      }
     }
    });
   };

   function dateChange(){
    //日付テキストボックスの内容を取得する
    selDate = document.getElementById("datepicker").value;
    //グラフを再描画する
    getCSVFile();
   }

window.onload = function(){
    //今日の日付
    var hiduke = new Date();
    var year = hiduke.getFullYear();
    var month = hiduke.getMonth()+1;
    var day = hiduke.getDate();
    selDate = year.toString() + ("0" + month.toString()).substr(-2) + ("0" + day.toString()).substr(-2);
    document.getElementById("datepicker").value = selDate;
    getCSVFile();
    //1分ごとに更新する
    setInterval("getCSVFile()", 60000);
   };

  </script>
  <style>
   canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
   }
  </style>
</head>
<body>
  <div id="main_box">
   <canvas id="myChart" width="400" height="100"></canvas>
   <p style="font-size:12px">年月日：<input type="text" id="datepicker" onchange="dateChange()"></p>
  </div> 
</body>
</html>

以上で今回やりたかった『AM2302の温湿度データをWifiで飛ばしてローカルPCでグラフ表示する』記事が完成です。

後は、今ブレッドボードにある部品を基板に移して箱に詰めれば終了です。そのうち「PICを試してみる」のページに写真アップします。笑

この温湿度データをクラウドに飛ばして解析して何かアクションを起こせばIoTって言うのでしょうね。

MENUに戻る

お決まりですが、

今回の連載の著作権は放棄しておりません。

ご利用頂くのは自由ですが、このサイトにリンクを張って頂けると管理人が喜びます。

この連載を通してご利用頂いた結果不利益が生じても私は知りません。笑

では、ご利用下さい。(｡･ω･)ﾉﾞ