Plotlyでセンサー・データを可視化(グラフ化)する

　Plotlyを使って、センサー・データを可視化(グラフ化)する方法を解説します。

①開発環境
・Arudino
　「ArduinoをJavaScriptで制御する」の手順で、開発環境をセットアップします。
・Raspberry Pi
　「Raspberry Pi 2のGPIOをJavaScriptで制御する」の手順で、開発環境をセットアップします。

②Plotlyの準備
1.Plotlyのアカウントを作成します。
2.右上の[ユーザ名]をクリックし、[Settings]を選択します。
3.「STREAMING API TOKENS」と[ADD A NEW TOKEN]をクリックし、APIトークンを作成します。


　この画面で確認できる「API KEY」を「STREAMING API TOKENS」は、後でプログラム中で使用します。




③「plotly」モジュール(Node.jsモジュール)のインストール
1.コマンドプロンプトまたはターミナルを起動し、作業用のフォルダに移動します。
2.「npm install plotly」と入力します。

④「date-utils」モジュールのインストール
1.コマンドプロンプトまたはターミナルを起動し、作業用フォルダに移動します。
2.「npm install date-utils」と入力します。

⑤回路の配線、プログラムの作成と実行
・Arudino
1.次のように回路を配線します。

必要なモノ(リンク先：Amazon)
LM35D

2.次のJavaScriptコードを入力し、「temp-plotry.js」と名前を付けて保存します。

	require('date-utils');
	var plotly = require('plotly')('[USER NAME]','[YOUR API KEY]')
	var token = '[YOUR STREAMING API TOKEN]';
	var five = require("johnny-five");
	five.Board().on("ready", function() {
	var temperature = new five.Thermometer({
	controller: "LM35",
	pin: "A0",
	freq: 10000
	});
	var initdata = [{x:[], y:[], stream:{token:token, maxpoints: 500}}];
	var initlayout = {fileopt : "extend", filename : "Temperature"};
	plotly.plot(initdata, initlayout, function (err, msg) {
	if (err) return console.log(err);
	console.log(msg);
	var stream = plotly.stream(token, function (err, res) {
	console.log(err, res);
	});
	temperature.on("data", function() {
	console.log(this.celsius + "°C", this.fahrenheit + "°F");
	var dt = new Date();
	var xaxis = dt.toFormat("YYYY-MM-DD HH24:MI:SS");
	var streamObject = JSON.stringify({ x : xaxis, y : this.celsius });
	console.log(streamObject);
	stream.write(streamObject+'\n');
	});
	});
	});

view raw temp-plotly.js hosted with ❤ by GitHub

　[USER NAME]にPlotlyのユーザー名(アカウント名)を、[YOUR API KEY]に②-3で確認したAPI KEYを、[YOUR STREAMING API TOKEN]に②-3で確認したSTREAMING API TOKENを入力します。また、保存先の名前は、filenameで指定します（この例では、「Temperature」）。

3.コマンドプロンプトから、「node temp-plotry.js」と入力します。

・Raspberry Pi
1.次のように回路を配線します。

必要なモノ(リンク先：Amazon)
PCF8591AD/ DA　コンバータモジュール

2.次のJavaScriptコードを入力し、「plotry-pi.js」と名前を付けて保存します。

	require('date-utils');
	var plotly = require('plotly')('[USER NAME]','[YOUR API KEY]')
	var token = '[YOUR STREAMING API TOKEN]';
	var raspi = require('raspi-io');
	var five = require('johnny-five');
	var board = new five.Board({
	io: new raspi()
	});
	board.on('ready', function(){
	var virtual = new five.Board.Virtual(
	new five.Expander("PCF8591")
	);
	var a = new five.Sensor({
	// PCF8591 module YL-40
	// A0:LDR(Light Dependent Resistor)
	// A1:NC
	// A2 Thermistor
	// A3:Potentiometer
	pin:"A0",
	board:virtual,
	freq:10000
	});
	var initdata = [{x:[], y:[], stream:{token:token, maxpoints: 500}}];
	var initlayout = {fileopt : "extend", filename : "LDR"};
	plotly.plot(initdata, initlayout, function (err, msg) {
	if (err) return console.log(err);
	console.log(msg);
	var stream = plotly.stream(token, function (err, res) {
	console.log(err, res);
	});
	a.on("data", function(){
	console.log(this.value);
	var dt = new Date();
	var xaxis = dt.toFormat("YYYY-MM-DD HH24:MI:SS");
	var streamObject = JSON.stringify({ x : xaxis, y : this.value });
	console.log(streamObject);
	stream.write(streamObject+'\n');
	});
	});
	});

view raw plotry-pi.js hosted with ❤ by GitHub

　[USER NAME]にPlotlyのユーザー名(アカウント名)を、[YOUR API KEY]に②-3で確認したAPI KEYを、[YOUR STREAMING API TOKEN]に②-3で確認したAPI KEYをSTREAMING API TOKENを入力します。また、保存先の名前は、filenameで指定します（この例では、「LDR」）。

3.ターミナルから、「sudo node plotry-pi.js」と入力します。

⑥グラフの確認
　　ブラウザでPlotlyを開き、[Organize]（または[ユーザー名]→[My Files]）を選択し、目的のグラフ(ファイル)を選択します。