Integrating Grafana into a web app

Question

A little background, I have been working with BCI (brain computer interface) and multi channel EEG to monitor brain activity. When the user starts a session with the BCI cap on, the raw data streaming from each channel is stored into Influxdb.

I can visualize this data in real time which I successfully managed to achieve by integrating my database in Influxdb with Grafana as shown below for Channel 1

However, my final aim is to create a web app where a user can login and see their current streaming session in real time or any of the previous sessions. The problem with Grafana is, it is not easy to integrate/embed with an existing web app. I looked into Embed Panel but this enables me to add only a snapshot of the graph whereas I need it to be in real time where the data is continuously streamed to the chart.

Any help would be greatly appreciated and thanks in advance!

Answer 1

Grafana does not have a "javascript library" which can be loaded into a page to recreate panels in an external web app (relevant github issue here).

If you are willing to use something other than grafana, you can connect to influxdb using a js driver like influxdb-nodejs or influent to get the data and then use a plotting library (eg flot, plotly, d3, smoothie charts) to re-create the charts. This would be the typical approach to the problem, but it does require a more development time on your part.

If you do want to use grafana, however, you can now embed a grafana panel into an external app using an iframe like so:

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

Answer 2

In my case, I just clicked on the panel -> there's a button "Share" -> tab "Embed" - and you have the iframe tag that you can copy-paste into your website.