Gegevensvisualisatie met Grafana

    elausys•19 januari 2026

    HyperVisu bevat een krachtige integratie met Grafana, een open-source analytics- en visualisatieplatform. Met Grafana kunt u geavanceerde energiemonitoringdashboards maken, historische gegevens visualiseren en inzicht krijgen in de prestaties van uw slimme huis. Dit gedeelte legt uit hoe u toegang krijgt tot Grafana, dashboards maakt met HyperVisu-gegevens en deze dashboards in de HyperVisu mobiele applicatie weergeeft.

    Energy_-_1.png

    Toegang tot Grafana

    Grafana is direct geïntegreerd met de InfluxDB-database die al uw historische gegevenspunten opslaat.

    Toegang via een webbrowser

    Om toegang te krijgen tot de Grafana-interface vanaf uw HyperVisu-server:

    1. Open een webbrowser en voer het IP-adres van uw HyperVisu-server in, gevolgd door /grafana

    Authenticatie en gebruikersbeheer

    • Grafana gebruikt zijn eigen authenticatiesysteem met de volgende standaard inloggegevens:
      • Gebruikersnaam: admin
      • Wachtwoord: zeAAlyhQa5ej
    • Deze inloggegevens zijn afzonderlijk van uw HyperVisu-beheerlogin
    • Om veiligheidsredenen wordt sterk aanbevolen om het standaardwachtwoord te wijzigen na uw eerste login

    Dashboards maken

    Grafana stelt u in staat om aangepaste dashboards te maken die uw gegevens op betekenisvolle manieren presenteren. Deze dashboards kunnen verschillende soorten visualisaties bevatten, zoals grafieken, meters en statistiekenpanelen.

    Basisprincipes van dashboards

    Om een nieuw dashboard te maken:

    1. Klik na het inloggen op Grafana op het +-pictogram in de zijbalk
    2. Selecteer Dashboard in het dropdownmenu
    3. Klik op Voeg nieuw paneel toe om visualisaties aan uw dashboard toe te voegen
    4. Sla uw dashboard op door op het opslaan-pictogram (schijf symbool) in de rechterbovenhoek te klikken en geef een beschrijvende naam op

    Gegevensbronnen en querystructuur

    HyperVisu configureert Grafana automatisch met de volgende gegevensbronnen:

    • InfluxDB: Vooraf geconfigureerd om verbinding te maken met de ingebouwde InfluxDB-database
      • Deze database bevat alle historische gegevens van widgets waarvoor logging is ingeschakeld
      • Gegevens worden opgeslagen in een bucket genaamd "hypervisu"
      • De gegevens zijn georganiseerd met de volgende structuur:
        • _measurement: Het serienummer van uw server (zichtbaar linksboven op de beheerderspagina)
        • _field: Het type waarde (typisch "value_float" voor numerieke waarden)
        • category_name: De categorie die aan de widget in HyperVisu is toegewezen
        • widget_name: De naam van de widget
        • object_id: De unieke ID van het communicatieobject van de widget
      • Om toegang te krijgen tot deze gegevens, schrijft u Flux-query's die filteren op basis van deze velden

    Extra Flux-queryvoorbeelden

    Dagelijks energieverbruik

    from(bucket: "hypervisu")

 | > range(start: -24h)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Vervang door uw server SN
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Energie")
 | > filter(fn: (r) => r["widget_name"] == "Verbruik")
 | > difference()
 | > sum()

    Maximale temperatuur van de afgelopen week

    from(bucket: "hypervisu")

 | > range(start: -7d)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Vervang door uw server SN
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Klimaat")
 | > filter(fn: (r) => r["widget_name"] == "Temperatuur")
 | > max()

    Gemiddeld uurverbruik (voor patroonanalyse)

    from(bucket: "hypervisu")

 | > range(start: -7d)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Vervang door uw server SN
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Energie")
 | > filter(fn: (r) => r["widget_name"] == "Actieve Vermogen")
 | > aggregateWindow(every: 1h, fn: mean, createEmpty: false)
 | > duplicate(column: "_stop", as: "uur")
 | > timeShift(duration: -1h, columns: ["uur"])
 | > hourSelection(start: 0, stop: 23)
 | > group(columns: ["uur"])
 | > mean()

    Energiebewakingspanelen maken

    Energiebewaking is een van de krachtigste toepassingen van Grafana binnen HyperVisu. Hier leest u hoe u energievizualisatiepanelen maakt:

    1. Klik op uw dashboard op Paneel toevoegen
    2. Selecteer het visualisatietype dat het beste bij uw gegevens past (gebruikelijke keuzes zijn):
      • Tijdreeksdiagram: Voor het tonen van energieverbruik in de tijd
      • Meter: Voor het weergeven van het huidige energieverbruik
      • Stat: Voor het tonen van cumulatieve waarden zoals dagelijkse kWh
    3. Configureer het paneel met een query die gegevens uit InfluxDB haalt:
      • Selecteer InfluxDB als gegevensbron
      • Selecteer Flux als querytaal
      • Gebruik de querybouwer of schrijf een Flux-query om uw energiegegevens te selecteren
      • Uw query moet verwijzen naar het serienummer van uw server als het meetveld
        • Het serienummer van de server is te vinden linksboven op de beheerderspagina
      • Filter gegevens op basis van de categorienaam, widgetnaam of object-ID indien nodig

    Voorbeeld Flux-query's voor energiebewaking

    Bij het maken van panelen moet u Flux-query's schrijven om gegevens uit de HyperVisu InfluxDB-database op te halen. Hier zijn enkele voorbeelden:

    Energieverbruik in de tijd (Tijdreeksdiagram)

    51_-Grafana-_InfluxDB_Query_5_w-75.png
    from(bucket: "hypervisu")

 | > range(start: v.timeRangeStart, stop: v.timeRangeStop)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Vervang door uw server SN
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Vervang door de werkelijke object-ID
 | > aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)
 | > yield(name: "mean")

    Huidige spanningsmeting (Meter of Stat)

    50_-Grafana-_InfluxDB_Query_3_w-75.png
    from(bucket: "hypervisu")

 | > range(start: -1h)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Vervang door uw server SN
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Vervang door de werkelijke object-ID
 | > last()

    Query op object-ID

    Elk object dat in de HyperVisu-database is opgeslagen, heeft een unieke object-ID. Deze object-ID is te vinden in de objectmodal op de pagina voor het bewerken van apparaten van de HyperVisu-beheerder (of in de sectie "Importeren/Exporteren" van de beheerderspagina, in de tabel "communicatieobjecten"):

    52_-Grafana-_InfluxDB_Query_2_w-75.png
    from(bucket: "hypervisu")

 | > range(start: v.timeRangeStart, stop: v.timeRangeStop)
 | > filter(fn: (r) => r["_measurement"] == "2ccf674etf456")  // Vervang door uw server SN
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Vervang door de werkelijke object-ID
 | > aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)
 | > yield(name: "mean")

    Om een compleet energieverbruikpaneel te maken:

    1. Maak een tijdreeks paneel
    2. Plak een van de bovenstaande voorbeeldquery's, en pas deze aan voor uw specifieke server en widget-ID's
    3. Stel geschikte tijdsintervallen in (laatste 24 uur, laatste week, enz.)
    4. Voeg eenheidsformattering (kW, A, kWh) toe om de waarden leesbaarder te maken
    5. Pas kleuren aan om verschillende energieniveaus aan te geven (bijv. oranje voor verbruik)

    Dashboards weergeven in HyperVisu

    Zodra u uw Grafana-dashboards hebt gemaakt, kunt u deze rechtstreeks integreren in de HyperVisu mobiele applicatie voor gemakkelijke toegang.

    Delen van dashboard-URL's

    Om de juiste URL voor uw dashboard te vinden:

    1. Open uw dashboard in Grafana
    2. Klik op de knop Delen in de bovenste navigatiebalk
    3. Selecteer het tabblad Link
    4. Kopieer de opgegeven URL

    WebView-widgets maken

    Om Grafana-dashboards in de HyperVisu-applicatie weer te geven:

    1. Ga in ElauPro naar de sectie Visualisatie
    2. Klik op Widget toevoegen
    3. Selecteer WebView als het widgettype
    4. Configureer de widget:
      • Geef het een beschrijvende naam (bijv. "Energiedashboard")
      • Wijs het toe aan een geschikte categorie (bijv. "Energie")
      • Selecteer de kamer waar u het wilt weergeven
      • Voer in het URL-veld de volledige URL naar uw Grafana-dashboard in
        • Formaat: http:////grafana/d//?orgId=1

    Dashboards bekijken in de mobiele applicatie

    Eenmaal geconfigureerd, kunt u uw Grafana-dashboards rechtstreeks vanuit de HyperVisu mobiele applicatie openen:

    1. Open de HyperVisu mobiele app
    2. Navigeer naar de kamer of categorie waar uw WebView-widget zich bevindt
    3. Tik op de WebView-widget om het Grafana-dashboard te openen
    4. Het dashboard wordt rechtstreeks binnen de applicatie geladen, met realtime en historische gegevens
    27.1_-_Grafana_Dashboards_w-50.png

    Dashboards optimaliseren voor mobiel gebruik

    Voor de beste ervaring op mobiele apparaten:

    1. Gebruik grotere lettertypen en visualisatie-elementen
    2. Beperk het aantal panelen per dashboard voor mobiel gebruik
    3. Maak aparte dashboards die zijn geoptimaliseerd voor mobiel versus desktopgebruik
    4. Houd rekening met de portretoriëntatie van mobiele apparaten bij het ontwerpen van lay-outs
    5. Test uw dashboards op zowel tablet- als telefoongrote schermen

    Opmerking: Wijzigingen die aan Grafana-dashboards zijn aangebracht, worden onmiddellijk weerspiegeld in de HyperVisu-applicatie. Het is niet nodig om de WebView-widget opnieuw te configureren na het bijwerken van de inhoud of lay-out van een dashboard.

    Terug - Gebruikershandleidingen

    Op deze pagina

    Meer hulp nodig?

    Ons supportteam staat klaar om uw technische vragen te beantwoorden.

    Contact opnemen met support