Integrating Grafana into a web app
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
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>