将 Grafana 集成到 Web 应用程序中答案

【问题标题】：Integrating Grafana into a web app将 Grafana 集成到 Web 应用程序中
【发布时间】：2016-11-25 08:24:36
【问题描述】：

一点背景知识，我一直在使用 BCI（脑机接口）和多通道 EEG 来监测大脑活动。当用户开启 BCI 上限的会话时，来自每个通道的原始数据流存储到 Influxdb。

我可以实时可视化这些数据，我通过将我在 Influxdb 中的数据库与 Grafana 集成成功地实现了这一点，如下所示的通道 1

但是，我的最终目标是创建一个网络应用程序，用户可以在其中登录并实时查看他们当前的流式传输会话或之前的任何会话。 Grafana 的问题是，与现有的 Web 应用程序集成/嵌入并不容易。我查看了Embed Panel，但这使我只能添加图表的快照，而我需要它是实时的，其中数据不断地流式传输到图表。

任何帮助将不胜感激，并提前致谢！

【问题讨论】：

你能不能把 iframe grafana 放到你的 webapp 中？就像在这个问题中一样：stackoverflow.com/questions/35583712/…您可能会遇到可以这样解决的身份验证问题：blog.raintank.io/…
@Corleone 你设法解决了这个问题吗？我发现自己处于类似的境地。
@ascu 很遗憾，没有，但我使用了外部图表库（如 Smoothie Charts、d3.js）来创建自己的图表

标签： influxdb grafana

【解决方案1】：

Grafana 没有“javascript 库”，可以将其加载到页面中以在外部 Web 应用程序中重新创建面板 (relevant github issue here)。

如果你愿意使用grafana以外的东西，你可以使用像influxdb-nodejs或influent这样的js驱动连接到influxdb来获取数据，然后使用绘图库（例如flot，plotly 、d3、smoothie charts) 重新创建图表。这将是解决问题的典型方法，但它确实需要您花费更多的开发时间。

但是，如果您确实想使用 grafana，您现在可以使用 iframe 将embed a grafana panel 插入外部应用程序，如下所示：

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

【讨论】：

【解决方案2】：

在我的例子中，我只是点击面板 -> 有一个按钮“分享” -> 选项卡“嵌入” - 你有 iframe 标签，你可以复制粘贴到你的网站。

【讨论】：