将Grafana集成到Web应用程序中

Cor*_*one 15 influxdb grafana

有一点背景,我一直在与BCI(脑计算机界面)和多通道脑电图一起监测大脑活动.当用户启动具有BCI上限的会话时,来自每个通道的原始数据流存储在Influxdb中.

我可以通过将我的数据库集成在Influxdb中与Grafana实时成功实现这些数据的实现,如下面第1频道所示

通道1的EEG数据

但是,我的最终目标是创建一个Web应用程序,用户可以在该应用程序中实时登录或查看当前的流式会话或任何之前的会话.Grafana的问题在于,与现有的Web应用程序集成/嵌入并不容易.我查看了嵌入式面板,但这使我只能添加图表的快照,而我需要它实时地将数据连续流式传输到图表.

任何帮助将不胜感激,并提前感谢!

7yl*_*l4r 5

Grafana没有“ javascript库”,可以将其加载到页面中以在外部Web应用程序中重新创建面板(有关github问题,请参见此处)。

如果您愿意使用grafana以外的其他工具,则可以使用js驱动程序(例如influxdb-nodejsinfluent)连接到influxdb 或获取数据,然后使用绘图库(例如flotplotlyd3思慕图表)重新创建图表。这将是解决问题的典型方法,但确实需要更多的开发时间。

但是,如果您确实想使用grafana,则可以使用iframe 将grafana面板嵌入到外部应用中,如下所示:

<iframe 
    src="https://snapshot.raintank.io/dashboard-solo/snapshot/y7zwi2bZ7FcoTlB93WN7yWO4aMiz3pZb?from=1493369923321&to=1493377123321&panelId=4" 
    width="650" height="300" frameborder="0">
</iframe>
Run Code Online (Sandbox Code Playgroud)


Ric*_*evi 5

就我而言,我只需单击面板 -> 有一个按钮“共享” -> 选项卡“嵌入” - 您就iframe可以将标签复制粘贴到您的网站中。