web-dev-qa-db-ja.com

GrafanaをWebアプリに統合する

少し背景として、私はBCI（脳コンピュータインターフェイス）とマルチチャネルEEGを使用して脳の活動を監視しています。ユーザーがBCIキャップをオンにしてセッションを開始すると、各チャネルからの生データストリーミングがInfluxdbに保存されます。

以下のチャネル1に示すように、データベースをInfluxdbのGrafanaと統合することで、このデータをリアルタイムで視覚化して、うまく管理できました。

EEG data for Channel 1

ただし、私の最終的な目的は、ユーザーがログインして現在のストリーミングセッションをリアルタイムまたは以前のセッションのいずれかで表示できるWebアプリを作成することです。 Grafanaの問題は、既存のWebアプリとの統合/埋め込みが容易でないことです。私は Embed Panel を調べましたが、これによりグラフのスナップショットのみを追加できますが、データがチャートに継続的にストリーミングされるリアルタイムである必要があります。

何か助けていただければ幸いです。

influxdbgrafana
16
Corleone

Grafanaには、外部Webアプリでパネルを再作成するためにページにロードできる「JavaScriptライブラリ」がありません（ 関連するgithubの問題 ）。

Grafana以外のものを使用する場合は、 influxdb-nodejs または influent などのjsドライバーを使用してinfluxdbに接続し、データを取得して、プロットライブラリを使用できます。 （例 flot 、 plotly 、 d 、 smoothie charts ）チャートを再作成します。これは問題への典型的なアプローチですが、それはあなたの側でより多くの開発時間を必要とします。

ただし、grafanaを使用したい場合は、次のようにi-frameを使用して外部アプリに grafanaパネルを埋め込む を使用できます。

<iframe 
    src="https://snapshot.raintank.io/dashboard-solo/snapshot/y7zwi2bZ7FcoTlB93WN7yWO4aMiz3pZb?from=1493369923321&to=1493377123321&panelId=4" 
    width="650" height="300" frameborder="0">
</iframe>
7
7yl4r