//
表示中
モノづくり, Computer - コンピューター, Electronics - 電子工作

MQTTから受信したデータをグラフ表示する


この投稿の続きです。

D3というパッケージを使ってESP-WROOM-02からMQTTにパブリッシュされたデータをグラフ表示してみました。

Screenshot from 2016-08-15 20-44-40

下のコードがD3を使ってグラフを描いている部分です。

AJAXを使ってサーバーからデータベース検索結果をJSON形式(データの配列)で受け取って、それを引数にしてdrawChart関数を呼び出します。

function drawChart(collection) {
 var parseDate = d3.timeParse("%Y-%m-%dT%H:%M:%S.%LZ");
 var margin = {top: 30, right: 40, bottom: 30, left: 50},
 width = 900 - margin.left - margin.right,
 height = 400 - margin.top - margin.bottom;

 var ser1 = collection.map(function(currentValue, index, array) {
 return currentValue.temperature;
 });
 var ser2 = collection.map(function(currentValue, index, array) {
 return currentValue.humidity;
 });

 var x = d3.scaleTime()
 .domain([parseDate(collection[0].timestamp), parseDate(collection[collection.length - 1].timestamp)])
 .range([0, width]);
 var y0 = d3.scaleLinear()
 .domain([d3.min(ser1) - 10, d3.max(ser1) + 1])
 .range([height, 0]);
 var y1 = d3.scaleLinear()
 .domain([25, 99])
 .range([height, 0]);

 var svg = d3.select("#line");
 
 svg.selectAll("*").remove();

 svg = d3.select("#line")
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", 
 "translate(" + margin.left + "," + margin.top + ")");
 
 
 var xAxis = d3.axisBottom().scale(x).ticks(5);

 var yAxisLeft = d3.axisLeft().scale(y0).ticks(5);

 var yAxisRight = d3.axisRight().scale(y1).ticks(5); 
 
 var valueline =d3.line()
 .x(function(d) { 
 return x(parseDate(d.timestamp)); 
 })
 .y(function(d) { 
 return y0(d.temperature); 
 });
 
 var valueline2 = d3.line()
 .x(function(d) { 
 return x(parseDate(d.timestamp)); 
 })
 .y(function(d) { 
 return y1(d.humidity); 
 });
 
 
 svg.append("path") // Add the valueline path.
 .attr("d", valueline(collection));

 svg.append("path") // Add the valueline2 path.
 .style("stroke", "red")
 .attr("d", valueline2(collection));

 svg.append("g") // Add the X Axis
 .attr("class", "x axis")
 .attr("transform", "translate(0," + height + ")")
 .call(xAxis);

 svg.append("g")
 .attr("class", "y axis")
 .style("fill", "steelblue")
 .call(yAxisLeft)
 .append("text")
 .attr("transform", "rotate(-90)")
 .attr("y", -30)
 .text("Temperature"); 

 svg.append("g") 
 .attr("class", "y axis") 
 .attr("transform", "translate(" + width + " ,0)") 
 .style("fill", "red") 
 .call(yAxisRight)
 .append("text")
 .attr("transform", "rotate(-90)")
 .attr("y", 38)
 .attr("x", -74)
 .text("Humidity(%)"); 
}

kazz12211 について

Working as a OO programmer and enjoying music, bicycle and photography.

ディスカッション

コメントはまだありません。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

評価

ブログ統計

  • 537,671 ヒット

カテゴリー

アーカイブ

カレンダー

2016年8月
« 7月   9月 »
 123456
78910111213
14151617181920
21222324252627
28293031  
%d人のブロガーが「いいね」をつけました。