web-dev-qa-db-fra.com

Intégration de Grafana dans une application web

Un peu d'histoire, j'ai travaillé avec BCI (interface cerveau-ordinateur) et l'EEG multicanal pour surveiller l'activité cérébrale. Lorsque l'utilisateur démarre une session avec le plafond BCI activé, le flux de données brutes de chaque canal est stocké dans Influxdb.

Je peux visualiser ces données en temps réel que j'ai réussi à atteindre en intégrant ma base de données dans Influxdb avec Grafana comme indiqué ci-dessous pour le canal 1

EEG data for Channel 1

Cependant, mon objectif final est de créer une application web où un utilisateur peut se connecter et voir sa session de streaming en temps réel ou l'une des sessions précédentes. Le problème avec Grafana est qu'il n'est pas facile à intégrer/intégrer avec une application web existante. J'ai regardé Embed Panel mais cela me permet d'ajouter seulement un instantané du graphique alors que j'ai besoin que ce soit en temps réel où les données sont continuellement diffusées sur le graphique.

Toute aide serait grandement appréciée et merci d'avance!

16
Corleone

Grafana ne possède pas de "bibliothèque javascript" qui peut être chargée dans une page pour recréer des panneaux dans une application web externe ( problème github pertinent ici ).

Si vous souhaitez utiliser autre chose que grafana, vous pouvez vous connecter à influxdb en utilisant un pilote js comme influxdb-nodejs ou influent pour obtenir les données, puis utiliser une bibliothèque de traçage (par exemple flot , complot , d , smoothie charts ) pour recréer les graphiques. Ce serait l'approche typique du problème, mais cela nécessite plus de temps de développement de votre part.

Si vous voulez utiliser grafana, cependant, vous pouvez maintenant incorporer un panneau grafana dans une application externe en utilisant un iframe comme ceci:

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