このサンプルのフローでは、dashDBに保存されたIoTデータをD3.jsを使用して可視化します。
dashDBの準備については、Watson IoT Platform - 直接dashDBへデータを格納するなどをご参照ください。
#サンプル１：センサーからのIoTデータをリアルタイムで表示する
- Node-REDのフローをコピーする方法を参照して、下記のフローをコピペします。
- 「入力用画面を返す」ノードを開き、22行目の
<form action="http://このIoTアプリの名前.mybluemix.net/test43の「このIoTアプリの名前」を使用しているNode-REDアプリの名前に更新し、画面右上の赤い「Deploy」ボタンを押します - 「DBからデータを取得」ノードを開き、使用している（SENSOR2DBデータベースにCC2650のデータが保存されている）dashDBインスタンスが正しく選択されていることを確認します
- ブラウザを開き
アプリ名.mybluemix.net/test42へアクセスします - 表示対象の属性名と表示期間を指定し、「送信」を押します
dashDBからのIoTデータを表示
[{"id":"2eb6a12a.6ef6e6","type":"dashDB in","z":"b9820341.436a5","service":"dashDB-gw","query":"select * from SENSOR2DB \nwhere month between ? and ?\nand\nday between ? and ? \nand \nhour between ? and ?\nand \nminute between ? and ?\norder by month, day, hour, minute;","params":"msg.startmonth,msg.endmonth,msg.startday,msg.endday,msg.starthour,msg.endhour,msg.startminute,msg.endminute","name":"DBからデータを取得","x":500,"y":260,"wires":[["3fecad0f.fb3d32"]]},{"id":"3fecad0f.fb3d32","type":"function","z":"b9820341.436a5","name":"stringify","func":"var m = JSON.stringify(msg.payload);\nmsg.payload.op = m;\nvar n = JSON.stringify(msg.targetattr);\nmsg.payload.targetattr = n;\nreturn msg;","outputs":1,"noerr":0,"x":300,"y":320,"wires":[["10facdf7.cecfa2"]]},{"id":"10facdf7.cecfa2","type":"template","z":"b9820341.436a5","name":"グラフを表示","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n <meta charset=\"utf-8\">\n <title>データベースからのIoTデータ表示</title>\n <script src=\"https://d3js.org/d3.v4.min.js\"></script>\n\n <style type=\"text/css\">\n /* ここにスタイルルールを追加します */\n .axis path,\n .axis line {\n fill: none;\n stroke: black;\n shape-rendering: crispEdges;\n }\n .axis text {\n font-family: Meiryo;\n font-size: 11px;\n }\n </style>\n\n <div id=\"op\" foo={{ payload.op }}/>\n <div id=\"ta_a\" ta_b={{ payload.targetattr }}/>\n\n <script type=\"text/javascript\">\n // payload.opにdashDB検索結果を、payload.targetattrに表示対象の属性名を保持\n var ta_c = document.getElementById( 'ta_a' ).getAttribute( 'ta_b' );\t//属性名を取得\n target_attr = ta_c.substr( 1, ta_c.length-3 ); //冒頭と末尾の\"\"を削除。エラーになるので。\n\n var op_a = document.getElementById( 'op' ).getAttribute( 'foo' );\t//検索結果を取得\n op_a = op_a.substr( 0, op_a.length-1 ) ;\t//末尾の\"/\"でエラーになるので\n var op_a2 = JSON.parse(op_a);\t//JSON文字列からjavascriptオブジェクトを復元\n\n var op_a3 = new Array();\n for(var i in op_a2){\n op_a3.push(op_a2[i][target_attr]);\t//対象とする属性の値を取り出して配列op_a3に順次格納\n }\n\n var op_a5 = new Array();\n for(var i in op_a2){ // 対象エントリーの時刻を格納\n op_a5.push(op_a2[i].HOUR + \":\" + (( \"0\" + op_a2[i].MINUTE ).substr( -2 )));\n }\n\n var m = 0; // 時と分を結合して時刻を保持する\n var mh = 0; // 最大値が発生したときの時\n var mm = 0; // 最大値が発生したときの分\n var mt = 0; // 最大値\n for(var i in op_a2){\n // console.log('i = ', i, ', value = ', op_a2[i][target_attr], ', h = ', op_a2[i].HOUR, ', m = ', op_a2[i].MINUTE);\n // op_a2配列を探索して、最大値を見つける\n if (m < Number(op_a2[i][target_attr])) {\n m = Number(op_a2[i][target_attr]);\n mh = op_a2[i].HOUR;\n mm = ( \"0\" + op_a2[i].MINUTE ).substr( -2 ) ;\n mt = op_a2[i][target_attr]; // 最大値の文字列での値\n mv = parseFloat(mt, 10); // 最大値の数値での値\n //console.log(\"max found was \" + mh + \":\" + mm + \" \" + mt);\n }\n }\n\n m = mh + \":\" + mm;\n // console.log('mt = ', mt);\n // 表示する画面の幅（ Width ）と高さ（ height ）\n var w = 1000;\n // zoomの値は、最大値が100以上であればそのまま(1倍)、最大値が100より小さければ4倍、\n // 最大値が10より小さければ10倍、最大値が3より小さければ20倍に\n var zoom = ( mv < 100 ) ? (( mv < 10 ) ? (( mv < 3 ) ? 20 : 10 ) : 4 ) : 1;\n // console.log('zoom = ', zoom);\n // 画面の高さは、最大値xズーム値＋５０ か 100のどちらか大きいほう\n var h = Math.max(mv*zoom + 50, 100);\n // console.log('h = ', h);\n var barPadding = 1; // 棒グラフの棒と棒の間隔\n var margin = 30; // グラフ表示域のまわりの余白\n\n var dataset = op_a3; // 対象エントリーを保持\n var datasetT = op_a5; // 対象エントリーの時刻を保持\n\n // スケール関数の生成\n var xScale = d3.scaleLinear()\n .domain([0, d3.max(dataset, function(d) { return d; })])\n .range([margin, w + margin * 2]);\n\n var yScale = d3.scaleLinear()\n .domain([0, (h-margin) / zoom]) // Y軸のスケールを棒グラフと一致させる\n .range([h-margin, 0]); // Y軸表示場所\n\n // X 軸の定義\n var xAxis = d3.axisBottom()\n .scale(xScale);\n\n // Y 軸の定義\n var yAxis = d3.axisLeft(yScale);\n\n // SVG 要素の生成\n var canvas = d3.select(\"body\")\n .append(\"svg\")\n .attr(\"width\", w)\n .attr(\"height\", h);\n\n canvas.selectAll(\"rect\")\n .data(dataset)\n .enter()\n .append(\"rect\")\n .attr(\"x\", function(d, i) {\n return i * ((w-margin) / dataset.length) + margin;\n })\n .attr(\"y\", function(d) { // 負の値は絶対値で対応\n return h - (Math.abs(d) * zoom) - margin;\n })\n .attr(\"width\", (w-margin) / dataset.length - barPadding)\n .attr(\"height\", function(d) {\n return Math.abs(d) * zoom; // 負の値は絶対値で対応\n })\n .attr(\"fill\", function(d) {\n //return \"rgb(100, 100, \" + (d * 10) + \")\";\n return \"rgb(224, 194, 132)\"; // 杏色\n });\n\n canvas.selectAll(\"text\")\n .data(datasetT)\n .enter()\n .append(\"text\")\n .text(function(d) {\n return d;\n })\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", function(d, i) {\n return i * ((w-margin) / dataset.length) + margin + ((w-margin) / dataset.length - barPadding ) / 2;\n })\n .attr(\"y\", function(d) {\n return h;\n })\n .attr(\"font-family\", \"Meiryo\")\n .attr(\"font-size\", \"11px\")\n .attr(\"fill\", \"black\");\n\n// X 軸の生成\n/*canvas.append(\"g\")\n .attr(\"class\", \"axisBottom\")\n .attr(\"transform\", \"translate(0,\" + (h - margin) + \")\")\n .call(xAxis);\n*/\n// Y 軸の生成\ncanvas.append(\"g\")\n .attr(\"class\", \"axisLeft\")\n .attr(\"transform\", \"translate(\" + margin + \",0)\")\n .call(yAxis);\n\n\nwindow.onload = function onLoad() {\n var target1 = document.getElementById(\"output1\"); // 表示対象の属性名\n target1.innerHTML = target_attr;\n var target2 = document.getElementById(\"output2\"); // 最高値の時刻\n target2.innerHTML = m;\n var target3 = document.getElementById(\"output3\"); // 最高値\n target3.innerHTML = mt; // 最大値をロード\n}\n\n</script>\n</head>\n<body>\n\n <div id=\"a-box\" style=\"background-color: #87cefa; padding: 20px; font-family: Meiryo;\">\n <h1>データベースからのIoTデータ表示</h1>\n <br />\n <p>\n データベースに保存されたIoTデータを可視化します(加速度などのマイナス値は絶対値で表示しています)\n <br />\n </p>\n </div>\n\n <div id=\"b-box\" style=\"background-color: #ecf2fe; padding: 20px; font-family: Meiryo; \">\n <div style=\"text-align:left\" id=\"output0\"></div>\n <h2>\n <span style=\"text-align:left; font-size:18pt; color:blue\" id=\"output1\"></span> 値の出力\n </h2>\n <h2>最高値の時刻</h2>\n <span style=\"text-align:left; font-size:18pt; color:blue\" id=\"output2\"></span>\n <h2>最高値 </h2>\n <span style=\"text-align:left; font-size:18pt; color:blue\" id=\"output3\"></span>\n </div>\n</body>\n</html>\n","x":480,"y":320,"wires":[["bfa2ef08.c01b88"]]},{"id":"bfa2ef08.c01b88","type":"http response","z":"b9820341.436a5","name":"","x":670,"y":320,"wires":[]},{"id":"aae95e90.86278","type":"http in","z":"b9820341.436a5","name":"","url":"/test42","method":"get","swaggerDoc":"","x":130,"y":120,"wires":[["3dd30a64.5a7b4e"]]},{"id":"e2fb681.3b9ad98","type":"http response","z":"b9820341.436a5","name":"","x":510,"y":120,"wires":[]},{"id":"3dd30a64.5a7b4e","type":"template","z":"b9820341.436a5","name":"入力用画面を返す","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n\t<head>\n\t\t<title>IoT Quick Dashboard</title>\n\t\t<meta charset=\"utf-8\" />\n\t</head>\n\t<body>\n\n<div id=\"a-box\" style=\"background-color: #96e0a9; padding: 20px; font-family: Meiryo;\">\n\n\t<h1>IoT Quick Dashboard</h1>\n\t<br />\n\t<p>\n\t\tdashDBに保存されたIoTデータを可視化します<br />\n\t</p>\n</div>\n\n<div id=\"b-box\" style=\"background-color: #ecf2fe; padding: 20px; font-family: Meiryo; \">\n\n <H2>入力！</H2>\n <P>表示対象の属性と期間を指定します。</P>\n <form action=\"http://このIoTアプリの名前.mybluemix.net/test43\" method=\"get\">\n\t\t<select name=\"targetattr\">\n\t\t <option>AMBIENTTEMP</option>\n\t\t\t\t<option>ACCELX</option>\n\t\t\t\t<option>ACCELY</option>\n\t\t\t\t<option>ACCELZ</option>\n\t\t\t\t<option>GYROX</option>\n\t\t\t\t<option>GYROY</option>\n\t\t\t\t<option>GYROZ</option>\n\t\t\t\t<option>HUMIDITY</option>\n\t\t\t\t<option>LIGHT</option>\n\t\t\t\t<option>MAGX</option>\n\t\t\t\t<option>MAGY</option>\n\t\t\t\t<option>MAGZ</option>\n\t\t <option>OBJECTTEMP</option>\n\t\t </select><br><br>\n この日時から<input type=\"datetime-local\" name=\"starttime\" value=\"2016-11-8T17:21:00\" step=\"60\">\n この日時まで<input type=\"datetime-local\" name=\"endtime\" value=\"2012-11-8T17:21:00\" step=\"60\"><br><br>\n <INPUT type=\"submit\" value=\"送信\"><BR>\n <INPUT type=\"reset\" value=\"リセット\"><BR><BR>\n </FORM>\n\n</div>\n\n<div id=\"c-box\" style=\"background-color: #f0e8fa; padding: 20px; font-family: Meiryo; \">\n\t<br />\n\t<div class=\"category\"><h3>関連リンク</h3></div>\n\t\t<ul>\n\t\t\t<li><a href=\"http://qiita.com/egplnt/items/af867711a7191923b2ff\">Qiita: Watson IoT Platformを使ってみる</a></li>\n\t\t\t<li><a href=\"https://internetofthings.ibmcloud.com/#/\">IBM Watson IoT Platform</a></li>\n\t\t\t<li><a href=\"https://bluemix.net\">Bluemix</a></li>\n\t\t\t<li><a href=\"https://developer.ibm.com/recipes/tutorials/use-the-simulated-device-to-experience-the-iot-foundation/\">Recipe - Simulator</a></li>\n\t\t</ul>\n\t<div class=\"category\"><h3>資料ページ</h3></div>\n\t\t<ul>\n\t\t\t<li><a href=\"http://ibm.com/iot\">IBM IoT</a></li>\n\t\t\t<li><a href=\"https://docs.internetofthings.ibmcloud.com/ja/\">Watson IoT Platform資料ページ</a></li>\n\t\t\t<li><a href=\"https://developer.ibm.com/recipes/\">Recipe</a></li>\n\t\t</ul>\n</div>\n\n<div id=\"d-box\" style=\"clear: both; background-color: #e0ce96; font-size: 18px; padding: 10px; text-align: center; padding: 20px; font-family: Meiryo;\">\n\t\tcopyright (c) abc.com All right reserved.\n</div>\n\t</body>\n</html>\n","x":330,"y":120,"wires":[["e2fb681.3b9ad98"]]},{"id":"ffa6e27d.bffc98","type":"http in","z":"b9820341.436a5","name":"","url":"/test43","method":"get","swaggerDoc":"","x":130,"y":260,"wires":[["882885a3.f23b4"]]},{"id":"c34b1569.a2526","type":"comment","z":"b9820341.436a5","name":"DBから値を取得し表示","info":"","x":140,"y":220,"wires":[]},{"id":"882885a3.f23b4","type":"function","z":"b9820341.436a5","name":"値を取得","func":"msg.startmonth = msg.payload.starttime.substr(5,2);\nmsg.startday = msg.payload.starttime.substr(8,2);\nmsg.starthour = msg.payload.starttime.substr(11,2);\nmsg.startminute = msg.payload.starttime.substr(14,2);\n\nmsg.endmonth = msg.payload.endtime.substr(5,2);\nmsg.endday = msg.payload.endtime.substr(8,2);\nmsg.endhour = msg.payload.endtime.substr(11,2);\nmsg.endminute = msg.payload.endtime.substr(14,2);\n\nmsg.targetattr = msg.payload.targetattr;\n\nreturn msg;","outputs":1,"noerr":0,"x":300,"y":260,"wires":[["2eb6a12a.6ef6e6"]]},{"id":"cdba37a9.e3b2d","type":"comment","z":"b9820341.436a5","name":"表示する属性と期間を指定","info":"","x":150,"y":80,"wires":[]}]
#サンプル２：センサータグ（CC2650)からのIoTデータを指定した間隔でdashDBへ書き込む
下記のフローではセンサータグCC2650からのIoTデータを指定した間隔でdashDBへ書き込み、それを表示します。
- センサータグCC2650からデータを取得します
- 指定した間隔でdashDBへ直接書き込みます
- 必要に応じ、「センサー値を出力」functionノードを開き、冒頭のインターバル値を調整します。
センサータグCC2650からのデータをdashDBへ格納し、D3で可視化する
[{"id":"175917e8.30b87","type":"inject","z":"64589e61.60898","name":"1秒毎","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"x":110,"y":200,"wires":[[]]},{"id":"c3e41b5d.223d28","type":"inject","z":"64589e61.60898","name":"restart","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"x":110,"y":240,"wires":[[]]},{"id":"a0155b1b.cda098","type":"comment","z":"64589e61.60898","name":"IoTデータを指定した間隔でDBへ書き込み","info":"","x":200,"y":60,"wires":[]},{"id":"6d18f085.c1b5d8","type":"function","z":"64589e61.60898","name":"日付時刻の追加","func":"var d = new Date();\nvar localTime = d.getTime();\nvar localOffset = d.getTimezoneOffset() * 60000;\nvar utc = localTime + localOffset;\nvar offset = -9.0;\nvar result = utc - (3600000 * offset);\nvar date = parseInt(new Date(result) / 1000);\nvar dt = new Date(result);\n\nvar year = dt.getFullYear();\nvar month = dt.getMonth()+1;\nvar day = dt.getDate();\nvar hour = dt.getHours();\nvar minute = dt.getMinutes();\nvar second = dt.getSeconds();\n//if (!msg.payload) {\n// msg.payload = { \"initial\": \"value\" };\n//}\nif (!msg.date) {\n msg.date = { \"initial\": \"value\" };\n}\nmsg.date = {\n \"date\": date,\n \"year\": year,\n \"month\": month,\n \"day\": day,\n \"hour\": hour,\n \"minute\": minute,\n \"second\": second\n};\nreturn msg;","outputs":1,"noerr":0,"x":301,"y":140,"wires":[["3b7f6362.24696c","def4328.f99acd"]]},{"id":"3b7f6362.24696c","type":"debug","z":"64589e61.60898","name":"時刻の表示","active":false,"console":"false","complete":"date","x":510,"y":100,"wires":[]},{"id":"14d3087b.28646","type":"function","z":"64589e61.60898","name":"表へ書き込む","func":"msg.payload = \n{ \n\tDATE : msg.date.date,\n\tDAY : msg.date.day,\n\tHOUR : msg.date.hour,\n\tMINUTE : msg.date.minute,\n\tMONTH : msg.date.month,\n\tSECOND : msg.date.second,\n\tYEAR : msg.date.year,\n\tACCELX : msg.sensor.accelX,\n\tACCELY : msg.sensor.accelY,\n\tACCELZ : msg.sensor.accelZ,\n\tAMBIENTTEMP : msg.sensor.ambientTemp,\n\tGYROX : msg.sensor.gyroX,\n\tGYROY : msg.sensor.gyroY,\n\tGYROZ : msg.sensor.gyroZ,\n\tHUMIDITY : msg.sensor.humidity,\n\tLIGHT : msg.sensor.light,\n MAGX : msg.sensor.magX,\n\tMAGY :msg.sensor.magY,\n\tMAGZ : msg.sensor.magZ,\n\tOBJECTTEMP : msg.sensor.objectTemp\n};\n\nreturn msg;\n","outputs":1,"noerr":0,"x":520,"y":220,"wires":[["ba9d26f1.6a516","ecfd037.e72c4"]]},{"id":"8bcc302e.8dbd58","type":"function","z":"64589e61.60898","name":"センサー値を出力","func":"var sampling_min_interval = 10; // 10分毎にDBヘ書き込み\nvar sampling_sec_interval = 60; // データを出力する間隔\n\n/*\nvar sum = 0, average = 0;\nvar sen1 = Math.floor(Math.random () * 10) + 1; // センサー値を生成（シミュレート）\n\nif ( !context.array ) {\n context.array = new Array (10); //直近１０件分を保持\n}\nvar shifted = context.array.shift();\ncontext.array.push(sen1); // 最新の値を保存\nvar length = context.array.length;\n\nfor (k=0; k<length; k++) {\n sum = sum + context.array[k]; // 合計を算出\n}\n\nvar hour = JSON.stringify(msg.date.hour);\nvar min_org = JSON.stringify(msg.date.minute);\nvar min = ( \"0\" + min_org ).substr( -2 ); // 一桁分の場合、二桁に\nvar sec_org = JSON.stringify(msg.date.second);\nvar sec = ( \"0\" + sec_org ).substr( -2 ); // 一桁秒の場合、二桁に\nvar time = hour + \":\" + min + \":\" + sec;\n\naverage = sum / length;\nvar data = [[time],[sen1],[average]];\nmsg.sensor.average = average;\n*/\nif ( ( msg.date.second % sampling_sec_interval ) !== 0 ) return;\nif ( ( msg.date.minute % sampling_min_interval ) !== 0 ) return;\nreturn msg;\n","outputs":1,"noerr":0,"x":310,"y":220,"wires":[["14d3087b.28646"]]},{"id":"b7faf05f.7d756","type":"ibmiot in","z":"64589e61.60898","authentication":"quickstart","apiKey":"","inputType":"evt","deviceId":"","applicationId":"","deviceType":"+","eventType":"+","commandType":"","format":"json","name":"IBM IoT","service":"quickstart","allDevices":"","allApplications":"","allDeviceTypes":true,"allEvents":true,"allCommands":"","allFormats":"","x":90,"y":140,"wires":[["6d18f085.c1b5d8"]]},{"id":"4144253.9dd2fdc","type":"http in","z":"64589e61.60898","name":"","url":"/test28","method":"get","swaggerDoc":"","x":110,"y":380,"wires":[["1f8c6452.0e2c14"]]},{"id":"fdd5ab25.ad1cd8","type":"debug","z":"64589e61.60898","name":"op","active":false,"console":"false","complete":"payload.op","x":670,"y":360,"wires":[]},{"id":"d1c0278d.5bf49","type":"template","z":"64589e61.60898","name":"htmlを返す","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n <meta charset=\"utf-8\">\n <title>データベースからのIoTデータ表示</title>\n <script src=\"https://d3js.org/d3.v4.min.js\"></script>\n\n <style type=\"text/css\">\n /* ここにスタイルルールを追加します */\n .axis path,\n .axis line {\n fill: none;\n stroke: black;\n shape-rendering: crispEdges;\n }\n .axis text {\n font-family: sans-serif;\n font-size: 11px;\n }\n </style>\n\n <div id=\"op\" foo={{payload.op}}/>\n\n<script type=\"text/javascript\">\n\nvar op_a = document.getElementById( 'op' ).getAttribute( 'foo' );\t//データを取得\nop_a = op_a.substr( 0, op_a.length-1 ) ;\t//末尾の\"/\"でエラーになるので\nvar op_a2 = JSON.parse(op_a);\t//JSON文字列からjavascriptオブジェクトを復元\n\nvar op_a3 = new Array();\nfor(var i in op_a2){\n\top_a3.push(op_a2[i].AMBIENTTEMP);\t//AMBIENTTEMPを取り出して配列op_a3に順次格納\n}\n\nvar op_a5 = new Array();\nfor(var i in op_a2){\n\top_a5.push(op_a2[i].HOUR + \":\" + (( \"0\" + op_a2[i].MINUTE ).substr( -2 )));\n}\n\n // 幅（ Width ）と高さ（ height ）\n var w = 800;\n var h = 300;\n var zoom =5;\n var barPadding = 1; // 棒グラフの棒と棒の間隔\n var margin = 30; // グラフ表示域のまわりの余白\n \n var dataset = op_a3;\n var datasetT = op_a5;\n \n // スケール関数の生成\n var xScale = d3.scaleLinear()\n .domain([0, d3.max(dataset, function(d) { return d; })])\n .range([margin, w + margin * 2]);\n\n var yScale = d3.scaleLinear()\n .domain([0, (h-margin) / zoom]) // Y軸のスケールを棒グラフと一致させる\n .range([h-margin, 0]); // Y軸表示場所\n\n // X 軸の定義\n var xAxis = d3.axisBottom()\n .scale(xScale);\n\n // Y 軸の定義\n var yAxis = d3.axisLeft(yScale);\n \n // SVG 要素の生成\n var canvas = d3.select(\"body\")\n .append(\"svg\")\n .attr(\"width\", w)\n .attr(\"height\", h);\n\n canvas.selectAll(\"rect\")\n .data(dataset)\n .enter()\n .append(\"rect\")\n .attr(\"x\", function(d, i) {\n return i * ((w-margin) / dataset.length) + margin;\n })\n .attr(\"y\", function(d) {\n return h - (d * zoom) - margin;\n })\n .attr(\"width\", (w-margin) / dataset.length - barPadding)\n .attr(\"height\", function(d) {\n return d * zoom;\n })\n .attr(\"fill\", function(d) {\n// return \"rgb(0, 0, \" + ( ( (d-20) * 10 ) + 100 ) + \")\";\n return \"rgb(0, 51, 255)\";\n });\n\t\t \n canvas.selectAll(\"text\")\n .data(datasetT)\n .enter()\n .append(\"text\")\n .text(function(d) {\n return d;\n })\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", function(d, i) {\n return i * ((w-margin) / dataset.length) + margin + ((w-margin) / dataset.length - barPadding ) / 2;\n })\n .attr(\"y\", function(d) {\n return h;\n })\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"11px\")\n .attr(\"fill\", \"black\");\n\n/* canvas.selectAll(\"text\")\n .data(dataset)\n .enter()\n .append(\"text\")\n .text(function(d) {\n return d;\n })\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", function(d, i) {\n return i * ((w-margin) / dataset.length) + (w / dataset.length - barPadding) / 2 + margin;\n })\n .attr(\"y\", function(d) {\n return h - (d * 4) + 14 - margin;\n })\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"11px\")\n .attr(\"fill\", \"white\");\n*/\n // X 軸の生成\n// canvas.append(\"g\")\n// .attr(\"class\", \"axisBottom\")\n// .attr(\"transform\", \"translate(0,\" + (h - margin) + \")\")\n// .call(xAxis);\n\n // Y 軸の生成\n canvas.append(\"g\")\n .attr(\"class\", \"axisLeft\")\n .attr(\"transform\", \"translate(\" + margin + \",0)\")\n .call(yAxis);\n\t\t \n\t\t \n var m = 0;\n var mh = 0;\n var mm = 0;\n var mt = 0;\n for(var i in op_a2){\n\t if (m < Number(op_a2[i].AMBIENTTEMP)) {\n\t m = Number(op_a2[i].AMBIENTTEMP);\n\t\t mh = op_a2[i].HOUR;\n\t\t mm = ( \"0\" + op_a2[i].MINUTE ).substr( -2 ) ;\n\t\t mt = op_a2[i].AMBIENTTEMP;\n //console.log(\"max found was \" + mh + \":\" + mm + \" \" + mt);\n\t }\n }\n\n m = mh + \":\" + mm;\n\n window.onload = function onLoad() {\n var target1 = document.getElementById(\"output1\");\n target1.innerHTML = m;\n var target2 = document.getElementById(\"output2\");\n target2.innerHTML = mt;\n\t}\n\t\n</script>\n</head>\n<body>\n\n<div id=\"a-box\" style=\"background-color: #87cefa; padding: 20px;\">\n\t<h1>データベースからのIoTデータ表示</h1>\n\t<br />\n\t<p>\n\t\tデータベースに保存されたIoTデータを可視化します<br />\n\t</p>\n</div>\n\n<div id=\"b-box\" style=\"background-color: #ecf2fe; padding: 20px; \">\n\t\t<h2>最高値の時刻</h2>\n\t\t\t<div style=\"text-align:left\" id=\"output0\"></div>\n\t\t\t<div style=\"text-align:left;font-size: 18pt\" id=\"output1\"></div>\n\t\t<h2>最高値 </h2>\n\t\t\t<span style=\"text-align:left;font-size: 18pt\" id=\"output2\"></span> ℃\n</div>\n</body>\n</html>","x":690,"y":420,"wires":[["5d901718.3c51f8"]]},{"id":"5d901718.3c51f8","type":"http response","z":"64589e61.60898","name":"","x":850,"y":420,"wires":[]},{"id":"422b2203.7d68e4","type":"function","z":"64589e61.60898","name":"stringify","func":"var m = JSON.stringify(msg.payload);\nmsg.payload.op = m;\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":380,"wires":[["d1c0278d.5bf49","fdd5ab25.ad1cd8"]]},{"id":"def4328.f99acd","type":"function","z":"64589e61.60898","name":"センサー値を待避","func":"msg.sensor = {\n \"accelX\": msg.payload.d.accelX,\n \"accelY\": msg.payload.d.accelY,\n \"accelZ\": msg.payload.d.accelZ,\n \"ambientTemp\": msg.payload.d.ambientTemp,\n \"gyroX\": msg.payload.d.gyroX,\n \"gyroY\": msg.payload.d.gyroY,\n \"gyroZ\": msg.payload.d.gyroZ,\n \"humidity\": msg.payload.d.humidity,\n \"light\": msg.payload.d.light,\n \"magX\": msg.payload.d.magX,\n \"magY\": msg.payload.d.magY,\n \"magZ\": msg.payload.d.magZ,\n \"objectTemp\": msg.payload.d.objectTemp,\n};\n\nreturn msg;\n","outputs":1,"noerr":0,"x":530,"y":140,"wires":[["8bcc302e.8dbd58"]]},{"id":"ba9d26f1.6a516","type":"debug","z":"64589e61.60898","name":"書き込みデータ","active":true,"console":"false","complete":"payload","x":740,"y":260,"wires":[]},{"id":"838fa4c.eef7fd8","type":"comment","z":"64589e61.60898","name":"DBからのデータを可視化","info":"","x":150,"y":340,"wires":[]},{"id":"ecfd037.e72c4","type":"dashDB out","z":"64589e61.60898","service":"","table":"SENSOR2DB","name":"dashDBへ書き込み","x":750,"y":220,"wires":[]},{"id":"1f8c6452.0e2c14","type":"dashDB in","z":"64589e61.60898","service":"","query":"select hour,minute,ambienttemp, objecttemp from SENSOR2DB where (minute%10)=0;","params":"","name":"dashDBから読み込み","x":320,"y":380,"wires":[["422b2203.7d68e4"]]}]
#サンプル３：センサータグ（CC2650)からのIoTデータを指定した間隔でdashDBへ書き込み、それを読み出してhtmlで表示
下記のフローではセンサータグCC2650からのIoTデータを指定した間隔でdashDBへ書き込み、それを表示します。
- センサータグCC2650からデータを取得します
- 指定した間隔でdashDBへ直接書き込みます
- 必要に応じ、「センサー値を出力」functionノードを開き、冒頭のインターバル値を調整します
- 必要に応じ、緑色のデータベースから読み出すノードのSQL文を変更して、読み出すデータを選択します
DBへ書き込み、選択して表示
[{"id":"9b802212.ab298","type":"inject","z":"f2a0ab65.012a4","name":"1秒毎","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"x":90,"y":220,"wires":[[]]},{"id":"7fc9fcab.7ae5ac","type":"inject","z":"f2a0ab65.012a4","name":"restart","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"x":90,"y":260,"wires":[[]]},{"id":"db213626.dc386","type":"comment","z":"f2a0ab65.012a4","name":"IoTデータを指定した間隔でDBへ書き込み","info":"","x":180,"y":80,"wires":[]},{"id":"6e9b276c.ffdf2","type":"function","z":"f2a0ab65.012a4","name":"日付時刻の追加","func":"var d = new Date();\nvar localTime = d.getTime();\nvar localOffset = d.getTimezoneOffset() * 60000;\nvar utc = localTime + localOffset;\nvar offset = -9.0;\nvar result = utc - (3600000 * offset);\nvar date = parseInt(new Date(result) / 1000);\nvar dt = new Date(result);\n\nvar year = dt.getFullYear();\nvar month = dt.getMonth()+1;\nvar day = dt.getDate();\nvar hour = dt.getHours();\nvar minute = dt.getMinutes();\nvar second = dt.getSeconds();\n//if (!msg.payload) {\n// msg.payload = { \"initial\": \"value\" };\n//}\nif (!msg.date) {\n msg.date = { \"initial\": \"value\" };\n}\nmsg.date = {\n \"date\": date,\n \"year\": year,\n \"month\": month,\n \"day\": day,\n \"hour\": hour,\n \"minute\": minute,\n \"second\": second\n};\nreturn msg;","outputs":1,"noerr":0,"x":281,"y":160,"wires":[["90078fcf.843928"]]},{"id":"1800effa.3c6348","type":"function","z":"f2a0ab65.012a4","name":"表へ書き込む","func":"msg.payload = \n{ \n\tDATE : msg.date.date,\n\tDAY : msg.date.day,\n\tHOUR : msg.date.hour,\n\tMINUTE : msg.date.minute,\n\tMONTH : msg.date.month,\n\tSECOND : msg.date.second,\n\tYEAR : msg.date.year,\n\tACCELX : msg.sensor.accelX,\n\tACCELY : msg.sensor.accelY,\n\tACCELZ : msg.sensor.accelZ,\n\tAMBIENTTEMP : msg.sensor.ambientTemp,\n\tGYROX : msg.sensor.gyroX,\n\tGYROY : msg.sensor.gyroY,\n\tGYROZ : msg.sensor.gyroZ,\n\tHUMIDITY : msg.sensor.humidity,\n\tLIGHT : msg.sensor.light,\n MAGX : msg.sensor.magX,\n\tMAGY :msg.sensor.magY,\n\tMAGZ : msg.sensor.magZ,\n\tOBJECTTEMP : msg.sensor.objectTemp\n};\n\nreturn msg;\n","outputs":1,"noerr":0,"x":500,"y":240,"wires":[["3eb9243.1b9d1dc"]]},{"id":"124f8c12.f03f4c","type":"function","z":"f2a0ab65.012a4","name":"センサー値を出力","func":"var sampling_min_interval = 1;\nvar sampling_sec_interval = 60; // データを出力する間隔\n\n/*\nvar sum = 0, average = 0;\nvar sen1 = Math.floor(Math.random () * 10) + 1; // センサー値を生成（シミュレート）\n\nif ( !context.array ) {\n context.array = new Array (10); //直近１０件分を保持\n}\nvar shifted = context.array.shift();\ncontext.array.push(sen1); // 最新の値を保存\nvar length = context.array.length;\n\nfor (k=0; k<length; k++) {\n sum = sum + context.array[k]; // 合計を算出\n}\n\nvar hour = JSON.stringify(msg.date.hour);\nvar min_org = JSON.stringify(msg.date.minute);\nvar min = ( \"0\" + min_org ).substr( -2 ); // 一桁分の場合、二桁に\nvar sec_org = JSON.stringify(msg.date.second);\nvar sec = ( \"0\" + sec_org ).substr( -2 ); // 一桁秒の場合、二桁に\nvar time = hour + \":\" + min + \":\" + sec;\n\naverage = sum / length;\nvar data = [[time],[sen1],[average]];\nmsg.sensor.average = average;\n*/\nif ( ( msg.date.second % sampling_sec_interval ) !== 0 ) return;\nif ( ( msg.date.minute % sampling_min_interval ) !== 0 ) return;\nreturn msg;\n","outputs":1,"noerr":0,"x":290,"y":240,"wires":[["1800effa.3c6348"]]},{"id":"f6b0debb.082e48","type":"ibmiot in","z":"f2a0ab65.012a4","authentication":"quickstart","apiKey":"","inputType":"evt","deviceId":"","applicationId":"","deviceType":"+","eventType":"+","commandType":"","format":"json","name":"IBM IoT","service":"quickstart","allDevices":"","allApplications":"","allDeviceTypes":true,"allEvents":true,"allCommands":"","allFormats":"","qos":0,"x":70,"y":160,"wires":[["6e9b276c.ffdf2"]]},{"id":"e99b18e9.c62eb8","type":"http in","z":"f2a0ab65.012a4","name":"","url":"/test34","method":"get","swaggerDoc":"","x":90,"y":400,"wires":[["92cc3f19.ad62b8"]]},{"id":"cdf0fddf.c45b08","type":"debug","z":"f2a0ab65.012a4","name":"op","active":true,"console":"false","complete":"payload.op","x":750,"y":440,"wires":[]},{"id":"7002bbf9.47486c","type":"template","z":"f2a0ab65.012a4","name":"htmlを返す","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n <meta charset=\"utf-8\">\n <title>データベースからのIoTデータ表示</title>\n <script src=\"https://d3js.org/d3.v4.min.js\"></script>\n\n <style type=\"text/css\">\n /* ここにスタイルルールを追加します */\n .axis path,\n .axis line {\n fill: none;\n stroke: black;\n shape-rendering: crispEdges;\n }\n .axis text {\n font-family: sans-serif;\n font-size: 11px;\n }\n </style>\n\n <div id=\"op\" foo={{payload.op}}/>\n\n<script type=\"text/javascript\">\n\nvar op_a = document.getElementById( 'op' ).getAttribute( 'foo' );\t//データを取得\nop_a = op_a.substr( 0, op_a.length-1 ) ;\t//末尾の\"/\"でエラーになるので\nvar op_a2 = JSON.parse(op_a);\t//JSON文字列からjavascriptオブジェクトを復元\n\nvar op_a3 = new Array();\nfor(var i in op_a2){\n\top_a3.push(op_a2[i].AMBIENTTEMP);\t//AMBIENTTEMPを取り出して配列op_a3に順次格納\n}\n\nvar op_a5 = new Array();\nfor(var i in op_a2){\n\top_a5.push(op_a2[i].HOUR + \":\" + (( \"0\" + op_a2[i].MINUTE ).substr( -2 )));\n}\n\n // 幅（ Width ）と高さ（ height ）\n var w = 800;\n var h = 300;\n var zoom =5;\n var barPadding = 1; // 棒グラフの棒と棒の間隔\n var margin = 30; // グラフ表示域のまわりの余白\n \n var dataset = op_a3;\n var datasetT = op_a5;\n \n // スケール関数の生成\n var xScale = d3.scaleLinear()\n .domain([0, d3.max(dataset, function(d) { return d; })])\n .range([margin, w + margin * 2]);\n\n var yScale = d3.scaleLinear()\n .domain([0, (h-margin) / zoom]) // Y軸のスケールを棒グラフと一致させる\n .range([h-margin, 0]); // Y軸表示場所\n\n // X 軸の定義\n var xAxis = d3.axisBottom()\n .scale(xScale);\n\n // Y 軸の定義\n var yAxis = d3.axisLeft(yScale);\n \n // SVG 要素の生成\n var canvas = d3.select(\"body\")\n .append(\"svg\")\n .attr(\"width\", w)\n .attr(\"height\", h);\n\n canvas.selectAll(\"rect\")\n .data(dataset)\n .enter()\n .append(\"rect\")\n .attr(\"x\", function(d, i) {\n return i * ((w-margin) / dataset.length) + margin;\n })\n .attr(\"y\", function(d) {\n return h - (d * zoom) - margin;\n })\n .attr(\"width\", (w-margin) / dataset.length - barPadding)\n .attr(\"height\", function(d) {\n return d * zoom;\n })\n .attr(\"fill\", function(d) {\n// return \"rgb(0, 0, \" + ( ( (d-20) * 10 ) + 100 ) + \")\";\n return \"rgb(0, 51, 255)\";\n });\n\t\t \n canvas.selectAll(\"text\")\n .data(datasetT)\n .enter()\n .append(\"text\")\n .text(function(d) {\n return d;\n })\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", function(d, i) {\n return i * ((w-margin) / dataset.length) + margin + ((w-margin) / dataset.length - barPadding ) / 2;\n })\n .attr(\"y\", function(d) {\n return h;\n })\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"11px\")\n .attr(\"fill\", \"black\");\n\n/* canvas.selectAll(\"text\")\n .data(dataset)\n .enter()\n .append(\"text\")\n .text(function(d) {\n return d;\n })\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", function(d, i) {\n return i * ((w-margin) / dataset.length) + (w / dataset.length - barPadding) / 2 + margin;\n })\n .attr(\"y\", function(d) {\n return h - (d * 4) + 14 - margin;\n })\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"11px\")\n .attr(\"fill\", \"white\");\n*/\n // X 軸の生成\n// canvas.append(\"g\")\n// .attr(\"class\", \"axisBottom\")\n// .attr(\"transform\", \"translate(0,\" + (h - margin) + \")\")\n// .call(xAxis);\n\n // Y 軸の生成\n canvas.append(\"g\")\n .attr(\"class\", \"axisLeft\")\n .attr(\"transform\", \"translate(\" + margin + \",0)\")\n .call(yAxis);\n\t\t \n\t\t \n var m = 0;\n var mh = 0;\n var mm = 0;\n var mt = 0;\n for(var i in op_a2){\n\t if (m < Number(op_a2[i].AMBIENTTEMP)) {\n\t m = Number(op_a2[i].AMBIENTTEMP);\n\t\t mh = op_a2[i].HOUR;\n\t\t mm = ( \"0\" + op_a2[i].MINUTE ).substr( -2 ) ;\n\t\t mt = op_a2[i].AMBIENTTEMP;\n //console.log(\"max found was \" + mh + \":\" + mm + \" \" + mt);\n\t }\n }\n\n m = mh + \":\" + mm;\n\n window.onload = function onLoad() {\n var target1 = document.getElementById(\"output1\");\n target1.innerHTML = m;\n var target2 = document.getElementById(\"output2\");\n target2.innerHTML = mt;\n\t}\n\t\n</script>\n</head>\n<body>\n\n<div id=\"a-box\" style=\"background-color: #87cefa; padding: 20px;\">\n\t<h1>データベースからのIoTデータ表示</h1>\n\t<br />\n\t<p>\n\t\tデータベースに保存されたIoTデータを可視化します<br />\n\t</p>\n</div>\n\n<div id=\"b-box\" style=\"background-color: #ecf2fe; padding: 20px; \">\n\t\t<h2>最高値の時刻</h2>\n\t\t\t<div style=\"text-align:left\" id=\"output0\"></div>\n\t\t\t<div style=\"text-align:left;font-size: 18pt\" id=\"output1\"></div>\n\t\t<h2>最高値 </h2>\n\t\t\t<span style=\"text-align:left;font-size: 18pt\" id=\"output2\"></span> ℃\n</div>\n</body>\n</html>","x":770,"y":400,"wires":[["928a0ea8.cbdab"]]},{"id":"928a0ea8.cbdab","type":"http response","z":"f2a0ab65.012a4","name":"","x":910,"y":400,"wires":[]},{"id":"43a2beab.5938e8","type":"function","z":"f2a0ab65.012a4","name":"stringify","func":"var m = JSON.stringify(msg.payload);\nmsg.payload.op = m;\nreturn msg;","outputs":1,"noerr":0,"x":600,"y":400,"wires":[["7002bbf9.47486c","cdf0fddf.c45b08"]]},{"id":"6953c1c.cf749c","type":"dashDB in","z":"f2a0ab65.012a4","service":"dashDB-rk","query":"select hour,minute,ambienttemp, objecttemp from SENSOR2DB where (minute%10)=0;","params":"","name":"dashDBから読み込み","x":300,"y":400,"wires":[[]]},{"id":"90078fcf.843928","type":"function","z":"f2a0ab65.012a4","name":"センサー値を待避","func":"msg.sensor = {\n \"accelX\": msg.payload.d.accelX,\n \"accelY\": msg.payload.d.accelY,\n \"accelZ\": msg.payload.d.accelZ,\n \"ambientTemp\": msg.payload.d.ambientTemp,\n \"gyroX\": msg.payload.d.gyroX,\n \"gyroY\": msg.payload.d.gyroY,\n \"gyroZ\": msg.payload.d.gyroZ,\n \"humidity\": msg.payload.d.humidity,\n \"light\": msg.payload.d.light,\n \"magX\": msg.payload.d.magX,\n \"magY\": msg.payload.d.magY,\n \"magZ\": msg.payload.d.magZ,\n \"objectTemp\": msg.payload.d.objectTemp,\n};\n\nreturn msg;\n","outputs":1,"noerr":0,"x":510,"y":160,"wires":[["124f8c12.f03f4c"]]},{"id":"7d0b0217.a388b4","type":"dashDB out","z":"f2a0ab65.012a4","service":"dashDB-rk","table":"SENSOR2DB","name":"dashDBへ書き込み","x":730,"y":240,"wires":[]},{"id":"3eb9243.1b9d1dc","type":"debug","z":"f2a0ab65.012a4","name":"書き込みデータ","active":true,"console":"false","complete":"payload","x":720,"y":280,"wires":[]},{"id":"92cc3f19.ad62b8","type":"dashDB in","z":"f2a0ab65.012a4","service":"dashDB-rk","query":"select hour,minute,ambienttemp, objecttemp from SENSOR2DB where (minute%30)=0 and day=29;","params":"","name":"30分毎のデータを読み込み","x":320,"y":440,"wires":[["43a2beab.5938e8"]]},{"id":"b0c6261f.e2346","type":"dashDB in","z":"f2a0ab65.012a4","service":"dashDB-rk","query":"select hour,minute,ambienttemp, objecttemp from SENSOR2DB where (minute%60)=0;","params":"","name":"一時間毎のデータを読み込み","x":320,"y":480,"wires":[[]]},{"id":"f15821f9.e9ba7","type":"dashDB in","z":"f2a0ab65.012a4","service":"dashDB-rk","query":"select month,day,hour,minute,ambienttemp, objecttemp from SENSOR2DB where (minute%15)=0 and day=29 and hour<20;","params":"","name":"30分毎の日付も含めデータを読み込み","x":350,"y":560,"wires":[["4fa21c30.4eadd4"]]},{"id":"4fa21c30.4eadd4","type":"function","z":"f2a0ab65.012a4","name":"stringify","func":"var m = JSON.stringify(msg.payload);\nmsg.payload.op = m;\nreturn msg;","outputs":1,"noerr":0,"x":600,"y":560,"wires":[["5e1ab7c3.c3f428"]]},{"id":"5e1ab7c3.c3f428","type":"template","z":"f2a0ab65.012a4","name":"htmlを返す","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n <meta charset=\"utf-8\">\n <title>データベースからのIoTデータ表示</title>\n <script src=\"https://d3js.org/d3.v4.min.js\"></script>\n\n <style type=\"text/css\">\n /* ここにスタイルルールを追加します */\n .axis path,\n .axis line {\n fill: none;\n stroke: black;\n shape-rendering: crispEdges;\n }\n .axis text {\n font-family: sans-serif;\n font-size: 11px;\n }\n </style>\n\n <div id=\"op\" foo={{payload.op}}/>\n\n<script type=\"text/javascript\">\n\nvar op_a = document.getElementById( 'op' ).getAttribute( 'foo' );\t//データを取得\nop_a = op_a.substr( 0, op_a.length-1 ) ;\t//末尾の\"/\"でエラーになるので\nvar op_a2 = JSON.parse(op_a);\t//JSON文字列からjavascriptオブジェクトを復元\n\nvar op_a3 = new Array();\nfor(var i in op_a2){\n\top_a3.push(op_a2[i].AMBIENTTEMP);\t//AMBIENTTEMPを取り出して配列op_a3に順次格納\n}\n\nvar op_a5 = new Array();\nfor(var i in op_a2){\n\top_a5.push(op_a2[i].HOUR + \":\" + (( \"0\" + op_a2[i].MINUTE ).substr( -2 )));\n}\n\n // 幅（ Width ）と高さ（ height ）\n var w = 800;\n var h = 300;\n var zoom =5;\n var barPadding = 1; // 棒グラフの棒と棒の間隔\n var margin = 30; // グラフ表示域のまわりの余白\n \n var dataset = op_a3;\n var datasetT = op_a5;\n \n // スケール関数の生成\n var xScale = d3.scaleLinear()\n .domain([0, d3.max(dataset, function(d) { return d; })])\n .range([margin, w + margin * 2]);\n\n var yScale = d3.scaleLinear()\n .domain([0, (h-margin) / zoom]) // Y軸のスケールを棒グラフと一致させる\n .range([h-margin, 0]); // Y軸表示場所\n\n // X 軸の定義\n var xAxis = d3.axisBottom()\n .scale(xScale);\n\n // Y 軸の定義\n var yAxis = d3.axisLeft(yScale);\n \n // SVG 要素の生成\n var canvas = d3.select(\"body\")\n .append(\"svg\")\n .attr(\"width\", w)\n .attr(\"height\", h);\n\n canvas.selectAll(\"rect\")\n .data(dataset)\n .enter()\n .append(\"rect\")\n .attr(\"x\", function(d, i) {\n return i * ((w-margin) / dataset.length) + margin;\n })\n .attr(\"y\", function(d) {\n return h - (d * zoom) - margin;\n })\n .attr(\"width\", (w-margin) / dataset.length - barPadding)\n .attr(\"height\", function(d) {\n return d * zoom;\n })\n .attr(\"fill\", function(d) {\n// return \"rgb(0, 0, \" + ( ( (d-20) * 10 ) + 100 ) + \")\";\n return \"rgb(0, 51, 255)\";\n });\n\t\t \n canvas.selectAll(\"text\")\n .data(datasetT)\n .enter()\n .append(\"text\")\n .text(function(d) {\n return d;\n })\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", function(d, i) {\n return i * ((w-margin) / dataset.length) + margin + ((w-margin) / dataset.length - barPadding ) / 2;\n })\n .attr(\"y\", function(d) {\n return h;\n })\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"11px\")\n .attr(\"fill\", \"black\");\n\n/* canvas.selectAll(\"text\")\n .data(dataset)\n .enter()\n .append(\"text\")\n .text(function(d) {\n return d;\n })\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", function(d, i) {\n return i * ((w-margin) / dataset.length) + (w / dataset.length - barPadding) / 2 + margin;\n })\n .attr(\"y\", function(d) {\n return h - (d * 4) + 14 - margin;\n })\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"11px\")\n .attr(\"fill\", \"white\");\n*/\n // X 軸の生成\n// canvas.append(\"g\")\n// .attr(\"class\", \"axisBottom\")\n// .attr(\"transform\", \"translate(0,\" + (h - margin) + \")\")\n// .call(xAxis);\n\n // Y 軸の生成\n canvas.append(\"g\")\n .attr(\"class\", \"axisLeft\")\n .attr(\"transform\", \"translate(\" + margin + \",0)\")\n .call(yAxis);\n\t\t \n\t\t \n var m = 0;\n var mh = 0;\n var mm = 0;\n var mt = 0;\n var month = 0;\n var day = 0;\n for(var i in op_a2){\n\t if (m < Number(op_a2[i].AMBIENTTEMP)) {\n\t m = Number(op_a2[i].AMBIENTTEMP);\n\t\t month = op_a2[i].MONTH;\n\t\t day = op_a2[i].DAY; \n\t\t mh = op_a2[i].HOUR;\n\t\t mm = ( \"0\" + op_a2[i].MINUTE ).substr( -2 ) ;\n\t\t mt = op_a2[i].AMBIENTTEMP;\n //console.log(\"max found was \" + mh + \":\" + mm + \" \" + mt);\n\t }\n }\n\n m = mh + \":\" + mm;\n\n window.onload = function onLoad() {\n var target1 = document.getElementById(\"output1\");\n target1.innerHTML = m;\n var target2 = document.getElementById(\"output2\");\n target2.innerHTML = mt;\n\n\t var target3 = document.getElementById(\"output3\");\n target3.innerHTML = month;\n var target4 = document.getElementById(\"output4\");\n target4.innerHTML = day;\n\t}\n\t\n</script>\n</head>\n<body>\n\n<div id=\"a-box\" style=\"background-color: #87cefa; padding: 20px;\">\n\t<h1>データベースからのIoTデータ表示</h1>\n\t<br />\n\t<p>\n\t\tデータベースに保存されたIoTデータを可視化します<br />\n\t</p>\n</div>\n\n<div id=\"b-box\" style=\"background-color: #ecf2fe; padding: 20px; \">\n\t\t<h2>日付</h2>\n\t\t\t<span style=\"text-align:left;font-size: 18pt\" id=\"output3\"></span> 月\n\t\t\t<span style=\"text-align:left;font-size: 18pt\" id=\"output4\"></span> 日\n\t\t<h2>最高値の時刻</h2>\n\t\t\t<div style=\"text-align:left\" id=\"output0\"></div>\n\t\t\t<div style=\"text-align:left;font-size: 18pt\" id=\"output1\"></div>\n\t\t<h2>最高値 </h2>\n\t\t\t<span style=\"text-align:left;font-size: 18pt\" id=\"output2\"></span> ℃\n</div>\n</body>\n</html>","x":770,"y":560,"wires":[["3609e22b.58e26e"]]},{"id":"3609e22b.58e26e","type":"http response","z":"f2a0ab65.012a4","name":"","x":910,"y":560,"wires":[]},{"id":"77f5b038.8b8ce8","type":"http in","z":"f2a0ab65.012a4","name":"","url":"/test35","method":"get","swaggerDoc":"","x":90,"y":560,"wires":[["f15821f9.e9ba7"]]},{"id":"24c5f10a.912c06","type":"comment","z":"f2a0ab65.012a4","name":"DBから読み出したデータをhtmlで表示","info":"","x":170,"y":360,"wires":[]}]
#サンプル４：AlpS Smart IoT ModuleからのIoTデータを指定した間隔でdashDBへ書き込み、それを読み出してhtmlで表示
下記のフローではAlps Smart IoT ModuleからのIoTデータを指定した間隔でdashDBへ書き込み、それを表示します。
- Alps Smart IoT Moduleからデータを取得します
- 指定した間隔でdashDBへ直接書き込みます。このサンプルではALPSIOTという表へ書き込んでいます
- 2つのオレンジ色のTemplateノードを開き「このIoTアプリの名前」部分をそれぞれのNode-REDアプリ名に一致させます
- 必要に応じ、「センサー値を出力」functionノードを開き、冒頭のインターバル値を調整します
- 必要に応じ、緑色のデータベースから読み出すノードのSQL文を変更して、読み出すデータを選択します
DBへ書き込み、選択して表示
[{"id":"f65c24c1.63c7b8","type":"http in","z":"2f7e4ebb.3a553a","name":"","url":"/test54a","method":"get","swaggerDoc":"","x":110,"y":100,"wires":[["53dec3e1.f5c2dc"]]},{"id":"6b45354f.4e0f2c","type":"http response","z":"2f7e4ebb.3a553a","name":"","x":490,"y":100,"wires":[]},{"id":"53dec3e1.f5c2dc","type":"template","z":"2f7e4ebb.3a553a","name":"入力用test54aを返す","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 <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: #cee4ae;\n height: 500px;\n text-align:left;\n font-size: 18pt;\n padding: 20px;\n font-family: Meiryo;\n }\n .y1 {\n background-color: #e4dc8a;\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 <div id='basic'>\n <div class='a1'>\n <h2>IoT Quick Dashboard</h2><br>\n データベースに保存されたIoTデータを可視化します\n </div>\n <div class='b1'>\n <b>入力！</b>\n <P>表示対象の属性と期間を指定します。</P>\n <form action=\"http://このIoTアプリの名前.mybluemix.net/test55a\" method=\"get\">\n <select name=\"machine\" style=\"font-size:24px\">\n <option>ALPSIOT</option>\n <option>ALPSIOT2</option>\n </select><br><br>\n この日時から <input type=\"datetime-local\" name=\"starttime\" value=\"2014-01-21T10:00\" step=\"60\" style=\"font-size:18px\"><br>\n この日時まで <input type=\"datetime-local\" name=\"endtime\" value=\"2014-01-21T16: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 </div>\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 <div class=\"z1\">\n copyright (c) abc.com All right reserved.\n </div>\n </div>\n </body>\n </html>\n","x":300,"y":100,"wires":[["6b45354f.4e0f2c"]]},{"id":"3f28fb34.21ad8c","type":"http in","z":"2f7e4ebb.3a553a","name":"","url":"/test55a","method":"get","swaggerDoc":"","x":110,"y":200,"wires":[["c95233b9.8ea46"]]},{"id":"fa420c3e.f2347","type":"comment","z":"2f7e4ebb.3a553a","name":"DBから値を取得し表示","info":"","x":120,"y":160,"wires":[]},{"id":"239ed8cc.23c82","type":"comment","z":"2f7e4ebb.3a553a","name":"表示する属性と期間を指定","info":"","x":130,"y":60,"wires":[]},{"id":"c95233b9.8ea46","type":"function","z":"2f7e4ebb.3a553a","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\n//msg.newstarttime = parseInt ( Date(msg.startime) );\n//msg.newendtime = parseInt ( Date(msg.endime) );\n\n\nvar st = msg.startime;\n\nmsg.newstarttime = Date.parse(st);\n\n//var st_parse = st.replace(/-/g, '/');\n//msg.newstarttime = Date.parse(st_parse);\n\n//msg.newstarttime = Date.parse( st.datetime.replace( /-/g, '/') ) / 1000;\n//msg.newstarttime = Date.parse( st ) / 1000;\n\n//var et = msg.endime;\nvar st_parse = msg.starttime.replace(/-/g, '/');\nmsg.newstarttime = Date.parse(st_parse) / 1000;\n\nvar et_parse = msg.endtime.replace(/-/g, '/');\nmsg.newendtime = Date.parse(et_parse) / 1000;\n\n//msg.newendtime = Date.parse( et.replace( /-/g, '/') ) / 1000;\n//msg.newendtime = Date.parse( et ) / 1000;\n\n//var ts = \"2011-10-14 00:00:00\";\n//print( Date.parse( ts.replace( /-/g, '/') ) / 1000 );\n\n\nmsg.machine = msg.payload.machine;\n\nreturn msg;","outputs":1,"noerr":0,"x":270,"y":200,"wires":[["91c4ec0d.755b68"]]},{"id":"4c2f7051.8ad29","type":"function","z":"2f7e4ebb.3a553a","name":"結果をセット","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]['DATE'];\n var c1 = i;\n arr01.push([c1,parseFloat(msg.payload[i]['DATE'])]);\n arr02.push([c1,parseFloat(msg.payload[i]['HOUR'])]);\n arr03.push([c1,parseFloat(msg.payload[i]['MINUTE'])]);\n arr04.push([c1,parseFloat(msg.payload[i]['ACCELX'])]);\n arr05.push([c1,parseFloat(msg.payload[i]['ACCELY'])]);\n arr06.push([c1,parseFloat(msg.payload[i]['ACCELZ'])]);\n arr07.push([c1,parseFloat(msg.payload[i]['AMBIENTLIGHT'])]);\n arr08.push([c1,parseFloat(msg.payload[i]['GEOMAGNETICX'])]);\n arr09.push([c1,parseFloat(msg.payload[i]['GEOMAGNETICY'])]);\n arr10.push([c1,parseFloat(msg.payload[i]['GEOMAGNETICZ'])]);\n arr11.push([c1,parseFloat(msg.payload[i]['HUMIDITY'])]);\n arr12.push([c1,parseFloat(msg.payload[i]['PRESSURE'])]);\n arr13.push([c1,parseFloat(msg.payload[i]['UV'])]);\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":580,"y":200,"wires":[["a1b765cf.fdbfa"]]},{"id":"a1b765cf.fdbfa","type":"template","z":"2f7e4ebb.3a553a","name":"test55a.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.c1 {\n background-color: #cee4ae;\n height: 500px;\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.h1 {\n clear: both;\n height: 100px;\n padding-left: 20px;\n background-color: #c1d8ac;\n}\n.j1 {\n height: 100px;\n padding-left: 20px;\n background-color: #98d98e;\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='c1'>\n <b>入力！</b>\n <P>表示対象の属性と期間を指定します。</P>\n <form action=\"http://このIoTアプリの名前.mybluemix.net/test55a\" method=\"get\">\n <select name=\"machine\" style=\"font-size:24px\">\n <option>ALPSIOT</option>\n <option>ALPSIOT2</option>\n </select><br><br>\n\n この日時から <input type=\"datetime-local\" name=\"starttime\" value=\"2017-01-16T10:00\" step=\"60\" style=\"font-size:18px\"><br>\n この日時まで <input type=\"datetime-local\" name=\"endtime\" value=\"2017-01-16T16: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 class='h1' align=\"left\">\n <h3>アラート</h3>\n </div>\n <div class='j1' align=\"center\">\n\n </div>\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\tcopyright (c) abc.com All right reserved.\n</div>\n</div>\n\n\n<script>\n\ngoogle.load(\"visualization\", \"1\", {packages:[\"corechart\"]});\ngoogle.setOnLoadCallback(drawChart02);\n\nfunction drawChart02() {\n d1ChartData = google.visualization.arrayToDataTable(\n [[\"INCOMING_EVENT_CD\",\"照度\"],[439,7.0007]] );\n d1ChartData.removeRow(0);\n d1ChartData.addRows( {{{ payload.r07 }}} );\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.r12 }}} );\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\",\"UV値\"],[439,7.0007]] );\n d3ChartData.removeRow(0);\n d3ChartData.addRows( {{{ payload.r13 }}} );\n d3ChartOptions = { title: 'UV値',\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\",\"加速度(X軸)\"],[439,7.0007]] );\n e1ChartData.removeRow(0);\n e1ChartData.addRows( {{{ payload.r04 }}} );\n e1ChartOptions = { title: '加速度(X軸)',\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\",\"加速度(Y軸)\"],[439,7.0007]] );\n e2ChartData.removeRow(0);\n e2ChartData.addRows( {{{ payload.r05 }}} );\n e2ChartOptions = { title: '加速度(Y軸)',\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\",\"加速度(Z軸)\"],[439,7.0007]] );\n e3ChartData.removeRow(0);\n e3ChartData.addRows( {{{ payload.r06 }}} );\n e3ChartOptions = { title: '加速度(Z軸)',\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\",\"地磁気(X軸)\"],[439,7.0007]] );\n f1ChartData.removeRow(0);\n f1ChartData.addRows( {{{ payload.r08 }}} );\n f1ChartOptions = { title: '地磁気(X軸)',\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\",\"地磁気(Y軸)\"],[439,7.0007]] );\n f2ChartData.removeRow(0);\n f2ChartData.addRows( {{{ payload.r09 }}} );\n f2ChartOptions = { title: '地磁気(Y軸)',\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\",\"地磁気(Z軸)\"],[439,7.0007]] );\n f3ChartData.removeRow(0);\n f3ChartData.addRows( {{{ payload.r10 }}} );\n f3ChartOptions = { title: '地磁気(Z軸)',\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\",\"UV値\"],[439,7.0007]] );\n g3ChartData.removeRow(0);\n g3ChartData.addRows( {{{ payload.r13 }}} );\n g3ChartOptions = { title: 'UV値',\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</script>\n\n</body>\n</html>\n","x":770,"y":200,"wires":[["2f29f9c6.825946"]]},{"id":"2f29f9c6.825946","type":"http response","z":"2f7e4ebb.3a553a","name":"","x":930,"y":200,"wires":[]},{"id":"88f972da.c66448","type":"debug","z":"2f7e4ebb.3a553a","name":"","active":true,"console":"false","complete":"false","x":580,"y":240,"wires":[]},{"id":"91c4ec0d.755b68","type":"dashDB in","z":"2f7e4ebb.3a553a","dashDB":"","service":"_ext_","query":"select * from ALPSIOT \nwhere date between ? and ?;","params":"msg.newstarttime,msg.newendtime","name":"","x":420,"y":200,"wires":[["4c2f7051.8ad29","88f972da.c66448"]]}]
#サンプル５：AlpS Smart IoT ModuleからのIoTデータをWebSocketでリアルタイム表示
下記のフローではAlps Smart IoT ModuleからのIoTデータをWebSocketでリアルタイムに表示します。
- Alps Smart IoT ModuleからのデータをWebSocketで出力します。このサンプルではwss/flow56aというsocketで出力していると想定しています
- オレンジ色のTemplateノードを開き「このIoTアプリの名前」部分をWebSocketを出力しているアプリ名に一致させます
センサーからのIoTデータをリアルタイムで表示
[{"id":"ed8f0bb.cd5e278","type":"template","z":"89d26c8f.7f48a","name":"test56a.htmlを返す","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n <head>\n <title>センサーからの情報を表示</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 width: 1200px;\n margin: auto;\n}\n\n.a1 {\n background-color: #98d98e;\n padding: 20px;\n height: 100px;\n}\n.b1 {\n background-color: #e4de8a;\n padding-left: 20px;\n height: 40px;\n text-align:left;\n font-size: 18pt\n}\n#d1 {\n clear: both;\n float: left;\n width: 400px;\n height: 150px;\n background-color: #c1d8ac;\n}\n#d2 {\n float: left;\n width: 400px;\n height: 150px;\n background-color: #b9d08b;\n}\n#d3 {\n float: left;\n width: 400px;\n height: 150px;\n background-color: #badcad;\n}\n\n#e1 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #c1d8ac;\n}\n#e2 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #b9d08b;\n}\n#e3 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #badcad;\n}\n\n#f1 {\n float: left;\n width: 400px;\n height: 200px;\n background-color: #c1d8ac;\n}\n#f2 {\n float: left;\n width: 400px;\n height: 200px;\n background-color: #b9d08b;\n}\n#f3 {\n float: left;\n width: 400px;\n height: 200px;\n background-color: #badcad;\n}\n\n#g1 {\n float: left;\n width: 400px;\n height: 150px;\n background-color: #c1d8ac;\n}\n#g2 {\n float: left;\n width: 400px;\n height: 150px;\n background-color: #b9d08b;\n}\n#g3 {\n float: left;\n width: 400px;\n height: 150px;\n background-color: #badcad;\n}\n\n#h1 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #98d98e;\n}\n#h2 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #c1d8ac;\n}\n#h3 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #93b69c;\n}\n\n#j1 {\n float: left;\n width: 400px;\n height: 200px;\n background-color: #98d98e;\n}\n#j2 {\n float: left;\n width: 400px;\n height: 200px;\n background-color: #c1d8ac;\n}\n#j3 {\n float: left;\n width: 400px;\n height: 200px;\n background-color: #93b69c;\n}\n\n#k1 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #c1d8ac;\n}\n#k2 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #b9d08b;\n}\n#k3 {\n float: left;\n width: 400px;\n height: 120px;\n background-color: #badcad;\n}\n\n#m1 {\n float: left;\n width: 400px;\n height: 200px;\n background-color: #c1d8ac;\n}\n#m2 {\n float: left;\n width: 400px;\n height: 200px;\n background-color: #b9d08b;\n}\n#m3 {\n float: left;\n width: 400px;\n height: 200px;\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\tpadding: 20px;\n background-color: #c1d8ac;\n}\n.y1 {\n background-color: #e4dc8a;\n\tpadding: 20px;\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 style=\"background-color: #EAE5E3\">\n\n <div id='basic'>\n\n <div class='a1'>\n <h2>IoT Sample Dashboard</h2>\n IoTデータをリアルタイムで可視化します\n </div>\n <div class='b1'>\n 時刻\n <span id=\"timedata\"></span>\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' >\n <h2 style=\"margin-left:10px;\">照度</h2>\n <span style=\"text-align:left; font-size:18pt; margin-left:100px;\" id=\"e1data\"></span>lux\n </div>\n <div id='e2'>\n <h2 style=\"margin-left:10px;\">気圧</h2>\n \t\t\t<span style=\"text-align: left;font-size:18pt; margin-left:100px;\" id=\"e2data\"></span>hPa\n </div>\n <div id='e3'>\n <h2 style=\"margin-left:10px;\">UV値</h2>\n \t\t\t<span style=\"text-align: left;font-size:18pt; margin-left:100px;\" id=\"e3data\"></span>\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='h1' >\n <h2 style=\"margin-left:10px;\">加速度(X軸)</h2>\n <span style=\"text-align:left; font-size:18pt; margin-left:100px;\" id=\"h1data\"></span>\n </div>\n <div id='h2'>\n <h2 style=\"margin-left:10px;\">加速度(Y軸)</h2>\n \t\t\t<span style=\"text-align: left;font-size:18pt; margin-left:100px;\" id=\"h2data\"></span>\n </div>\n <div id='h3'>\n <h2 style=\"margin-left:10px;\">加速度(Z軸)</h2>\n \t\t\t<!--- <span style=\"text-align: left;font-size:18pt; margin-left:100px;\" id=\"d8data\"></span> --->\n <span style=\"text-align: left;font-size:18pt; margin-left:100px;\" id=\"h3data\"></span>\n </div>\n\n <div id='j1' align=\"center\">\n j1\n </div>\n <div id='j2' align=\"center\">\n j2\n </div>\n <div id='j3' align=\"center\">\n j3\n </div>\n\n <div id='k1' >\n <h2 style=\"margin-left:10px;\">地磁気(X軸)</h2>\n <span style=\"text-align:left; font-size:18pt; margin-left:100px;\" id=\"k1data\"></span>\n </div>\n <div id='k2'>\n <h2 style=\"margin-left:10px;\">地磁気(Y軸)</h2>\n \t\t\t<span style=\"text-align: left;font-size:18pt; margin-left:100px;\" id=\"k2data\"></span>\n </div>\n <div id='k3'>\n <h2 style=\"margin-left:10px;\">地磁気(Z軸)</h2>\n \t\t\t<!--- <span style=\"text-align: left;font-size:18pt; margin-left:100px;\" id=\"d8data\"></span> --->\n <span style=\"text-align: left;font-size:18pt; margin-left:100px;\" id=\"k3data\"></span>\n </div>\n\n <div id='m1' align=\"center\">\n m1\n </div>\n <div id='m2' align=\"center\">\n m2\n </div>\n <div id='m3' align=\"center\">\n m3\n </div>\n\n <div class='v1'>\n <h2 style=\"margin-left:10px;\">アラート</h2>\n <span style=\"text-align: left;font-size:18pt; margin-left:100px;\" id=\"alerttext\"></span>\n </div>\n\n <div class='x1'>\n <!--- m1 --->\n </div>\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\tcopyright (c) abc.com All right reserved.\n</div>\n</div>\n\n\n<script>\nvar c2alert0 = 0, c2alert1 = 0, c2alert2 = 0, c2alert3 = 0, c2alert4 = 0, c2alert5 = 0, c2alert6 = 0;\nvar connection = new WebSocket('wss://このIoTアプリの名前.mybluemix.net/wss/flow56a');\n\nconnection.onopen = function () {\n console.log(\"websocket connected\");\n};\n\n// Log errors\nconnection.onerror = function (error) {\n console.log('WebSocket Error ' + error);\n};\n\n// Log messages from the server\nconnection.onmessage = function (m) {\n //console.log('Server: ' + m.data);\n\tdoIt(m);\n};\n\n// ゲージとラインチャートを準備\n// ラインチャートのAPIは https://developers.google.com/chart/interactive/docs/reference\n//\ngoogle.load('visualization', '1', {packages:['gauge', 'corechart']});\ngoogle.setOnLoadCallback(drawChart);\n\nfunction drawChart() {\n\td1GaugeData = google.visualization.arrayToDataTable([\n\t\t['Label', 'Value'],\n\t\t['照度', 0]\n\t]);\n d1GaugeOptions = {\n\t\twidth: 500, height: 150,\n\t\tmin: 0, max: 500,\n\t\tyellowFrom:300, yellowTo: 400,\n redFrom: 400, redTo: 500,\n\t\tminorTicks: 5\n\t};\n d1Gauge = new google.visualization.Gauge(document.getElementById('d1'));\n\td1Gauge.draw(d1GaugeData, d1GaugeOptions);\n\n d2GaugeData = google.visualization.arrayToDataTable([\n\t\t['Label', 'Value'],\n\t\t['気圧', 0]\n\t]);\n d2GaugeOptions = {\n\t\twidth: 500, height: 150,\n\t\tmin: 1002.75, max: 1003.35,\n\t\tyellowFrom: 1002.9, yellowTo: 1003.05,\n redFrom: 1002.75, redTo: 1002.9,\n\t\tminorTicks: 5\n\t};\n d2Gauge = new google.visualization.Gauge(document.getElementById('d2'));\n\td2Gauge.draw(d2GaugeData, d2GaugeOptions);\n\n d3GaugeData = google.visualization.arrayToDataTable([\n\t\t['Label', 'Value'],\n\t\t['UV値', 0]\n\t]);\n d3GaugeOptions = {\n\t\twidth: 500, height: 150,\n\t\tmin: -1, max: 1,\n\t\tyellowFrom: 0, yellowTo: 0.5,\n redFrom: 0.5, redTo: 1,\n\t\tminorTicks: 5\n\t};\n d3Gauge = new google.visualization.Gauge(document.getElementById('d3'));\n\td3Gauge.draw(d3GaugeData, d3GaugeOptions);\n\n f1ChartData = google.visualization.arrayToDataTable(\n [[\"時刻\",\"照度\"],['10:00:00',300]] );\n f1ChartData.removeRow(0);\n f1ChartOptions = { title: '照度',\n legend: { position: 'bottom' },\n backgroundColor: {stroke:'#c1d8ac' ,strokeWidth:10, fill:'#ffffff'}\n };\n f1Chart = new google.visualization.LineChart(document.getElementById('f1'));\n f1Chart.draw(f1ChartData, f1ChartOptions);\n\n f2ChartData = google.visualization.arrayToDataTable(\n [[\"時刻\",\"気圧\"],['10:00:00',300]] );\n f2ChartData.removeRow(0);\n f2ChartOptions = { title: '気圧',\n legend: { position: 'bottom' },\n backgroundColor: {stroke:'#b9d08b' ,strokeWidth:10, fill:'#ffffff'}\n };\n f2Chart = new google.visualization.LineChart(document.getElementById('f2'));\n f2Chart.draw(f2ChartData, f2ChartOptions);\n\n f3ChartData = google.visualization.arrayToDataTable(\n [[\"時刻\",\"UV値\"],['10:00:00',300]] );\n f3ChartData.removeRow(0);\n f3ChartOptions = { title: 'UV値',\n legend: { position: 'bottom' },\n backgroundColor: {stroke:'#badcad' ,strokeWidth:10, fill:'#ffffff'}\n };\n f3Chart = new google.visualization.LineChart(document.getElementById('f3'));\n f3Chart.draw(f3ChartData, f3ChartOptions);\n\n j1ChartData = google.visualization.arrayToDataTable(\n [[\"時刻\",\"加速度(X軸)\"],['10:00:00',3]] );\n j1ChartData.removeRow(0);\n j1ChartOptions = { title: '加速度(X軸)',\n legend: { position: 'bottom' },\n backgroundColor: {stroke:'#98d98e' ,strokeWidth:10, fill:'#ffffff'}\n };\n j1Chart = new google.visualization.LineChart(document.getElementById('j1'));\n j1Chart.draw(j1ChartData, j1ChartOptions);\n\n j2ChartData = google.visualization.arrayToDataTable(\n [[\"時刻\",\"加速度(Y軸)\"],['10:00:00',3]] );\n j2ChartData.removeRow(0);\n j2ChartOptions = { title: '加速度(Y軸)',\n legend: { position: 'bottom' },\n backgroundColor: {stroke:'#c1d8ac' ,strokeWidth:10, fill:'#ffffff'}\n };\n j2Chart = new google.visualization.LineChart(document.getElementById('j2'));\n j2Chart.draw(j2ChartData, j2ChartOptions);\n\n j3ChartData = google.visualization.arrayToDataTable(\n [[\"時刻\",\"加速度(Z軸)\"],['10:00:00',3]] );\n j3ChartData.removeRow(0);\n j3ChartOptions = { title: '加速度(Z軸)',\n legend: { position: 'bottom' },\n backgroundColor: {stroke:'#93b69c' ,strokeWidth:10, fill:'#ffffff'}\n };\n j3Chart = new google.visualization.LineChart(document.getElementById('j3'));\n j3Chart.draw(j3ChartData, j3ChartOptions);\n\n j1ChartData = google.visualization.arrayToDataTable(\n [[\"時刻\",\"加速度(X軸)\"],['10:00:00',3]] );\n j1ChartData.removeRow(0);\n j1ChartOptions = { title: '加速度(X軸)',\n legend: { position: 'bottom' },\n backgroundColor: {stroke:'#98d98e' ,strokeWidth:10, fill:'#ffffff'}\n };\n j1Chart = new google.visualization.LineChart(document.getElementById('j1'));\n j1Chart.draw(j1ChartData, j1ChartOptions);\n\n j2ChartData = google.visualization.arrayToDataTable(\n [[\"時刻\",\"加速度(Y軸)\"],['10:00:00',3]] );\n j2ChartData.removeRow(0);\n j2ChartOptions = { title: '加速度(Y軸)',\n legend: { position: 'bottom' },\n backgroundColor: {stroke:'#c1d8ac' ,strokeWidth:10, fill:'#ffffff'}\n };\n j2Chart = new google.visualization.LineChart(document.getElementById('j2'));\n j2Chart.draw(j2ChartData, j2ChartOptions);\n\n j3ChartData = google.visualization.arrayToDataTable(\n [[\"時刻\",\"加速度(Z軸)\"],['10:00:00',3]] );\n j3ChartData.removeRow(0);\n j3ChartOptions = { title: '加速度(Z軸)',\n legend: { position: 'bottom' },\n backgroundColor: {stroke:'#93b69c' ,strokeWidth:10, fill:'#ffffff'}\n };\n j3Chart = new google.visualization.LineChart(document.getElementById('j3'));\n j3Chart.draw(j3ChartData, j3ChartOptions);\n\n m1ChartData = google.visualization.arrayToDataTable(\n [[\"時刻\",\"地磁気(X軸)\"],['10:00:00',3]] );\n m1ChartData.removeRow(0);\n m1ChartOptions = { title: '地磁気(X軸)',\n legend: { position: 'bottom' },\n backgroundColor: {stroke:'#c1d8ac' ,strokeWidth:10, fill:'#ffffff'}\n };\n m1Chart = new google.visualization.LineChart(document.getElementById('m1'));\n m1Chart.draw(m1ChartData, m1ChartOptions);\n\n m2ChartData = google.visualization.arrayToDataTable(\n [[\"時刻\",\"地磁気(Y軸)\"],['10:00:00',3]] );\n m2ChartData.removeRow(0);\n m2ChartOptions = { title: '地磁気(Y軸)',\n legend: { position: 'bottom' },\n backgroundColor: {stroke:'#b9d08b' ,strokeWidth:10, fill:'#ffffff'}\n };\n m2Chart = new google.visualization.LineChart(document.getElementById('m2'));\n m2Chart.draw(m2ChartData, m2ChartOptions);\n\n m3ChartData = google.visualization.arrayToDataTable(\n [[\"時刻\",\"地磁気(Z軸)\"],['10:00:00',3]] );\n m3ChartData.removeRow(0);\n m3ChartOptions = { title: '地磁気(Z軸)',\n legend: { position: 'bottom' },\n backgroundColor: {stroke:'#badcad' ,strokeWidth:10, fill:'#ffffff'}\n };\n m3Chart = new google.visualization.LineChart(document.getElementById('m3'));\n m3Chart.draw(m3ChartData, m3ChartOptions);\n\n};\n\n//websocketからの毎秒のデータを受信してゲージ・チャートへ表示する\nfunction doIt(msg){\n console.log(\"doit:\" + msg.data);\n\tvar msgs = JSON.parse(msg.data);\n\n // msgs[3]は二重配列なので\"msgs[3][0]\"で温度の値を取り出してリアルタイム表示する\n d1GaugeData = google.visualization.arrayToDataTable([\n ['Label', 'Value'],\n ['照度', msgs[4][0]]\n ]);\n d1Gauge.draw(d1GaugeData, d1GaugeOptions);\n console.log(\"msgs[4][0] = \" + msgs[4][0]);\n\n d2GaugeData = google.visualization.arrayToDataTable([\n ['Label', 'Value'],\n ['気圧', msgs[9][0]]\n ]);\n d2Gauge.draw(d2GaugeData, d2GaugeOptions);\n\n d3GaugeData = google.visualization.arrayToDataTable([\n ['Label', 'Value'],\n ['UV値', msgs[10][0]]\n ]);\n d3Gauge.draw(d3GaugeData, d3GaugeOptions);\n\n f1ChartData.addRow( [ msgs[0][0], msgs[4][0] ] );\n if ( f1ChartData.getNumberOfRows() > 9) {\n f1ChartData.removeRow(0);\n }\n f1Chart.draw(f1ChartData, f1ChartOptions);\n\n f2ChartData.addRow( [ msgs[0][0], msgs[9][0] ] );\n if ( f2ChartData.getNumberOfRows() > 9) {\n f2ChartData.removeRow(0);\n }\n f2Chart.draw(f2ChartData, f2ChartOptions);\n\n f3ChartData.addRow( [ msgs[0][0], msgs[10][0] ] );\n if ( f3ChartData.getNumberOfRows() > 9) {\n f3ChartData.removeRow(0);\n }\n f3Chart.draw(f3ChartData, f3ChartOptions);\n\n j1ChartData.addRow( [ msgs[0][0], msgs[1][0] ] );\n if ( j1ChartData.getNumberOfRows() > 9) {\n j1ChartData.removeRow(0);\n }\n j1Chart.draw(j1ChartData, j1ChartOptions);\n\n j2ChartData.addRow( [ msgs[0][0], msgs[2][0] ] );\n if ( j2ChartData.getNumberOfRows() > 9) {\n j2ChartData.removeRow(0);\n }\n j2Chart.draw(j2ChartData, j2ChartOptions);\n\n j3ChartData.addRow( [ msgs[0][0], msgs[3][0] ] );\n if ( j3ChartData.getNumberOfRows() > 9) {\n j3ChartData.removeRow(0);\n }\n j3Chart.draw(j3ChartData, j3ChartOptions);\n\n m1ChartData.addRow( [ msgs[0][0], msgs[5][0] ] );\n if ( m1ChartData.getNumberOfRows() > 9) {\n m1ChartData.removeRow(0);\n }\n m1Chart.draw(m1ChartData, m1ChartOptions);\n\n m2ChartData.addRow( [ msgs[0][0], msgs[6][0] ] );\n if ( m2ChartData.getNumberOfRows() > 9) {\n m2ChartData.removeRow(0);\n }\n m2Chart.draw(m2ChartData, m2ChartOptions);\n\n m3ChartData.addRow( [ msgs[0][0], msgs[6][0] ] );\n if ( m3ChartData.getNumberOfRows() > 9) {\n m3ChartData.removeRow(0);\n }\n m3Chart.draw(j3ChartData, m3ChartOptions);\n\n target = document.getElementById(\"timedata\");\n\ttarget.innerHTML = msgs[0];\n target = document.getElementById(\"e1data\"); // 照度 e1に表示\n\ttarget.innerHTML = msgs[4];\n target = document.getElementById(\"e2data\"); // 気圧 e2に表示\n\ttarget.innerHTML = msgs[9];\n target = document.getElementById(\"e3data\"); // UV値 e3に表示\n\ttarget.innerHTML = msgs[10];\n target = document.getElementById(\"h1data\"); // X軸加速度 h1に表示\n\ttarget.innerHTML = msgs[1];\n target = document.getElementById(\"h2data\"); // Y軸加速度 h2に表示\n\ttarget.innerHTML = msgs[2];\n target = document.getElementById(\"h3data\"); // Z軸加速度 h3に表示\n\ttarget.innerHTML = msgs[3];\n target = document.getElementById(\"k1data\"); // X軸地磁気 k1に表示\n\ttarget.innerHTML = msgs[5];\n target = document.getElementById(\"k2data\"); // Y軸地磁気 k2に表示\n\ttarget.innerHTML = msgs[6];\n target = document.getElementById(\"k3data\"); // Z軸地磁気 k3に表示\n\ttarget.innerHTML = msgs[7];\n\n};\n\n</script>\n\n</body>\n</html>\n","x":350,"y":120,"wires":[["5a3d7174.4f3d2"]]},{"id":"5a3d7174.4f3d2","type":"http response","z":"89d26c8f.7f48a","name":"","x":530,"y":120,"wires":[]},{"id":"a4d38e03.282f7","type":"http in","z":"89d26c8f.7f48a","name":"","url":"/test56a","method":"get","swaggerDoc":"","x":150,"y":120,"wires":[["ed8f0bb.cd5e278"]]},{"id":"e0a37e68.f707c8","type":"comment","z":"89d26c8f.7f48a","name":"Alpsシミュレータからの表示","info":"","x":180,"y":80,"wires":[]}]
#参考情報