Bluemix에서 IoT 온습도, 기압을 수집·축적·가시화+LED 제어 그 9
18357 단어 RaspberryPiBluemixnosqlIoT센서
0. 소개
지난번 의 계속입니다. 이번에는 chart.js를 사용하여 mongodb에 저장된 데이터를 시각화합니다.
1. 필요한 것(이번 준비한 것)
품목
수량
메모
2. 참고로 한 곳
Chart.js 사용법. Chart.js를 사용하여 데이터를 그래프화하고 시각화합니다.
3. mongodb에서 저장된 JSON 데이터를 얻고 가공
①mongodb 검색용 노드 작성
서비스 항목은 "mongodb-42"를 선택합니다.
Collection 항목은 "SenseData"를 입력합니다.
Operation 항목은 "find"를 선택합니다.
Name 항목은 「DB 검색」을 입력한다.
②JSON 가공용의 function 노드를 작성한다.
Name 항목은 「JSON 성형」을 입력한다.
"Function"항목은 다음을 입력합니다.
function
var dev = {
'data': []
};
for ( var i=0; i < msg.payload.length; i++ ){
dev.data.push({
deviceid:msg.payload[i].deviceid,
timestamp:msg.payload[i].timestamp,
temp:msg.payload[i].temp,
humid:msg.payload[i].humid,
press:msg.payload[i].press
});
}
msg.payload = dev;
return msg;
③HTTP 입력 노드를 작성한다.
"Method 항목은 "GET"을 선택합니다.
URL 항목은 "/list"를 입력합니다.
④HTTP 출력 노드를 작성한다.
⑤ 작성한 4개의 노드를 접속한다.
4. chart.js에서 꺾은선형 차트 표시 설정
①chart.js에서 꺾은선형 차트를 표시하는 template 노드를 작성한다.
Name 항목은 "꺾은 선형 차트"를 입력합니다.
Syntax Highlight 항목은 "HTML"을 선택합니다.
Format 항목은 "Plain text"를 선택한다.
Template 항목에는 다음을 입력합니다.
Template
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Line Chart</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
</head>
<body>
<h2>温湿度・気圧 履歴表示(chart.js)</h2>
<div style="width:30%">
<div>
<canvas id="canvas" height="450" width="600"></canvas>
<div id="chart_legend"></div>
</div>
</div>
<script>
var jsonData = $.ajax({
url: './list', dataType: 'json', }).done(function(results){
var labels= [], data1=[], data2=[], data3=[];
results["data"].forEach(function(data) {
labels.push(data.timestamp);
data1.push(parseFloat(data.temp));
data2.push(parseFloat(data.humid));
data3.push(parseFloat(data.press));
});
var lineChartData = {
//X軸のラベル
labels : labels,
datasets : [
{
//ラベルの名前
label: "温度",
//線の下側の色
fillColor : "rgba(255,0,0,0.2)",
//線の色
strokeColor : "rgba(255,0,0,1)",
//ポイントの色
pointColor : "rgba(255,0,0,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
//My First datasetの値
data : data1
},
{
label: "湿度",
fillColor : "rgba(0,255,0,0.2)",
strokeColor : "rgba(0,255,0,1)",
pointColor : "rgba(0,255,0,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(0,255,0,1)",
data :data2
},
{
label: "気圧",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data :data3
}
]
};
var option = {
legendTemplate : "<% for (var i=0; i<datasets.length; i++){%><li><span style=\"color:<%=datasets[i].strokeColor%>\">■</span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%>"
};
//データを読み込んだ後、グラフ化開始
var ctx = document.getElementById("canvas").getContext("2d");
var char = new Chart(ctx).Line(lineChartData, option);
/*
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
},options);
*/
document.getElementById('chart_legend').innerHTML = char.generateLegend();
});
</script>
</body>
</html>
② HTTP 입력 노드를 작성한다.
"Method 항목은 "GET"을 선택합니다.
URL 항목은 "/chart"를 입력합니다.
③ HTTP 출력 노드를 작성한다.
④ 작성한 3개의 노드를 접속한다.
5. 브라우저에서 표시 확인
① 임의의 브라우저로 하기 URL에 접속한다.
ht tp // // 왓 x. myb 에미 x. 네 t/차 rt ※XXXXXX는, 자신의 환경에 맞추어 변경해 주세요.
② 그래프가 표시되는 것을 확인한다.
이것으로 chart.js를 사용한 시각화 절차가 종료됩니다.
다음( 그 10 )은, 덤으로서 Node-RED측에서 온도를 판정해, LED의 점등색을 지정해 보는 것을 실시합니다.
Reference
이 문제에 관하여(Bluemix에서 IoT 온습도, 기압을 수집·축적·가시화+LED 제어 그 9), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hino9966/items/be8ecca36bd90aa8419a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
