Zum Hauptinhalt springen
Pegelstände · 4 von 5

Dashboard erstellen

Das Dashboard beantwortet zuerst fachliche Fragen und ordnet danach die passenden Visualisierungen an: aktuelle Lage, Status je Messstelle, räumlicher Zusammenhang und zeitlicher Verlauf.

Die fachlichen Fragen festlegen​

Für die Referenz wurden fünf Fragen in eine gemeinsame Sicht übersetzt:

  • Wie hoch ist der aktuelle Pegel je Messstelle?
  • Wann wurde dort zuletzt gemessen?
  • Welche Statusstufe ergibt sich aus den hinterlegten Schwellen?
  • Wo liegen die Messstellen räumlich?
  • Wie hat sich der Pegel im gewählten Zeitraum entwickelt?

Die Seite in vier Bereiche gliedern​

1 · Überblick

Kopfzeile

Aktuelle Uhrzeit, jüngster Messzeitpunkt und Anzahl der betrachteten Messstellen geben den Kontext der gesamten Ansicht.

2 · Aktuelle Lage

Messstellenkarten

Je Messstelle erscheinen aktueller Wert, Veränderung, Sparkline und ausgeschriebener Status.

3 · Raumbezug

Karte

Die Karte verortet Messstellen und ergänzt bei Bedarf freigegebene WMS-Layer als räumlichen Kontext.

4 · Verlauf

Ganglinien und Tabelle

Zeitreihen zeigen Entwicklungen; eine textuelle Tabelle macht jüngste Werte und Schwellen direkt vergleichbar.

Grafana-Dashboard Pegelstände mit sechs Kennzahlenkarten, einer Karte und einer Infokarte zum Datenfluss.
Die Abbildung zeigt sechs ursprüngliche Ruhr-Pegel. Sie veranschaulicht den Aufbau; der vorgesehene gemeinsame Bestand der Referenz umfasst elf Messstellen.

Daten für eine Ganglinie abfragen​

Die Zeitachse verwendet dateobserved, nicht den technischen Eingangszeitpunkt time_index. Der Pegelwert wird als Fließkommazahl gelesen:

Abfrage A · Pegelverlauf
SELECT
  w.dateobserved AS "time",
  w.waterlevel::double precision AS waterlevel,
  w.entity_id AS station_id,
  w.source
FROM mtds_environment.etwaterobserved AS w
WHERE $__timeFilter(w.dateobserved)
  AND w.waterlevel IS NOT NULL
ORDER BY w.dateobserved;

Grafana wandelt das Ergebnis in einen Data Frame um. Das Business-Charts-Panel liest dessen Felder in der Charts Function und gibt ein Apache-ECharts-Optionsobjekt zurück:

Datenweg im Panel
TimescaleDB-Abfrage → Grafana Data Frame → Charts Function → ECharts option → interaktive Ganglinie

Ganglinien mit Business Charts und ECharts aufbauen​

Das folgende Muster zeigt das Prinzip und ist kein Export des abgebildeten Panels. Es erwartet die Felder time, waterlevel und station_id aus Abfrage A, gruppiert die Punkte nach Messstelle und erzeugt je Messstelle eine Linie:

Vereinfachte Charts Function
const frame = context.panel.data.series.find((series) => series.refId === 'A');
const timeField = frame?.fields.find((field) => field.name === 'time');
const valueField = frame?.fields.find((field) => field.name === 'waterlevel');
const stationField = frame?.fields.find((field) => field.name === 'station_id');

if (!timeField || !valueField || !stationField) {
  return {
    title: {text: 'Erwartete Felder fehlen'},
    series: []
  };
}

const pointsByStation = new Map();

for (let index = 0; index < timeField.values.length; index += 1) {
  const station = String(stationField.values[index]);
  const points = pointsByStation.get(station) ?? [];
  points.push([
    Number(timeField.values[index]),
    Number(valueField.values[index])
  ]);
  pointsByStation.set(station, points);
}

return {
  aria: {
    show: true,
    description: 'Zeitlicher Verlauf der Pegelstände nach Messstelle.'
  },
  tooltip: {trigger: 'axis'},
  legend: {type: 'scroll'},
  xAxis: {type: 'time'},
  yAxis: {type: 'value', name: 'Pegelstand [cm]'},
  series: [...pointsByStation.entries()].map(([name, data], index) => ({
    name,
    type: 'line',
    data,
    showSymbol: false,
    connectNulls: false,
    lineStyle: {
      type: ['solid', 'dashed', 'dotted'][index % 3]
    }
  }))
};

Die Feldnamen im JavaScript müssen exakt zu den Aliasnamen der SQL-Abfrage passen. Nach jeder Änderung werden ein kurzer Zeitraum, eine bekannte Messstelle, Nullwerte und ein Zeitraum ohne Daten geprüft. Erst danach wird das Panel in das gemeinsame Dashboard übernommen.

Business Charts muss bereitgestellt sein

Die Referenz verwendet das Plugin volkovlabs-echarts-panel. Ist das Panel in Ihrer Grafana-Instanz nicht auswählbar, lassen Sie die freigegebene Plugin-Version durch die Administration bereitstellen. Installieren Sie als Benutzer keine Erweiterungen selbst.

Status verständlich darstellen​

Die Schwellen bleiben fachlich konfigurierbar. Die Referenz unterscheidet vier Stufen und zeigt deren Bedeutung zusätzlich zur Farbe immer als Text:

Unter Meldehöhe

Normal

Grün · #88BD33

Meldehöhe bis HW2

Meldehöhe

Gelb · #FAB219

HW2 bis HW20

Hochwasser

Orange · #EC835A

Ab HW20

Großes Hochwasser

Rot · #D03B3B

Farbe allein reicht nicht: Statuskarten, Tooltips und Legende nennen die Stufe als Text. Mehrere Ganglinien unterscheiden sich zusätzlich durch durchgezogene, gestrichelte oder gepunktete Linien. Für ECharts wird die ARIA-Beschreibung aktiviert und in der tatsächlich eingesetzten Plugin-Version mit einem Screenreader geprüft.

Eingesetzte Panels gezielt verwenden​

Zeitreihen

Business Charts

Interaktive ECharts-Ganglinien aus Grafana Data Frames; in der Referenz mindestens Version 7.2.2.

Individuelle Karten

HTML Graphics

Frei gestaltete Messstellenkarten und Infobereiche; in der Referenz mindestens Version 2.2.3.

Räumlicher Kontext

Geomap WMS

Freigegebene WMS-Layer in die Kartenansicht einbinden; in der Referenz mindestens Version 2.0.3.

Gestaltung konsistent weiterführen​

Die Referenz liefert bereits Grundregeln für Informationshierarchie, Status und Zugänglichkeit. Das zentrale Gestaltungskonzept bündelt diese Regeln für weitere Dashboards: Grafana-Dashboards gestalten.

Nächster Schritt​

Das Dashboard zeigt die Lage, solange es geöffnet ist. Für anhaltende Grenzwertüberschreitungen und fehlende Aktualisierungen wird im nächsten Schritt eine fachliche Benachrichtigung ergänzt: Alerting einrichten.