Watson IoT Platform - DBから取得したIoTデータを表示します

初めてWatson IoT Platformを使ってみよう、というかたのためのガイドです。
[Watson IoT Platformを使ってみる](http://qiita.com/egplnt/items/af867711a7191923b2ff)でIoTアプリを準備しました。
[IoTダッシュボードを作ってみる](http://qiita.com/egplnt/items/141bd5d9b17ba02e526b)でIoTデータを可視化するダッシュボードを作っていきます。

# DBから取得したデータを可視化します
- ここでは[Watson IoT Platform - 直接dashDBへデータを格納する](http://qiita.com/egplnt/items/2c911b7618517ebe9ba2)の「サンプル３：Alps IoT Smart ModuleからのIoTデータを指定した間隔でdashDBへ書き込む」などで取得し保存したdashDB内のAlps Smart IoT Moduleの照度（AmbientLight)値を表示してみます
- 下記のフローをコピペします
![スクリーンショット 2017-02-15 14.41.53.png](https://qiita-image-store.s3.amazonaws.com/0/125842/229fd153-5c7d-6061-9d10-5891344d07bc.png)



```lang:DBから取得したデータを可視化
[{"id":"bc8571eb.520da8","type":"http in","z":"b0ed7852.d58f08","name":"","url":"/test503","method":"get","swaggerDoc":"","x":110,"y":660,"wires":[["77ff7f6b.b3584"]]},{"id":"4089dbfc.b10504","type":"comment","z":"b0ed7852.d58f08","name":"DBから値を取得し表示","info":"","x":120,"y":620,"wires":[]},{"id":"77ff7f6b.b3584","type":"function","z":"b0ed7852.d58f08","name":"時間をセット","func":"var arr1 = msg.payload.starttime.split(/[T]/);\nmsg.starttime = arr1[0] + \" \" + arr1[1] + \":00\";\nvar st_parse = msg.starttime.replace(/-/g, '/');\nmsg.newstarttime = Date.parse(st_parse) / 1000;\n\nvar arr2 = msg.payload.endtime.split(/[T]/);\nmsg.endtime = arr2[0] + \" \" + arr2[1] + \":00\";\nvar et_parse = msg.endtime.replace(/-/g, '/');\nmsg.newendtime = Date.parse(et_parse) / 1000;\n\nreturn msg;","outputs":1,"noerr":0,"x":280,"y":660,"wires":[["d2ff44a3.211098"]]},{"id":"992c0c61.5d551","type":"function","z":"b0ed7852.d58f08","name":"結果をセット","func":"var i = 0;\nvar len = msg.payload.length;\nvar arr01 = new Array();\n\nfor (i; i < len; i++) {\n    var c1 = i;\n    arr01.push([c1,parseFloat(msg.payload[i]['AMBIENTLIGHT'])]);\n}\n\nmsg.payload.r01 = JSON.stringify(arr01);\n\nreturn msg;\n","outputs":1,"noerr":0,"x":600,"y":660,"wires":[["2163ea48.fee726"]]},{"id":"2c9ff304.95fee4","type":"template","z":"b0ed7852.d58f08","name":"test503.html返却","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"  <!DOCTYPE HTML>\n  <html>\n  　<head>\n  　　<title>IoT Sample Dashboard</title>\n  　　<meta charset=\"utf-8\" />\n  <script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>\n  <script type=\"test/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"></script>\n\n  <style type=\"text/css\">\n    {{{payload.css}}}\n  </style>\n  </head>\n  <body>\n\n    <div id='basic'>\n\n      <div id='a1'>\n        <h2>IoT Sample Dashboard</h2><br>\n          データベースに保存されたIoTデータを可視化します\n      </div>\n\n      <div id='c1'>\n      <b>入力！</b>\n        <P>表示対象の属性と期間を指定します。</P>\n        <form action=\"http://このIoTアプリの名前.mybluemix.net/test503\" method=\"get\">\n            この日時から <input type=\"datetime-local\" name=\"starttime\" value=\"2017-02-15T10:00\" step=\"60\"  style=\"font-size:18px\"><br>\n            この日時まで  <input type=\"datetime-local\" name=\"endtime\" value=\"2017-02-15T16:00\" step=\"60\"  style=\"font-size:18px \"><br><br>\n        <button type=\"submit\" name=\"submit\" value=\"送信\">\n        <font size=\"2\">表示要求を</font><font size=\"5\" color=\"red\">送信！</font>\n        </button>\n        <INPUT type=\"reset\" value=\"リセット\"><BR><BR>\n        </FORM>\n\n      </div>\n\n      <div id='d1' align=\"center\">\n        d1\n      </div>\n      <div id='d2' align=\"center\">\n        d2\n      </div>\n      <div id='d3' align=\"center\">\n        d3\n      </div>\n\n      <div id='e1' align=\"center\">\n        e1\n      </div>\n      <div id='e2' align=\"center\">\n        e2\n      </div>\n      <div id='e3' align=\"center\">\n        e3\n      </div>\n\n      <div id='f1' align=\"center\">\n        f1\n      </div>\n      <div id='f2' align=\"center\">\n        f2\n      </div>\n      <div id='f3' align=\"center\">\n        f3\n      </div>\n\n      <div id='g1' align=\"center\">\n        g1\n      </div>\n      <div id='g2' align=\"center\">\n        g2\n      </div>\n      <div id='g3' align=\"center\">\n        g3\n      </div>\n<!---\n      <div id='h1' align=\"left\">\n        <h3>アラート</h3>\n      </div>\n      <div id='j1' align=\"center\">\n\n      </div>\n--->\n  <div id=\"y1\">\n    参考URL\n    <ul>\n      <li><a href=\"http://qiita.com/egplnt/items/af867711a7191923b2ff\">Watson IoT Platformを使ってみる</a></li>\n      <li><a href=\"https://internetofthings.ibmcloud.com/#/\">Watson IoT Platform</a></li>\n      <li><a href=\"https://developer.ibm.com/recipes/tutorials/use-the-simulated-device-to-experience-the-iot-foundation/\">Recipe - Simulator</a></li>\n    </ul>\n    マニュアル\n    <ul>\n      <li><a href=\"http://ibm.com/iot\">IBM IoT</a></li>\n      <li><a href=\"https://docs.internetofthings.ibmcloud.com/ja/\">Watson IoT Platform資料ページ</a></li>\n      <li><a href=\"https://developer.ibm.com/recipes/\">Recipe</a></li>\n    </ul>\n  </div>\n\n  <div id=\"z1\">\n  \tcopyright (c) abc.com All rights reserved.\n  </div>\n  </div>\n\n\n  <script>\n\n  google.load(\"visualization\", \"1\", {packages:[\"corechart\"]});\n  google.setOnLoadCallback(drawChart02);\n\n  function drawChart02() {\n    d1ChartData = google.visualization.arrayToDataTable(\n      [[\"INCOMING_EVENT_CD\",\"照度\"],[439,7.0007]] );\n    d1ChartData.removeRow(0);\n    d1ChartData.addRows( {{{ payload.r01 }}} );\n    d1ChartOptions = { title: '照度',\n      'titleTextStyle': { fontName: 'Meiryo UI', fontSize: 30},\n      legend: { position: 'bottom' } };\n    d1Chart = new google.visualization.LineChart(document.getElementById('d1'));\n    d1Chart.draw(d1ChartData, d1ChartOptions);\n\n\n  };\n\n  </script>\n\n  </body>\n  </html>\n","x":930,"y":660,"wires":[["c41160e2.8e019"]]},{"id":"c41160e2.8e019","type":"http response","z":"b0ed7852.d58f08","name":"","x":1090,"y":660,"wires":[]},{"id":"16e866f0.3e6909","type":"debug","z":"b0ed7852.d58f08","name":"","active":true,"console":"false","complete":"false","x":550,"y":700,"wires":[]},{"id":"2163ea48.fee726","type":"template","z":"b0ed7852.d58f08","name":"css503","field":"payload.css","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"#basic {\n}\n\n#a1 {\n  background-color:  #98d98e;\n  height: 120px;\n  padding: 20px;\n}\n#b1 {\n  background-color:  #e4de8a;\n  padding-left: 20px;\n  height: 40px;\n  text-align:left;\n  font-size: 18pt\n}\n#c1 {\n  background-color:  #cee4ae;\n  height: 300px;\n  text-align:left;\n  font-size: 18pt;\n  padding: 20px;\n  font-family: Meiryo;\n}\n\n#d1 {\n  clear: both;\n  float: left;\n  width: 400px;\n  height: 400px;\n  background-color:  #c1d8ac;\n}\n#d2 {\n  float: left;\n  width: 400px;\n  height: 400px;\n  background-color:  #b9d08b;\n}\n#d3 {\n  float: left;\n  width: 400px;\n  height: 400px;\n  background-color:  #badcad;\n}\n\n#e1 {\n  clear: both;\n  float: left;\n  width: 400px;\n  height: 400px;\n  background-color:  #c1d8ac;\n}\n#e2 {\n  float: left;\n  width: 400px;\n  height: 400px;\n  background-color:  #b9d08b;\n}\n#e3 {\n  float: left;\n  width: 400px;\n  height: 400px;\n  background-color:  #badcad;\n}\n\n#f1 {\n  clear: both;\n  float: left;\n  width: 400px;\n  height: 400px;\n  background-color:  #c1d8ac;\n}\n#f2 {\n  float: left;\n  width: 400px;\n  height: 400px;\n  background-color:  #b9d08b;\n}\n#f3 {\n  float: left;\n  width: 400px;\n  height: 400px;\n  background-color:  #badcad;\n}\n\n#g1 {\n  clear: both;\n  float: left;\n  width: 400px;\n  height: 400px;\n  background-color:  #c1d8ac;\n}\n#g2 {\n  float: left;\n  width: 400px;\n  height: 400px;\n  background-color:  #b9d08b;\n}\n#g3 {\n  float: left;\n  width: 400px;\n  height: 400px;\n  background-color:  #badcad;\n}\n\n#v1 {\n  clear: both;\n  height: 100px;\n  background-color:  #aacf53;\n}\n#x1 {\n  clear: both;\n  height: 100px;\n  background-color:  #c1d8ac;\n}\n\n#y1 {\n  clear: both;\n  background-color: #e4dc8a;\n  padding-left: 10px;\n  height: 250px;\n}\n#z1 {\n  height: 25px;\n  background-color: #8f8667;\n  font-size: 18px;\n  text-align: center;\n}\n","x":760,"y":660,"wires":[["2c9ff304.95fee4"]]},{"id":"d2ff44a3.211098","type":"dashDB in","z":"b0ed7852.d58f08","dashDB":"","service":"_ext_","query":"select AMBIENTLIGHT from ALPSIOT\nwhere date between ? and ?;","params":"msg.newstarttime,msg.newendtime","name":"ALPSIOT","x":440,"y":660,"wires":[["992c0c61.5d551","16e866f0.3e6909"]]}]

```

- 「ALPSIOT」dashDBノードをこのアプリが接続しているdashDBインスタンスに合わせて変更します


- 「test503.htmlを返す」テンプレートノードの２５行目の`<form action="http://このIoTアプリの名前.mybluemix.net/test503" method="get">`をアプリ名に合わせて変更します


- 無事「AmbientLight」(照度）が表示されました。加速度や気圧など他の値も空いている欄に表示していきます

![スクリーンショット 2017-02-15 14.54.07.png](https://qiita-image-store.s3.amazonaws.com/0/125842/85bdd167-55b9-6002-a6a1-8ef0422e8a4b.png)