28

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

EEG data 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!

Corleone
  • 361
  • 1
  • 3
  • 6
  • Can you not just iframe grafana into your webapp? Like in this question: http://stackoverflow.com/questions/35583712/embedding-a-secured-grafana-into-web-application You might run into auth problems that you can solve like this: https://blog.raintank.io/authproxy-howto-use-external-authentication-handlers-with-grafana/ – Daniel Lee Jul 26 '16 at 14:52
  • 1
    @Corleone Did you manage to solve this issue? I'm finding myself in a similar situation. – ascu Feb 06 '17 at 15:28
  • @ascu Unfortunately no, but I used external charting libraries (like Smoothie Charts, d3.js) to create my own charts – Corleone Feb 06 '17 at 17:47

2 Answers2

19

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>
Stephen Rauch
  • 47,830
  • 31
  • 106
  • 135
7yl4r
  • 4,788
  • 4
  • 34
  • 46
5

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.

Ricky Levi
  • 7,298
  • 1
  • 57
  • 65