> For the complete documentation index, see [llms.txt](https://docs.kiloiot.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kiloiot.io/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/chart-widget.md).
# Diagramm-Widget
Stellen Sie die Historie eines Sensors als Linien- oder Balken-Diagramm-Widget dar — aktueller Wert, Trend, Durchschnittslinie und Schwellenwert-Bänder.
Das Chart-Widget stellt die Historie eines Messwerts als Diagramm dar — als Linie oder Balken über die letzte Stunde, den letzten Tag, die letzte Woche oder den letzten Monat — sodass du nicht nur siehst, wo ein Wert jetzt steht, sondern auch den Trend, der ihn dorthin gebracht hat.
Ein einzelnes Chart-Widget vereint vier Dinge an einem Ort: den **aktuellen Wert** als großen Messwert oben, den **Verlaufsgraphen** — eine Linie oder Balken über einen gewählten Zeitraum — eine optionale **Durchschnittslinie** über diesen Zeitraum sowie optionale **Schwellenwert-Bänder** die Konformitäts-, Warn- und Verstoßbereiche direkt im Diagramm markieren. Ein Bediener sieht den Messwert jetzt, den Weg dorthin und den betrieblichen Kontext, ohne die Ansicht wechseln zu müssen.
Schwellenwert-Bänder färben auch den **großen aktuellen Messwert** oben — wenn der Live-Wert innerhalb eines Bands liegt, übernimmt diese Hauptzahl die Farbe des Bands, während Linie oder Balken die in der Registerkarte „Datenquelle“ festgelegte Metrikfarbe behalten. So signalisiert das Widget den Status, bevor jemand den Verlauf genauer betrachtet.
Ein Chart-Widget verfolgt eine Metrik. Um mehrere Messwerte zu vergleichen, füge für jeden ein separates Chart-Widget hinzu.
## Line und Bar sind Chart-Typen
Der Dashboard-Picker enthält ein **Diagramm** Widget. In seiner **Darstellung** Registerkarte **Widget-Typ** bietet es zwei Darstellungen:
* [Liniendiagramm](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/chart-widget/line-chart.md) — verbindet Messwerte zu einem kontinuierlichen Trend.
* [Balkendiagramm](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/chart-widget/bar-chart.md) — zeichnet für jede Meldung einen separaten Balken.
Sie verwenden dieselbe Datenquelle, denselben Zeitraum, denselben Wertebereich, dieselben Schwellenwerte, denselben Durchschnitt, dieselben Achsen, dieselbe Legende und **Metriken darunter anzeigen** Einstellungen. **Wert auf Balken anzeigen** gilt nur für Bar und wird ausgeblendet, wenn Line ausgewählt ist.
## Ein Chart-Widget konfigurieren
Hier ist eine vollständige Einrichtung für einen realen Fall — die Temperatur eines Kühlschranks über die Woche zu überwachen, damit du nicht nur den aktuellen Messwert siehst, sondern auch, ob er die ganze Zeit konform blieb. Ein Temperatursensor am Gerät meldet in °C. Das ist nur ein Beispiel: Ein Chart eignet sich für jeden Messwert, dessen Verlauf wichtig ist — nur das Gerät und die Zahlen ändern sich.
1. Öffne das Dashboard im Bearbeitungsmodus und klicke **Diagramm** im Widget-Picker. Das Einstellungsfenster öffnet sich auf der **Datenquelle** Registerkarte, noch ohne Datenquellen.
2. Klicken Sie **Datenquelle hinzufügen**. Ein **Datenquelle 1** Block erscheint.
3. Klicke im Block auf **Gerät auswählen** und wähle den Temperatursensor der Kühlanlage aus.
4. Klicken Sie **Metrik hinzufügen**. Eine Metrikzeile erscheint.
5. Setze in der Zeile **Datentyp** nach **Telemetrie**, wähle den Temperatur-Messwert unter **Geräte-Metrik**und wähle eine **Farbe** — diese Farbe zeichnet die Linie (oder Balken) im Diagramm und ist zugleich die Grundfarbe des großen aktuellen Messwerts oben.
> **Kannst du deine Metrik nicht finden?** Die **Geräte-Metrik** Liste bietet nur numerische Metriken an. Wenn ein erwarteter Messwert fehlt, wird die Metrik als String oder Boolean statt als Integer oder Float gespeichert. Öffne **Geräte → Metriken**, suche die Metrik und ändere ihre Speicherung auf Integer oder Float — vorausgesetzt, das Gerät liefert tatsächlich eine Zahl. Siehe [Metriken](/kilo-docs-de/kilo-iot-server/devices/metric-templates.md).
Ein Chart-Widget verfolgt **eine Metrik** — sobald diese Metrik eingerichtet ist, gibt es keine zweite Metrikzeile mehr auszufüllen. Um mehrere Messwerte zu vergleichen, erstelle für jeden ein separates Chart-Widget.
6. Klicken Sie **Weiter** um die **Darstellung** Registerkarte zu öffnen.
7. Gib einen **Widget-Namen** — zum Beispiel "Temperatur des Kühlraums" — und eine optionale **Beschreibung**.
8. Unter **Widget-Typ**, wähle **Linie** oder **Balken**. Der **Linie** Typ zeichnet eine kontinuierliche Kurve, ideal für einen Messwert, der sich allmählich ändert, etwa die Temperatur; **Balken** zeichnet pro Intervall einen Balken, nützlich, wenn du einzelne Meldungen vergleichen willst. Für diesen Fall wähle **Linie**.
9. Lege den **Zeitraum** — den Zeitraum fest, den das Diagramm abdeckt: **Letzte Stunde**, **Letzter Tag**, **Letzte Woche**oder **Letzter Monat**. Für eine wöchentliche Compliance-Prüfung wähle **Letzte Woche**.
10. Unter **Wertebereich festlegen**, setze **Von** und **Bis** — die Unter- und Obergrenze der vertikalen Achse. Wähle einen Bereich, der jede Temperatur, die das Gerät erreicht, bequem umfasst: **Von** -5, **Bis** 20 (°C). (Ein neues Widget startet bei 0–100; ändere es passend zum Messwert.)
11. Unter **Schwellenwerte**, klicke auf **Schwellenwert hinzufügen** für jedes Betriebsband. Die **Von** und **Bis** sind die untere und obere Kante eines farbigen Bands auf derselben Skala von -5 bis 20 °C; gib ihm eine **Beschriftung** und ein **Farbe**.
* "Konform" — **Von** 2, **Bis** 8 — grün
* "Warnung" — **Von** 8, **Bis** 12 — bernsteinfarben
* "Überschreitung" — **Von** 12, **Bis** 20 — rot
Jeder Schwellenwert hat zwei unabhängige visuelle Schalter. **Füllung anzeigen** zeichnet das Band als farbigen Hintergrund über das gesamte Diagramm; **Linie anzeigen** zeichnet eine Begrenzungslinie an den Kanten des Bands. Schalte **Füllung anzeigen** für das Konform-Band ein, damit die Sicherheitszone als grüner Hintergrund hinter der Kurve erscheint; schalte **Linie anzeigen** für das Überschreitungsband ein, damit seine untere Kante bei 12 °C als harte rote Linie erscheint, die die Temperatur nicht überschreiten darf.
12. Aktiviere **Durchschnittswert anzeigen** um eine gestrichelte Linie beim Durchschnitt des Zeitraums hinzuzufügen, in der Legende mit "Average" beschriftet.
13. **Vertikale Achsenlinien anzeigen** und **Horizontale Achsenlinien anzeigen** fügen Linien für Zeitachse und Wertachse hinzu — schalte sie ein, wenn ein Raster das Diagramm leichter lesbar macht.
14. Aktiviere **Datenlegende anzeigen** um die Schwellenwertbeschriftungen und den Durchschnitt neben dem Diagramm aufzulisten.
15. Aktiviere **Metriken darunter anzeigen** um den Metriknamen und den aktuellen Messwert in einer Zeile unter dem Diagramm anzuzeigen. So bleibt der Messwert sichtbar, wenn das Widget zu klein ist, um den großen Wert klar darzustellen.
16. Wenn du **Balken** in Schritt 8 **Wert auf Balken anzeigen** druckt den jeweiligen Wert direkt auf den Balken, sodass ein Bediener genaue Zahlen vom Diagramm ablesen kann, statt sie an der Achse zu schätzen. Die Option gilt nur für Balkendiagramme — in einem Liniendiagramm gibt es keine Balken zu beschriften, daher wird sie nicht angeboten.
17. Klicken Sie **Speichern** um das Widget auf dem Dashboard zu platzieren.
Das Ergebnis: Ein Widget, dessen großer Messwert die aktuelle Temperatur anzeigt und dessen Diagramm die ganze Woche dahinter nachzeichnet — die grünen, bernsteinfarbenen und roten Bänder machen auf einen Blick deutlich, ob die Last konform blieb oder in Richtung einer Überschreitung driftete. Dasselbe Setup passt für jeden Messwert mit einem Verlauf, den man beobachten will; nur das Gerät, der Wertebereich und die Bänder ändern sich.
## Wie die Farbe des aktuellen Messwerts funktioniert
Der große Wert oben im Widget verwendet standardmäßig die in der Registerkarte „Datenquelle“ festgelegte Metrikfarbe. Wenn der aktuelle Wert in einen deiner Schwellenbereiche fällt, wechselt die Anzeige zur Farbe dieses Schwellenwerts und kehrt zur Metrikfarbe zurück, wenn der Wert alle Bänder verlässt.
Ein Widget für einen Kühlraum zeigt also grün, solange der Messwert im Konform-Band liegt, und wird im selben Moment rot, wenn er in den Verstoßbereich steigt — ohne separate Konfiguration für den aktuellen Messwert. Das Widget macht die Lage sichtbar; um beim Eintritt in diesen Zustand benachrichtigt zu werden, kombiniere es mit einem [Alarm](/kilo-docs-de/kilo-iot-server/alarm.md).
## Schwellenwerte vs. Bedingungen
Das Chart-Widget verwendet **Schwellenwert-Bänder** — farbige Bereiche, die im Verlaufsdiagramm eingezeichnet werden. Das vollständige Bedingungssystem — benannte Regeln, Prioritätsreihenfolge, Standardwerte pro Metrik — gehört zu den Widgets Last Data und Image. Siehe [Bedingungen](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/conditions.md).
## Durchgerechnete Beispiele
**Serverraumkühlung — eine Woche Verlauf** Ein Rack-Lufttemperatursensor auf einem **Linie** Diagramm, **Letzte Woche**, Wertebereich 10–40 °C. Drei Schwellenwerte: grün 18–27 °C "Normal", bernsteinfarben 27–32 °C "Warm", rot 32–40 °C "Kritisch". Ein Bediener, der das Dashboard nach einem Wochenende prüft, sieht sofort, ob die Kühlung stabil blieb oder außerhalb der Arbeitszeit in den bernsteinfarbenen und roten Bereich ausschlug.
**Schwingungsüberwachung — einzelne Meldungen als Balken** Ein Schwingungssensor einer Anlage, der in regelmäßigen Abständen die Amplitude meldet, auf einem **Balken** Diagramm, **Letzter Tag**, Wertebereich 0–20 mm/s. Drei Schwellenwerte: grün 0–7 mm/s "Normal", bernsteinfarben 7–12 mm/s "Erhöht", rot 12–20 mm/s "Kritisch". Jeder Balken steht für ein Meldungsintervall, sodass ein Ingenieur genau erkennen kann, welche Intervalle auffällig waren, und sie mit dem Produktionsplan abgleichen kann. Das ist der Fall, der **Wert auf Balken anzeigen** — wenn es bei dem Widget darum geht, einzelne Meldungen zu vergleichen, spart es Zeit, die Amplitude auf jedem Balken anzuzeigen, statt jeden einzelnen Wert von der Achse abzulesen.
**Energieverbrauch — Basislast und Spitzen** Ein Stromzähler an einer Produktionslinie, **Linie** Diagramm, **Letzte Woche**. **Von** und **Bis** an deine eigene Basislast und den erwarteten Spitzenwert an. Jede Abweichung über den erwarteten Bereich hinaus wird dann sofort sichtbar, sobald die Linie das grüne Band verlässt.
Ein Chart eignet sich für jeden Messwert, dessen Verlauf Bedeutung hat — Druck, Durchfluss, Luftfeuchtigkeit, Füllstand — also betrachte dies als Ausgangspunkt. Überall dort, wo die Frage lautet „Wie ist der Zustand jetzt, und wie ist er dorthin gelangt?“, beantwortet das Chart-Widget beides.
## Siehe auch
* [Widget für Letzte Daten](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/last-data-widget.md) — Der aktuelle Wert allein, wenn du den Verlauf nicht brauchst
* [Liniendiagramm](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/chart-widget/line-chart.md) — Einen kontinuierlichen Trend konfigurieren und lesen
* [Balkendiagramm](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/chart-widget/bar-chart.md) — Meldungen vergleichen und Werte auf Balken anzeigen
* [Bedingungen](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/conditions.md) — Farbvorgaben pro Metrik für die Widgets Last Data und Image
* [Widgets hinzufügen](/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets.md) — Bearbeitungsmodus und der Widget-Picker
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.kiloiot.io/kilo-docs-de/kilo-iot-server/dashboards/adding-widgets/chart-widget.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
