IoTのダッシュボードを作ってみます
MySQLデータベースに保存しておいた値を表示させます。
データベースに保存した値を表示
-同様に、Node-REDで新しいタブ（ページ）を開き、下記のフローをコピペします
データベースに保存された値を表示
[{"id":"413dce87.8066e","type":"debug","z":"2ff1132c.0fa09c","name":"","active":true,"console":"false","complete":"false","x":790,"y":220,"wires":[]},{"id":"f68974df.6ed77","type":"mysql","z":"2ff1132c.0fa09c","mydb":"ba7df234.dd3768","name":"","x":630,"y":220,"wires":[["413dce87.8066e","7f0af6a3.d56558"]]},{"id":"acbb877b.a886f","type":"inject","z":"2ff1132c.0fa09c","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":140,"y":80,"wires":[["fb9fc0d2.a3de98"]]},{"id":"fb9fc0d2.a3de98","type":"function","z":"2ff1132c.0fa09c","name":"データ生成","func":"// 1〜10の整数値\nd1 = Math.floor( Math.random() * 11 ) ;\n// 1〜100の整数値\nd2 = Math.floor( Math.random() * 101 ) ;\n// 1〜1000の整数値\nd3 = Math.floor( Math.random() * 1001 ) ;\n// 1〜10のx.x\nd4 = Math.floor( Math.random() * 101 ) / 10 ;\n// 1〜100のxx.x\nd5 = Math.floor( Math.random() * 1001 ) / 10;\n// 1〜1000のxx.x\nd6 = Math.floor( Math.random() * 10001 ) / 10;\n// 5〜15のx.x\nd7 = Math.floor( Math.random() * 101 ) / 10 + 5 ;\n// 21〜120のxx.x\nd8 = Math.floor( Math.random() * 1001 ) / 10 + 20;\n// 801〜1800のxx.x\nd9 = Math.floor( Math.random() * 10001 ) / 10 + 800;\n\n//var date = new Date();\n//var ts = Math.floor(date.getTime() / 1000);\n//var ts = new Date().toISOString().slice(0, 19).replace('T', ' ');\n\nvar tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds\nvar dt = (new Date(Date.now() - tzoffset)).toISOString().slice(0,19).replace('T', ' ');\n\nvar d = new Date();\nvar ts = d.getTime();\n\ndata = [dt, ts, d1, d2, d3, d4, d5, d6, d7, d8, d9];\nmsg.payload = data;\nmsg.topic = \"insert into table02 (DT, TS, D1, D2, D3, D4, D5, D6, D7, D8, D9) values ('\" + dt + \"', \" + ts + \", \" + d1 + \", \" + d2 + \", \" + d3 + \", \" + d4 + \", \" + d5 + \", \" + d6 + \", \" + d7 + \", \" + d8 + \", \" + d9 + \");\";\nreturn msg;\n","outputs":1,"noerr":0,"x":290,"y":80,"wires":[["8b7c0944.d14b7","f68974df.6ed77"]]},{"id":"8b7c0944.d14b7","type":"debug","z":"2ff1132c.0fa09c","name":"","active":true,"console":"false","complete":"payload","x":490,"y":80,"wires":[]},{"id":"3838b8c4.229198","type":"function","z":"2ff1132c.0fa09c","name":"select文を発行","func":"msg.topic = \"select * from table02 where ts between '2017-07-16 00:00:00' and '2017-07-16 23:59:59'\";\nreturn msg;","outputs":1,"noerr":0,"x":300,"y":160,"wires":[["f68974df.6ed77"]]},{"id":"edb634a8.548088","type":"inject","z":"2ff1132c.0fa09c","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":140,"y":160,"wires":[["3838b8c4.229198"]]},{"id":"eae5bf28.5df4c8","type":"http in","z":"2ff1132c.0fa09c","name":"","url":"/test30","method":"get","upload":false,"swaggerDoc":"","x":130,"y":280,"wires":[["a4422c19.013cd"]]},{"id":"225bf611.85c4e2","type":"http response","z":"2ff1132c.0fa09c","name":"","x":470,"y":280,"wires":[]},{"id":"a4422c19.013cd","type":"template","z":"2ff1132c.0fa09c","name":"test30.htmlを返す","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n<head>\n <title>IoT Quick 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\n <style type=\"text/css\">\n #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 .y1 {\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\n </style>\n</head>\n<body>\n\n <div id='basic'>\n\n <div class='a1'>\n <h2>IoT Quick Dashboard</h2><br>\n データベースに保存されたIoTデータを可視化します\n </div>\n\n <div class='b1'>\n 時刻\n <span id=\"timedata\"></span>\n <form method=\"get\" action=\"http://localhost:1880/test10\" style=\"display: inline\">\n <button type=\"submit\" name=\"submit\" value=\"送信\" style=\"background-color:#bcbcff\" >\n <font size=\"2\">リアルタイム全体表示へ</font>\n </button>\n </form>\n <form method=\"get\" action=\"http://localhost:1880/test20\" style=\"display: inline\">\n <button type=\"submit\" name=\"submit\" value=\"送信\" style=\"background-color:#bcbcff\" >\n <font size=\"2\">個別データ表示へ</font>\n </button>\n </form>\n </div>\n\n <div class='c1'>\n <b>入力！</b>\n <P>表示対象の期間を指定します。</P>\n <form action=\"http://localhost:1880/test32\" method=\"get\">\n この日時から <input type=\"datetime-local\" name=\"starttime\" value=\"2017-07-15T10:00\" step=\"60\" style=\"font-size:18px\"><br>\n この日時まで <input type=\"datetime-local\" name=\"endtime\" value=\"2017-07-17T10:10\" 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\n\n\n <div class=\"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 class=\"z1\">\n copyright (c) abc.com All right reserved.\n </div>\n </div>\n\n </body>\n </html>\n","x":310,"y":280,"wires":[["225bf611.85c4e2"]]},{"id":"6a1b9dff.d5dc7c","type":"http in","z":"2ff1132c.0fa09c","name":"","url":"/test32","method":"get","upload":false,"swaggerDoc":"","x":130,"y":360,"wires":[["433de1e0.24b3b"]]},{"id":"d3117f60.5ae008","type":"comment","z":"2ff1132c.0fa09c","name":"DBから値を取得し表示","info":"","x":140,"y":320,"wires":[]},{"id":"660d57b2.b046","type":"comment","z":"2ff1132c.0fa09c","name":"表示する属性と期間を指定","info":"","x":150,"y":240,"wires":[]},{"id":"433de1e0.24b3b","type":"function","z":"2ff1132c.0fa09c","name":"時間を取得","func":"msg.tgt = msg.payload.tgt;\n\nvar arr1 = msg.payload.starttime.split(/[T]/);\nmsg.starttime = arr1[0] + \" \" + arr1[1] + \":00\";\n\nvar arr2 = msg.payload.endtime.split(/[T]/);\nmsg.endtime = arr2[0] + \" \" + arr2[1] + \":00\";\n\nmsg.machine = msg.payload.machine;\n\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":360,"wires":[["4fb3bee.ce73f4","7fa42bed.5be5bc","59d7def.f5eaea"]]},{"id":"d1b0520a.3c25c8","type":"template","z":"2ff1132c.0fa09c","name":"test32.htmlを返す","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n <head>\n <title>IoT Quick 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\n<style type=\"text/css\">\n#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 height: 100px;\n background-color: #c1d8ac;\n}\n\n.y1 {\n background-color: #e4dc8a;\n padding-left: 10px;\n height: 300px;\n}\n.z1 {\n height: 25px;\n background-color: #8f8667;\n font-size: 18px;\n text-align: center;\n}\n\n</style>\n </head>\n <body>\n\n <div id='basic'>\n\n <div class='a1'>\n <h2>IoT Quick Dashboard</h2><br>\n データベースに保存されたIoTデータを可視化します\n </div>\n\n <div class='b1'>\n 時刻\n <span id=\"timedata\"></span>\n <form method=\"get\" action=\"http://localhost:1880/test10\" style=\"display: inline\">\n <button type=\"submit\" name=\"submit\" value=\"送信\" style=\"background-color:#bcbcff\" >\n <font size=\"2\">リアルタイム全体表示へ</font>\n </button>\n </form>\n <form method=\"get\" action=\"http://localhost:1880/test20\" style=\"display: inline\">\n <button type=\"submit\" name=\"submit\" value=\"送信\" style=\"background-color:#bcbcff\" >\n <font size=\"2\">個別データ表示へ</font>\n </button>\n </form>\n </div>\n\n <div class='c1'>\n <b>入力！</b>\n <P>表示対象の期間を指定します。</P>\n <form action=\"http://localhost:1880/test32\" method=\"get\">\n この日時から <input type=\"datetime-local\" name=\"starttime\" value=\"2017-07-15T10:00\" step=\"60\" style=\"font-size:18px\"><br>\n この日時まで <input type=\"datetime-local\" name=\"endtime\" value=\"2017-07-17T10:10\" 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\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 class='v1' align=\"center\">\n\n </div>\n <div class='x1' align=\"center\">\n\n </div>\n\n <div class=\"y1\">\n 参考URL\n <ul>\n <li><a href=\"http://qiita.com/egplnt/private/16a8921826ecf16b9605\">IoTダッシュボードを作ってみる（非公開）</a></li>\n <li><a href=\"http://qiita.com/egplnt/items/af867711a7191923b2ff\">Watson IoT Platformを使ってみる</a></li>\n <li><a href=\"http://qiita.com/egplnt/items/e8eeed3432900945c084\">Node-REDでシンプルなウェブサイトを作ってみる</a></li>\n <li><a href=\"http://qiita.com/egplnt/items/141bd5d9b17ba02e526b\">Watson IoT Platform - IoTダッシュボードを作ってみる</a></li>\n <li><a href=\"http://qiita.com/egplnt/items/f03b5e4f8e90cdf9b79a\">TigerGateまとめ</a></li>\n </ul>\n 参照情報\n <ul>\n <li><a href=\"https://flows.nodered.org/\">Node-RED Library</a></li>\n <li><a href=\"https://www.mysql.com/jp/\">MySQL</a></li>\n <li><a href=\"https://nodejs.org/ja/\">node.js</a></li>\n </ul>\n </div>\n\n <div class=\"z1\">\n\t copyright (c) abc.com All right reserved.\n </div>\n</div>\n\n\n<script>\n\n\ngoogle.load(\"visualization\", \"1\", {packages:[\"corechart\"]});\ngoogle.setOnLoadCallback(drawChart02);\n\nfunction drawChart02() {\n\n var d1DataTable= new google.visualization.DataTable();\n d1DataTable.addColumn('datetime','日時');\n d1DataTable.addColumn('number','気温');\n var r01 = {{{payload.r01}}};\n var i;\n for (i = 0; i < {{{payload.length}}}; i++) {\n d1DataTable.addRows([\n [new Date( r01[i][0] ), r01[i][1] ]\n ]);\n }\n var d1Options = {title: '東京都の気温変化'};\n var chart = new google.visualization.LineChart(document.getElementById('d1'));\n chart.draw(d1DataTable, d1Options);\n\n\n var d2DataTable= new google.visualization.DataTable();\n d2DataTable.addColumn('datetime','日時');\n d2DataTable.addColumn('number','湿度');\n var r02 = {{{payload.r02}}};\n for (i = 0; i < {{{payload.length}}}; i++) {\n d2DataTable.addRows([\n [new Date( r02[i][0] ), r02[i][1] ]\n ]);\n }\n var d2Options = {title: '東京都の湿度変化'};\n var chart = new google.visualization.LineChart(document.getElementById('d2'));\n chart.draw(d2DataTable, d2Options);\n\n\n\n var d3DataTable= new google.visualization.DataTable();\n d3DataTable.addColumn('datetime','日時');\n d3DataTable.addColumn('number','降雨');\n var r03 = {{{payload.r03}}};\n for (i = 0; i < {{{payload.length}}}; i++) {\n d3DataTable.addRows([\n [new Date( r03[i][0] ), r03[i][1] ]\n ]);\n }\n var d3Options = {title: '東京都の降雨変化'};\n var chart = new google.visualization.LineChart(document.getElementById('d3'));\n chart.draw(d3DataTable, d3Options);\n\n\n\n\n\n\n var e1DataTable= new google.visualization.DataTable();\n e1DataTable.addColumn('datetime','日時');\n e1DataTable.addColumn('number','気温');\n var r04 = {{{payload.r04}}};\n for (i = 0; i < {{{payload.length}}}; i++) {\n e1DataTable.addRows([\n [new Date( r04[i][0] ), r04[i][1] ]\n ]);\n }\n var e1Options = {title: '東京都の気温変化'};\n var chart = new google.visualization.LineChart(document.getElementById('e1'));\n chart.draw(e1DataTable, e1Options);\n\n\n var e2DataTable= new google.visualization.DataTable();\n e2DataTable.addColumn('datetime','日時');\n e2DataTable.addColumn('number','湿度');\n var r05 = {{{payload.r05}}};\n for (i = 0; i < {{{payload.length}}}; i++) {\n e2DataTable.addRows([\n [new Date( r05[i][0] ), r05[i][1] ]\n ]);\n }\n var e2Options = {title: '東京都の湿度変化'};\n var chart = new google.visualization.LineChart(document.getElementById('e2'));\n chart.draw(e2DataTable, e2Options);\n\n\n\n var e3DataTable= new google.visualization.DataTable();\n e3DataTable.addColumn('datetime','日時');\n e3DataTable.addColumn('number','降雨');\n var r06 = {{{payload.r06}}};\n for (i = 0; i < {{{payload.length}}}; i++) {\n e3DataTable.addRows([\n [new Date( r06[i][0] ), r06[i][1] ]\n ]);\n }\n var e3Options = {title: '東京都の降雨変化'};\n var chart = new google.visualization.LineChart(document.getElementById('e3'));\n chart.draw(e3DataTable, e3Options);\n\n\n\n\n\n\n\n\n\n var f1DataTable= new google.visualization.DataTable();\n f1DataTable.addColumn('datetime','日時');\n f1DataTable.addColumn('number','気温');\n var r07 = {{{payload.r07}}};\n for (i = 0; i < {{{payload.length}}}; i++) {\n f1DataTable.addRows([\n [new Date( r07[i][0] ), r07[i][1] ]\n ]);\n }\n var f1Options = {title: '東京都の気温変化'};\n var chart = new google.visualization.LineChart(document.getElementById('f1'));\n chart.draw(f1DataTable, f1Options);\n\n\n var f2DataTable= new google.visualization.DataTable();\n f2DataTable.addColumn('datetime','日時');\n f2DataTable.addColumn('number','湿度');\n var r08 = {{{payload.r08}}};\n for (i = 0; i < {{{payload.length}}}; i++) {\n f2DataTable.addRows([\n [new Date( r08[i][0] ), r08[i][1] ]\n ]);\n }\n var f2Options = {title: '東京都の湿度変化'};\n var chart = new google.visualization.LineChart(document.getElementById('f2'));\n chart.draw(f2DataTable, f2Options);\n\n\n\n var f3DataTable= new google.visualization.DataTable();\n f3DataTable.addColumn('datetime','日時');\n f3DataTable.addColumn('number','降雨');\n var r09 = {{{payload.r09}}};\n for (i = 0; i < {{{payload.length}}}; i++) {\n f3DataTable.addRows([\n [new Date( r09[i][0] ), r06[i][1] ]\n ]);\n }\n var f3Options = {title: '東京都の降雨変化'};\n var chart = new google.visualization.LineChart(document.getElementById('f3'));\n chart.draw(f3DataTable, f3Options);\n\n\n\n\n\n\n\n\n/*\n d1ChartData = google.visualization.arrayToDataTable(\n [[\"INCOMING_EVENT_CD\",\"アラーム回数\"],[1,7]] );\n d1ChartData.removeRow(0);\n //console.log({{{payload.r1}}});\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 d2ChartData = google.visualization.arrayToDataTable(\n [[\"INCOMING_EVENT_CD\",\"検査回数\"],[439,7.0007]] );\n d2ChartData.removeRow(0);\n d2ChartData.addRows( {{{ payload.r03 }}} );\n d2ChartOptions = { title: '検査回数',\n 'titleTextStyle': { fontName: 'Meiryo UI', fontSize: 30},\n legend: { position: 'bottom' } };\n d2Chart = new google.visualization.LineChart(document.getElementById('d2'));\n d2Chart.draw(d2ChartData, d2ChartOptions);\n\n d3ChartData = google.visualization.arrayToDataTable(\n [[\"INCOMING_EVENT_CD\",\"運用時間\"],[439,7.0007]] );\n d3ChartData.removeRow(0);\n d3ChartData.addRows( {{{ payload.r04 }}} );\n d3ChartOptions = { title: '運用時間',\n 'titleTextStyle': { fontName: 'Meiryo UI', fontSize: 30},\n legend: { position: 'bottom' } };\n d3Chart = new google.visualization.LineChart(document.getElementById('d3'));\n d3Chart.draw(d3ChartData, d3ChartOptions);\n\n e1ChartData = google.visualization.arrayToDataTable(\n [[\"INCOMING_EVENT_CD\",\"圧力A\"],[439,7.0007]] );\n e1ChartData.removeRow(0);\n e1ChartData.addRows( {{{ payload.r05 }}} );\n e1ChartOptions = { title: '圧力A',\n 'titleTextStyle': { fontName: 'Meiryo UI', fontSize: 30},\n legend: { position: 'bottom' } };\n e1Chart = new google.visualization.LineChart(document.getElementById('e1'));\n e1Chart.draw(e1ChartData, e1ChartOptions);\n\n e2ChartData = google.visualization.arrayToDataTable(\n [[\"INCOMING_EVENT_CD\",\"圧力B\"],[439,7.0007]] );\n e2ChartData.removeRow(0);\n e2ChartData.addRows( {{{ payload.r09 }}} );\n e2ChartOptions = { title: '圧力B',\n 'titleTextStyle': { fontName: 'Meiryo UI', fontSize: 30},\n legend: { position: 'bottom' } };\n e2Chart = new google.visualization.LineChart(document.getElementById('e2'));\n e2Chart.draw(e2ChartData, e2ChartOptions);\n\n e3ChartData = google.visualization.arrayToDataTable(\n [[\"INCOMING_EVENT_CD\",\"圧力C\"],[439,7.0007]] );\n e3ChartData.removeRow(0);\n e3ChartData.addRows( {{{ payload.r07 }}} );\n e3ChartOptions = { title: '圧力C',\n 'titleTextStyle': { fontName: 'Meiryo UI', fontSize: 30},\n legend: { position: 'bottom' } };\n e3Chart = new google.visualization.LineChart(document.getElementById('e3'));\n e3Chart.draw(e3ChartData, e3ChartOptions);\n\n f1ChartData = google.visualization.arrayToDataTable(\n [[\"INCOMING_EVENT_CD\",\"湿度\"],[439,7.0007]] );\n f1ChartData.removeRow(0);\n f1ChartData.addRows( {{{ payload.r08 }}} );\n f1ChartOptions = { title: '湿度',\n 'titleTextStyle': { fontName: 'Meiryo UI', fontSize: 30},\n legend: { position: 'bottom' } };\n f1Chart = new google.visualization.LineChart(document.getElementById('f1'));\n f1Chart.draw(f1ChartData, f1ChartOptions);\n\n f2ChartData = google.visualization.arrayToDataTable(\n [[\"INCOMING_EVENT_CD\",\"修復時間\"],[439,7.0007]] );\n f2ChartData.removeRow(0);\n f2ChartData.addRows( {{{ payload.r09 }}} );\n f2ChartOptions = { title: '修復時間',\n 'titleTextStyle': { fontName: 'Meiryo UI', fontSize: 30},\n legend: { position: 'bottom' } };\n f2Chart = new google.visualization.LineChart(document.getElementById('f2'));\n f2Chart.draw(f2ChartData, f2ChartOptions);\n\n f3ChartData = google.visualization.arrayToDataTable(\n [[\"INCOMING_EVENT_CD\",\"回転速度(rpm)\"],[439,7.0007]] );\n f3ChartData.removeRow(0);\n f3ChartData.addRows( {{{ payload.r10 }}} );\n f3ChartOptions = { title: '回転速度(rpm)',\n 'titleTextStyle': { fontName: 'Meiryo UI', fontSize: 30},\n legend: { position: 'bottom' } };\n f3Chart = new google.visualization.LineChart(document.getElementById('f3'));\n f3Chart.draw(f3ChartData, f3ChartOptions);\n\n g1ChartData = google.visualization.arrayToDataTable(\n [[\"INCOMING_EVENT_CD\",\"ボール・ベアリング交換回数\"],[439,7.0007]] );\n g1ChartData.removeRow(0);\n g1ChartData.addRows( {{{ payload.r11 }}} );\n g1ChartOptions = { title: 'ボール・ベアリング交換回数',\n 'titleTextStyle': { fontName: 'Meiryo UI', fontSize: 30},\n legend: { position: 'bottom' } };\n g1Chart = new google.visualization.LineChart(document.getElementById('g1'));\n g1Chart.draw(g1ChartData, g1ChartOptions);\n\n g2ChartData = google.visualization.arrayToDataTable(\n [[\"INCOMING_EVENT_CD\",\"フィルター交換回数\"],[439,7.0007]] );\n g2ChartData.removeRow(0);\n g2ChartData.addRows( {{{ payload.r12 }}} );\n g2ChartOptions = { title: 'フィルター交換回数',\n 'titleTextStyle': { fontName: 'Meiryo UI', fontSize: 30},\n legend: { position: 'bottom' } };\n g2Chart = new google.visualization.LineChart(document.getElementById('g2'));\n g2Chart.draw(g2ChartData, g2ChartOptions);\n\n g3ChartData = google.visualization.arrayToDataTable(\n [[\"INCOMING_EVENT_CD\",\"温度\"],[439,7.0007]] );\n g3ChartData.removeRow(0);\n g3ChartData.addRows( {{{ payload.r05 }}} );\n g3ChartOptions = { title: '温度',\n 'titleTextStyle': { fontName: 'Meiryo UI', fontSize: 30},\n legend: { position: 'bottom' } };\n g3Chart = new google.visualization.LineChart(document.getElementById('g3'));\n g3Chart.draw(g3ChartData, g3ChartOptions);\n\n*/\n};\n\n</script>\n\n</body>\n</html>\n","x":970,"y":360,"wires":[["118b9490.a45e3b"]]},{"id":"118b9490.a45e3b","type":"http response","z":"2ff1132c.0fa09c","name":"","x":1130,"y":360,"wires":[]},{"id":"4fb3bee.ce73f4","type":"debug","z":"2ff1132c.0fa09c","name":"starttime","active":true,"console":"false","complete":"starttime","x":460,"y":400,"wires":[]},{"id":"7fa42bed.5be5bc","type":"debug","z":"2ff1132c.0fa09c","name":"endtime","active":true,"console":"false","complete":"endtime","x":460,"y":440,"wires":[]},{"id":"59d7def.f5eaea","type":"function","z":"2ff1132c.0fa09c","name":"select文を発行","func":"msg.topic = \"select * from table02 where dt between '\" + msg.starttime + \"' and '\" + msg.endtime + \"'\";\nreturn msg;","outputs":1,"noerr":0,"x":480,"y":360,"wires":[["f68974df.6ed77"]]},{"id":"7f0af6a3.d56558","type":"function","z":"2ff1132c.0fa09c","name":"DBからの返値をセット","func":"\nvar i = 0;\nvar len = msg.payload.length;\nvar arr01 = new Array(); var arr02 = new Array(); var arr03 = new Array(); var arr04 = new Array();\nvar arr05 = new Array(); var arr06 = new Array(); var arr07 = new Array(); var arr08 = new Array();\nvar arr09 = new Array(); var arr10 = new Array(); var arr11 = new Array(); var arr12 = new Array();\nvar arr13 = new Array();\n\nfor (i; i < len; i++) {\n var c1 = msg.payload[i]['TS'];\n arr01.push([c1,parseFloat(msg.payload[i]['D1'])]);\n arr02.push([c1,parseFloat(msg.payload[i]['D2'])]);\n arr03.push([c1,parseFloat(msg.payload[i]['D3'])]);\n arr04.push([c1,parseFloat(msg.payload[i]['D4'])]);\n arr05.push([c1,parseFloat(msg.payload[i]['D5'])]);\n arr06.push([c1,parseFloat(msg.payload[i]['D6'])]);\n arr07.push([c1,parseFloat(msg.payload[i]['D7'])]);\n arr08.push([c1,parseFloat(msg.payload[i]['D8'])]);\n arr09.push([c1,parseFloat(msg.payload[i]['D9'])]);\n}\n\nmsg.payload.r01 = JSON.stringify(arr01);\nmsg.payload.r02 = JSON.stringify(arr02);\nmsg.payload.r03 = JSON.stringify(arr03);\nmsg.payload.r04 = JSON.stringify(arr04);\nmsg.payload.r05 = JSON.stringify(arr05);\nmsg.payload.r06 = JSON.stringify(arr06);\nmsg.payload.r07 = JSON.stringify(arr07);\nmsg.payload.r08 = JSON.stringify(arr08);\nmsg.payload.r09 = JSON.stringify(arr09);\nmsg.payload.r10 = JSON.stringify(arr10);\nmsg.payload.r11 = JSON.stringify(arr11);\nmsg.payload.r12 = JSON.stringify(arr12);\nmsg.payload.r13 = JSON.stringify(arr13);\n\n/*\nmsg.payload = JSON.stringify(arr01) + \"&\" + JSON.stringify(arr02) + \"&\" + JSON.stringify(arr03) + \"&\" + JSON.stringify(arr04) +\n JSON.stringify(arr05) + \"&\" + JSON.stringify(arr06) + \"&\" + JSON.stringify(arr07) + \"&\" + JSON.stringify(arr08) +\n JSON.stringify(arr09) + \"&\" + JSON.stringify(arr10) + \"&\" + JSON.stringify(arr11) + \"&\" + JSON.stringify(arr12) +\n JSON.stringify(arr13);\n*/\n\nreturn msg;\n","outputs":1,"noerr":0,"x":750,"y":360,"wires":[["d1b0520a.3c25c8"]]},{"id":"c2ca162d.a38b2","type":"comment","z":"2ff1132c.0fa09c","name":"表へデータを追加する","info":"","x":140,"y":40,"wires":[]},{"id":"1dc73266.477f8e","type":"comment","z":"2ff1132c.0fa09c","name":"試しにselectしてみる","info":"","x":140,"y":120,"wires":[]},{"id":"ba7df234.dd3768","type":"MySQLdatabase","z":"","host":"127.0.0.1","port":"3306","db":"DB01","tz":""}]
-フロー内の「表へデータを追加する」Injectノードを押す、またはMySQL Workbenchを使用して、表へデータを追加（登録）します
-ブラウザでhttp://localhost:1880/test30へアクセスし、MySQLデータベースに保存された値が表示されることを確認します
