備忘録

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

Node-REDで線グラフ

センサーから得られた値を表示するためのグラフを作成方法を確認します。
今回は、Node-REDでグラフを出すだけです。

1.ライブラりgoogle chart nodeのインストール
http://flows.nodered.org/node/node-red-contrib-googlechart
こちらのライブラリをインストールします。

$npm install node-red-contrib-googlechart

↑をすると、カレントディレクトリにディレクトリnode_modulesができて、
その中にディレクトリnode-red-contrib-googlechartができます。

カレントディレクトリ
  ┗ node_modules
     ┗ node-red-contrib-googlechart

このディレクトリ構造を、
$HOME直下にあるディレクトリ.node-redにも作ってあげます。

.node-red
  ┗ node_modules
     ┗ node-red-contrib-googlechart

まぁ面倒なら、ディレクトリ.node-redで
$cd $HOME/.node-red
$npm install node-red-contrib-googlechart
をしてください。

2.Node-RED立ち上げ
Node-RED立ち上げ、再起動します。
右側のノードリストに、
chart requestノード、chart responseノードが追加されているのが
確認できるようになります。

ChartRequest

3.ノード組みあげ
今回はグラフを作るだけです。
それぞれドラッグでノードをおいていきます。今回はグラフの値も決めうちです。

全体のフロー
function

ChartRequestノードの設定
今回は線グラフにするので、LineChartを設定
Pathは、/LineChartに設定
Attributesでは、+Addボタンを押して、値となる要素を登録しておきます。
ChartResponse

functionノードの設定
今回はグラフの値を決めうちです。
それぞれグラフの要素と値を書いておきます。
googleのLineChartサンプルの値ですが、なんですかね?これ、映画の観客数でしょうか?
追加されたノード

Chart Response
特に設定するところはないですね
作成したフロー


4.ブラウザで閲覧
http://192.168.0.8:1880/LineChart
パスは、Node-redのIPアドレスと、ChartRequestで設定したPathの設定ですね
できたグラフ

とグラフにできました。
次回は実際に取得したセンサのデータを使って、グラフを出します








スポンサーサイト

テーマ:ハードウェア - ジャンル:コンピュータ

  1. 2016/06/20(月) 18:13:27|
  2. Raspberry Pi
  3. | トラックバック:0
  4. | コメント:0
<<MySQLをインストール | ホーム | Node-REDでセンサーの値をWebに出す>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://nanicananica.blog.fc2.com/tb.php/55-6ab0780d
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。