Shelly Dashboard mit Grafana – Professionelle Visualisierung

Teil 5b: Grafana als Erweiterung zum PHP-Dashboard

Im vorherigen Teil hast du ein eigenes PHP-Dashboard gebaut – funktional, schlank und unter deiner vollen Kontrolle. Doch was, wenn du mehr willst? Interaktive Zeiträume, Zoom-Funktionen, automatische Alerts oder einfach professionellere Optik?

Hier kommt Grafana ins Spiel. In diesem Artikel zeige ich dir, wie du Grafana mit deiner bestehenden Shelly-Datenbank verbindest und in wenigen Minuten aussagekräftige Dashboards erstellst.

1. Warum Grafana?

PHP-Dashboard vs. Grafana – wann was?

Kriterium	PHP-Dashboard	Grafana
Installation	Keine (läuft auf vorhandenem Webserver)	Eigener Dienst nötig
Anpassbarkeit	Volle Kontrolle über jeden Pixel	Vorgefertigte Panels
Lernkurve	PHP/HTML/JS-Kenntnisse nötig	Klick-basiert, wenig Code
Features	Nur was du selbst baust	Alerting, Variablen, Annotations
Ressourcen	minimal	~200 MB RAM
Zeitaufwand	Stunden für gutes Design	Minuten für fertiges Dashboard

Fazit: Das PHP-Dashboard ist perfekt zum Lernen und für volle Kontrolle. Grafana ist der nächste Schritt, wenn du schnell professionelle Ergebnisse willst – ohne jede Zeile selbst zu schreiben.

2. Grafana installieren

Falls Grafana noch nicht läuft, hier die Installation für Debian/Ubuntu:

2.1 Repository hinzufügen und installieren

# Abhängigkeiten
sudo apt install -y apt-transport-https software-properties-common wget

# Grafana GPG-Key
sudo mkdir -p /etc/apt/keyrings/
wget -q -O - https://apt.grafana.com/gpg.key | gpg --dearmor | sudo tee /etc/apt/keyrings/grafana.gpg > /dev/null

# Repository hinzufügen
echo "deb [signed-by=/etc/apt/keyrings/grafana.gpg] https://apt.grafana.com stable main" | sudo tee -a /etc/apt/sources.list.d/grafana.list

# Installieren
sudo apt update
sudo apt install grafana -y

2.2 Dienst starten

sudo systemctl daemon-reload
sudo systemctl enable grafana-server
sudo systemctl start grafana-server

2.3 Erster Login

Öffne im Browser: http://deine-server-ip:3000

Benutzer: admin
Passwort: admin

Beim ersten Login wirst du aufgefordert, das Passwort zu ändern.

3. MySQL-Datenquelle einrichten

Jetzt verbinden wir Grafana mit deiner Shelly-Datenbank.

3.1 Datenquelle hinzufügen

Links im Menü: Connections → Data sources
Klick auf Add data source
Wähle MySQL

3.2 Verbindungsdaten eingeben

Host: 192.168.2.xxx:3306 (deine DB-IP)
Database: shelly_data
User: shelly_user
Password: Dein Datenbank-Passwort

Falls Grafana auf dem gleichen Server wie die DB läuft, kannst du als Host localhost:3306 verwenden.

3.3 Verbindung testen

Klick auf Save & test. Bei Erfolg erscheint: „Database Connection OK“

Fehler? Häufige Ursachen:

Firewall blockiert Port 3306
MySQL-User hat keine Berechtigung für Remote-Zugriff
Falsches Passwort

4. Erstes Dashboard erstellen

4.1 Neues Dashboard anlegen

Links im Menü: Dashboards
Klick auf New → New Dashboard
Klick auf Add visualization

4.2 Temperatur-Panel (Zeitreihe)

Wähle deine MySQL-Datenquelle und gib folgende Query ein:

SELECT
  timestamp AS time,
  temperature AS 'Temperatur',
  device_name
FROM sensor_data
WHERE device_id = '7c:c6:b6:97:33:ac'
  AND $__timeFilter(timestamp)
ORDER BY timestamp ASC

Einstellungen im Panel:

Visualization: Time series
Title: Temperaturverlauf
Unit: Celsius (°C) – unter „Standard options“

