# 01 Zeitreihen

Zeitreihendiagramme sind die häufigste Visualisierung in Fertigungs-Dashboards. Sie zeigen, wie sich Prozessparameter wie Temperatur, Druck und Geschwindigkeit über die Zeit verändern. In diesem Tutorial baust du Schritt für Schritt ein Dashboard wie dieses:

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-6a6a2c02f680ef06406dd183692f233cf590ccf5%2Fgrafana-vis-dashboard-overview-01.png?alt=media" alt=""><figcaption></figcaption></figure>

## Was du lernst

* Mehrere Variablen in einem Diagramm anzeigen
* Ist-Werte mit Sollwerten vergleichen
* Linienstile anpassen (Farben, gestrichelte Linien, Füllung)
* Legenden mit statistischen Berechnungen konfigurieren

## Voraussetzungen

* [Tutorial 1.2: Dein erstes Dashboard](https://docs.enlyze.com/integrations/grafana/getting-started/02-first-dashboard) abgeschlossen
* Ein Dashboard mit mindestens einem Zeitreihen-Panel

***

## Mehrere Variablen in einem Diagramm

Es gibt zwei Wege, mehrere Variablen darzustellen:

### Mehrere Variablen in einer Abfrage

Der einfachste Ansatz, wenn die Variablen von derselben Maschine stammen:

1. Bearbeite dein Zeitreihen-Panel (Klick auf den Panel-Titel, dann **Edit**)
2. Klicke im Bereich **Variables** auf das **+**-Zeichen, um ein weiteres Variablen-Dropdown hinzuzufügen
3. Wähle die gewünschte Variable aus dem neuen Dropdown

Wiederhole den Vorgang für jede weitere Variable. Bereits ausgewählte Variablen stehen nicht erneut zur Auswahl.

Alle ausgewählten Variablen erscheinen als separate Linien im Diagramm. Geeignet für den Vergleich verwandter Messwerte derselben Maschine (z. B. mehrere Temperatursensoren).

### Mehrere Abfragen

Verwende diese Methode, wenn du Variablen von verschiedenen Maschinen brauchst oder jede Abfrage einzeln steuern möchtest:

1. Klicke im Abfrage-Editor auf **+ Query**, um eine neue Abfrage hinzuzufügen
2. Konfiguriere die zweite Abfrage mit einem anderen Standort, einer anderen Maschine oder Variablen
3. Jede Abfrage erscheint als eigener Abschnitt (Query A, Query B usw.)

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-a8907a272db26ab87ca8e48566a5d09395c052cc%2Fgrafana-vis-two-queries-01.png?alt=media" alt=""><figcaption></figcaption></figure>

Geeignet für den Vergleich derselben Variable über verschiedene Maschinen hinweg.

***

## Ist- und Sollwerte vergleichen

Ein häufiger Anwendungsfall in der Fertigung: Messwerte (Ist) mit Zielwerten (Soll) vergleichen und visuell unterscheidbar machen.

### Variablen auswählen

Wähle in deiner Abfrage sowohl die Ist- als auch die Sollwert-Variable (z. B. "Abzugsgeschwindigkeit" und "Abzugsgeschwindigkeit (Soll)").

Bei mehreren Variablen vergibt Grafana automatisch Standardfarben und -stile. Um Farbe, Linienstil oder andere Eigenschaften pro Variable anzupassen, nutze **Overrides**.

### Overrides konfigurieren

Mit Field Overrides gestaltest du jede Datenreihe individuell:

1. Scrolle in der rechten Seitenleiste nach unten zu **Overrides**
2. Klicke auf **+ Add field override** und wähle **Fields with name**
3. Wähle den Ist-Wert aus und setze eine feste Farbe (z. B. Blau)
4. Füge einen zweiten Override für den Sollwert hinzu
5. Setze eine andere Farbe (z. B. Orange) und wähle unter **Graph styles** > **Line style** den Modus **Dash**

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-42fe26d51a67db78be4c5c86f25338a057eab400%2Fgrafana-vis-overrides-config-01.png?alt=media" alt=""><figcaption></figcaption></figure>

Das Ergebnis: der Ist-Wert erscheint als durchgezogene blaue Linie, der Sollwert als gestrichelte orangefarbene Linie.

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-dd15154bcff9ff2e5d7bf0bc30d42e01640c8727%2Fgrafana-vis-actual-vs-setpoint-result-01.png?alt=media" alt=""><figcaption></figcaption></figure>

***

## Liniengestaltung

Die Stiloptionen findest du in der rechten Seitenleiste unter **Graph styles**. Hier die wichtigsten Einstellungen:

### Linienstärke und Füllung

* **Line width**: Standardwert 1. Erhöhe auf 2 oder 3 für prominentere Linien (z. B. Shopfloor-Monitore).
* **Fill opacity**: Fügt einen schattierten Bereich unter der Linie hinzu. Eine dezente Füllung (10-30 %) hilft, überlappende Linien voneinander zu unterscheiden.

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-313c6395110e2a7c4a0b91ee9e4bfb29781ce3ba%2Fgrafana-vis-fill-opacity-01.png?alt=media" alt=""><figcaption></figcaption></figure>

### Gradientenmodus

Unter **Gradient mode** erzeugst du einen Farbverlauf im Füllbereich:

| Modus       | Beschreibung                         |
| ----------- | ------------------------------------ |
| **None**    | Einfarbige Füllung                   |
| **Opacity** | Verblasst von oben nach unten        |
| **Hue**     | Farbverschiebung über den Gradienten |
| **Scheme**  | Verwendet den Farbschema-Gradienten  |

### Linieninterpolation

Bestimmt, wie Datenpunkte verbunden werden:

| Modus                 | Einsatzbereich               |
| --------------------- | ---------------------------- |
| **Linear**            | Die meisten Daten (Standard) |
| **Smooth**            | Trends, Präsentationen       |
| **Step before/after** | Diskrete Zustandswechsel     |

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-3ce379e93caeb25fdf47d964a145607bf75f8813%2Fgrafana-vis-interpolation-01.png?alt=media" alt=""><figcaption></figcaption></figure>

***

## Legende und Tooltip

### Legendenmodus

Suche in der Seitenleiste nach **Legend** und wähle den Modus:

| Modus      | Beschreibung                             |
| ---------- | ---------------------------------------- |
| **List**   | Einfache Liste der Datenreihennamen      |
| **Table**  | Tabelle mit konfigurierbaren Statistiken |
| **Hidden** | Keine Legende                            |

Im **Table**-Modus kannst du unter **Values** berechnete Werte anzeigen (z. B. **Min**, **Max**, **Mean**, **Last \***). In der Fertigung helfen Min, Max und Mean, schnell zu erkennen, ob Werte innerhalb der erwarteten Bereiche geblieben sind.

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-8a9fbf3618645c8939d32de158d8adddeb202bd8%2Fgrafana-vis-legend-table-01.png?alt=media" alt=""><figcaption></figcaption></figure>

### Tooltip-Modus

Unter **Tooltip** > **Tooltip mode**:

| Modus      | Beschreibung                               |
| ---------- | ------------------------------------------ |
| **Single** | Zeigt nur die ausgewählte Datenreihe       |
| **All**    | Zeigt alle Datenreihen an diesem Zeitpunkt |
| **Hidden** | Kein Tooltip                               |

{% hint style="info" %}
Verwende **All** beim Vergleich mehrerer Datenreihen. Im Modus **All** kannst du die Sortierung auf **Descending** setzen, um den höchsten Wert zuerst zu sehen.
{% endhint %}

***

## Das fertige Panel

Die einzelnen Schritte ergeben zusammen ein Panel zur Prozessüberwachung. Hier die vollständige Konfiguration:

| Einstellung       | Wert                                                |
| ----------------- | --------------------------------------------------- |
| **Variables**     | Abzugsgeschwindigkeit, Abzugsgeschwindigkeit (Soll) |
| **Line width**    | 2                                                   |
| **Fill opacity**  | 10                                                  |
| **Legend mode**   | Table                                               |
| **Legend values** | Min, Max, Mean                                      |
| **Tooltip mode**  | All                                                 |

### Overrides

| Feld                         | Farbe         | Linienstil    |
| ---------------------------- | ------------- | ------------- |
| Abzugsgeschwindigkeit        | Blau (fest)   | Durchgezogen  |
| Abzugsgeschwindigkeit (Soll) | Orange (fest) | Dash (10, 10) |

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-ee42f9361c8cc8113bb58146ab655e2e61400c57%2Fgrafana-vis-complete-panel-01.png?alt=media" alt=""><figcaption></figcaption></figure>

***

## Tipps

* **Farbwahl**: Blau für Ist-/Messwerte, Orange/Gelb für Sollwerte, Rot nur für Fehler/Alarme.
* **Füllung**: Bei einzelnen Variablen 0-20 %, beim Vergleich zweier Variablen 0-10 % oder ganz ohne.
* **Performance**: Mehr als 10 Variablen in einem Panel können das Rendering verlangsamen. Teile die Daten lieber auf mehrere Panels auf.

***

## Nächste Schritte

* [**Einzelwert-Anzeigen**](https://docs.enlyze.com/integrations/grafana/visualisation-types/02-single-values) - Stat-, Gauge- und Bar-Gauge-Panels
* [**Tabellen**](https://docs.enlyze.com/integrations/grafana/visualisation-types/03-tables) - Daten in tabellarischer Form darstellen
* [**Erweiterte Gestaltung**](https://docs.enlyze.com/integrations/grafana/visualisation-types/04-advanced-styling) - Schwellenwerte, Einheiten und mehr