💡 $__timeFilter(timestamp) ist eine Grafana-Variable, die automatisch den ausgewählten Zeitraum filtert. So funktioniert der Zeitraum-Selektor oben rechts.

4.3 Luftfeuchtigkeit hinzufügen

Klick auf Add query im gleichen Panel und füge hinzu:

SELECT
  timestamp AS time,
  humidity AS 'Luftfeuchtigkeit',
  device_name
FROM sensor_data
WHERE device_id = '7c:c6:b6:97:33:ac'
  AND $__timeFilter(timestamp)
ORDER BY timestamp ASC

Unter Standard options → Unit: Percent (0-100)

So hast du Temperatur und Feuchtigkeit in einem Panel mit zwei Y-Achsen.

4.4 Leistungs-Panel

Neues Panel hinzufügen:

SELECT
  timestamp AS time,
  power AS 'Leistung'
FROM power_data
WHERE device_id = 'shelly1pmminig3-d0cf13cb5dd8'
  AND $__timeFilter(timestamp)
ORDER BY timestamp ASC

Einstellungen:

Title: Leistungsverlauf
Unit: Watt (W)
Graph style: Area (für gefüllte Fläche)

4.5 Aktueller Verbrauch als Gauge

Für eine Anzeige des aktuellen Werts:

SELECT
  power AS 'Aktuell'
FROM power_data
WHERE device_id = 'shelly1pmminig3-d0cf13cb5dd8' // bitte anpassen
ORDER BY timestamp DESC
LIMIT 1

Einstellungen:

Visualization: Gauge
Title: Aktuelle Leistung
Unit: Watt (W)
Min: 0
Max: 1000 (oder dein erwarteter Maximalwert)
Thresholds: Grün bis 100W, Gelb bis 500W, Rot darüber

4.6 Switch-Events als Tabelle

SELECT
  timestamp AS 'Zeit',
  CASE WHEN switch_state = 1 THEN 'Ein' ELSE 'Aus' END AS 'Status',
  event_type AS 'Quelle'
FROM switch_events
WHERE device_id = 'shelly1pmminig3-d0cf13cb5dd8'
  AND $__timeFilter(timestamp)
ORDER BY timestamp DESC
LIMIT 20

Einstellungen:

Visualization: Table
Title: Letzte Schaltvorgänge

5. Dashboard verfeinern

5.1 Panels anordnen

Ziehe die Panels an die gewünschte Position.

laut diesem Beitrag fertig konfiguriertes Dashboard in Grafana

5.2 Auto-Refresh aktivieren

Oben rechts neben der Zeitauswahl:

Klick auf das Refresh-Symbol
Wähle z.B. 5m für automatische Aktualisierung alle 5 Minuten

5.3 Zeitraum als Standard setzen

Wähle oben rechts deinen Standard-Zeitraum (z.B. „Last 24 hours“)
Klick auf das Zahnrad-Symbol (Dashboard settings)
Unter Time options → Time zone: Europe/Berlin
Speichern

5.4 Dashboard speichern

Klick auf das Disketten-Symbol oben rechts:

Name: Shelly Smart Home
Folder: General (oder einen eigenen Ordner erstellen)

6. Dashboard-Vorlage zum Import

Damit du nicht alles manuell einrichten musst, hier eine fertige Dashboard-Vorlage.

6.1 JSON importieren

Dashboards → New → Import
JSON-Code einfügen (siehe unten)
Datenquelle auswählen
Import klicken

{
  "title": "Shelly Smart Home",
  "tags": ["shelly", "smarthome", "iot"],
  "timezone": "Europe/Berlin",
  "refresh": "5m",
  "panels": [
    {
      "id": 1,
      "title": "Temperaturverlauf",
      "type": "timeseries",
      "gridPos": {"h": 8, "w": 24, "x": 0, "y": 0},
      "targets": [
        {
          "rawSql": "SELECT timestamp AS time, temperature AS 'Temperatur' FROM sensor_data WHERE $__timeFilter(timestamp) ORDER BY timestamp ASC",
          "format": "time_series"
        }
      ],
      "fieldConfig": {
        "defaults": {
          "unit": "celsius"
        }
      }
    },
    {
      "id": 2,
      "title": "Aktuelle Leistung",
      "type": "gauge",
      "gridPos": {"h": 6, "w": 6, "x": 0, "y": 8},
      "targets": [
        {
          "rawSql": "SELECT power FROM power_data ORDER BY timestamp DESC LIMIT 1",
          "format": "table"
        }
      ],
      "fieldConfig": {
        "defaults": {
          "unit": "watt",
          "min": 0,
          "max": 500,
          "thresholds": {
            "steps": [
              {"value": 0, "color": "green"},
              {"value": 100, "color": "yellow"},
              {"value": 300, "color": "red"}
            ]
          }
        }
      }
    },
    {
      "id": 3,
      "title": "Leistungsverlauf",
      "type": "timeseries",
      "gridPos": {"h": 6, "w": 18, "x": 6, "y": 8},
      "targets": [
        {
          "rawSql": "SELECT timestamp AS time, power AS 'Leistung' FROM power_data WHERE $__timeFilter(timestamp) ORDER BY timestamp ASC",
          "format": "time_series"
        }
      ],
      "fieldConfig": {
        "defaults": {
          "unit": "watt",
          "custom": {
            "fillOpacity": 20
          }
        }
      }
    },
    {
      "id": 4,
      "title": "Schaltvorgänge",
      "type": "table",
      "gridPos": {"h": 6, "w": 24, "x": 0, "y": 14},
      "targets": [
        {
          "rawSql": "SELECT timestamp AS 'Zeit', CASE WHEN switch_state = 1 THEN 'Ein' ELSE 'Aus' END AS 'Status', event_type AS 'Quelle' FROM switch_events WHERE $__timeFilter(timestamp) ORDER BY timestamp DESC LIMIT 20",
          "format": "table"
        }
      ]
    }
  ],
  "schemaVersion": 38
}

⚠️ Wichtig: Nach dem Import musst du in jedem Panel die Device-IDs an deine Geräte anpassen!

7. Tipps für Fortgeschrittene

7.1 Variablen für Geräte-Auswahl

Statt Device-IDs hart zu codieren, kannst du ein Dropdown erstellen:

Dashboard Settings → Variables → Add variable
Name: device
Type: Query
Query: SELECT DISTINCT device_id FROM sensor_data

In den Panel-Queries dann: WHERE device_id = '$device'

7.2 Alerting einrichten

Grafana kann dich warnen, wenn Werte kritisch werden:

Panel bearbeiten → Alert Tab
Create alert rule
Bedingung setzen, z.B.: temperature > 30
Benachrichtigung konfigurieren (E-Mail, Telegram, etc.)

7.3 Mobile Ansicht

Grafana ist responsive. Für die beste Mobile-Erfahrung:

Panels nicht zu breit machen
Gauge und Stat-Panels für wichtige Werte
Grafana Cloud App (optional)

8. Fazit: PHP oder Grafana?

Beide Ansätze haben ihre Berechtigung:

Nutze das PHP-Dashboard wenn:

Du volle Kontrolle über jeden Aspekt willst
Du PHP/JavaScript lernen möchtest
Minimale Ressourcen wichtig sind
Du kein weiteres System verwalten willst

Nutze Grafana wenn:

Du schnell professionelle Dashboards brauchst
Du Alerting und erweiterte Features willst
Mehrere Datenquellen zusammenführen möchtest
Du interaktive Zeitraum-Auswahl schätzt

Oder nutze beides: PHP-Dashboard für die schnelle Übersicht, Grafana für tiefe Analysen.

Zusammenfassung der Serie

In dieser Artikelserie hast du ein komplettes lokales Smart Home Monitoring aufgebaut:

Teil 1: Shelly-Grundlagen – Plattform kennenlernen
Teil 2: Scripting – Erste Automatisierungen
Teil 3: Datenbank-Integration – MySQL/MariaDB anbinden
Teil 4: BLU-Gateway – Bluetooth-Sensoren auswerten
Teil 5a: PHP-Dashboard – Eigene Visualisierung bauen
Teil 5b: Grafana-Integration – Professionelle Dashboards (dieser Beitrag)

Alle Daten bleiben bei dir – kein Cloud-Zwang, volle Kontrolle, maximaler Datenschutz.

Downloads

Dashboard-Vorlage (JSON) – Link zu GitHub

Hast du Fragen oder Anregungen? Schreib mir in den Kommentaren!

Zurück zur Übersicht: Shelly Smart Home Serie