# Pivot Diagramm Widget type: `opendash-widget-hc-timeseries-pivot` · Plugin: `@opendash/plugin-highcharts` ![Pivot Chart preview](../../../../../_attachments/opendash/widgets/assets/widget-previews/hc-timeseries-pivot.png) ### Beschreibung Das Widget **Pivot-Diagramm** visualisiert restrukturierte und aggregierte Zeitreihendaten in Form eines interaktiven, mehrdimensionalen Diagramms. Anwender können historische Messwerte flexibel nach verschiedenen Zeitattributen aufteilen und gegenüberstellen, um komplexe Lastprofile, zyklische Muster und Trends über frei wählbare Perioden hinweg visuell zu analysieren. ### Voraussetzungen * Mindestens eine historische Datenquelle (z. B. Telemetriedaten für Wirkleistung, Verbrauch, Temperatur oder andere kontinuierliche Messwerte) im System. * Vorhandene historische Datenbestände innerhalb des ausgewählten Abfragezeitraums. --- ## 1. Konfiguration und Einrichtung 1. Klicke auf der Dashboard-Kachel des noch unkonfigurierten Widgets auf die Schaltfläche **Einstellungen**. 2. Klicke im Reiter **Daten** in das Eingabefeld unter „Wähle Datenquellen aus, die du Visualisieren möchtest.“. 3. Navigiere durch deine Gerätestruktur, wähle den gewünschten Datenpunkt aus und bestätige die Auswahl mit einem Klick auf **Schließen**. 4. Definiere im Bereich darunter den Abfragezeitraum, indem du entweder eine **Relative Auswahl** (z. B. eine **Woche**) oder eine **Absolute Auswahl** mit festem Kalenderdatum festlegst. 5. Wechsle im oberen Bereich des Konfigurationsfensters in den Reiter **Einstellungen**. 6. Wähle im ersten Dropdown-Menü unter „Spalten und Reihen Attribute festlegen“ das primäre zeitliche Attribut aus (z. B. **Stunde**). 7. Scrolle nach unten zur Sektion „Wertdarstellung festlegen“ und ordne deiner Datenquelle im rechten Dropdown-Menü die gewünschte mathematische Berechnungsmethode zu (z. B. **Durchschnitt**). 8. Bestimme im Bereich „Visualisierungsart festlegen“ deinen bevorzugten Diagrammtyp, indem du die entsprechende Schaltfläche (z. B. **Liniendiagramm (gekurvt)**) anklickst. 9. Klicke unten rechts auf **Speichern**, um die Konfiguration zu übernehmen und das Pivot-Diagramm auf deinem Dashboard zu generieren. --- ## 2. Erweiterte Einstellungen & Formatierung Über die erweiterten Optionen lässt sich die visuelle Darstellung der Datenreihen präzise steuern sowie zusätzliche Achsenbeschriftungen und Interaktionswerkzeuge aktivieren: | Option | Beschreibung | Funktion | | :--- | :--- | :--- | | **Filter hinzufügen** | Kontrollkästchen unter der Datenquellen-Auswahl. | Erlaubt die Eingrenzung und Filterung der verfügbaren Datenpunkte nach vordefinierten Kriterien. | | **Relative Auswahl** | Zeitbereichs-Option im Reiter Daten. | Lädt Daten flexibel anhand eines rollierenden Zeitfensters relativ zur aktuellen Systemzeit. | | **Absolute Auswahl** | Zeitbereichs-Option im Reiter Daten. | Fixiert die Datenabfrage auf ein fest definiertes Start- und Enddatum im Kalender. | | **Daten aus der Zukunft laden** | Kontrollkästchen im unteren Datenbereich. | Bezieht zukünftige Plan- oder Prognosewerte in das Diagramm ein, sofern diese im System existieren. | | **Randwerte ergänzen** | Kontrollkästchen im unteren Datenbereich. | Schließt eventuelle Datenlücken an den äußeren Grenzen des Abfragezeitraums automatisch. | | **Start-/Endzeit an Zeiteinheit anpassen** | Kontrollkästchen im unteren Datenbereich. | Rundet den gewählten Abfragezeitraum exakt auf die Grenzen der eingestellten Zeiteinheit ab. | | **Sonstige Einstellungen** | Ausklappbares Menü im Datenbereich. | Ermöglicht die Aktivierung einer automatischen, regelmäßigen Aktualisierung der Diagrammdaten. | | **Spalten und Reihen Attribute festlegen** | Erstes Dropdown-Menü im Reiter Einstellungen. | Definiert das zeitliche Hauptkriterium für die Datentrennung (z. B. Sekunde, Minute, Stunde, Tag, Woche, Monat, Jahr). | | **Attribute für Reihen festlegen** | Mittleres Eingabefeld im Reiter Einstellungen. | Erlaubt die Zuweisung spezifischer Zeitstempel-Attribute für die Zeilenstrukturierung. | | **Attribute für Spalten festlegen** | Unteres Eingabefeld im Reiter Einstellungen. | Erlaubt die Zuweisung spezifischer Zeitstempel-Attribute für die Spaltenstrukturierung. | | **Wertdarstellung festlegen** | Mathematische Optionen im Reiter Einstellungen. | Bestimmt das Berechnungsverfahren pro Kurve (z. B. Summe, Durchschnitt, Minimalwerte, Maximalwerte, Anzahl, Erster/Letzter Wert, Differenz Min & Max). | | **Visualisierungsart festlegen** | Grafische Auswahlfelder im Reiter Einstellungen. | Wechselt das Anzeigeformat (Liniendiagramm, Liniendiagramm (gekurvt), Flächendiagramm, Flächendiagramm (gestuft), Punktwolke, Blockdiagramm). | | **Zeige Legende unter Diagramm** | Kontrollkästchen unter den Interaktionsmöglichkeiten. | Blendet die Farblegende der einzelnen Pivot-Datenreihen unterhalb der Grafik ein oder aus. | | **Zeige Verlauf stufenförmig an** | Kontrollkästchen unter den Interaktionsmöglichkeiten. | Verändert die Linienführung so, dass Änderungen als harte Stufen statt als schräge Linien dargestellt werden. | | **Zeige Zeigen-Tooltip für Datenpunkte** | Kontrollkästchen unter den Interaktionsmöglichkeiten. | Aktiviert ein dynamisches Infofenster, das beim Überfahren eines Datenpunkts mit der Maus den exakten Wert anzeigt. | | **Zoom für X-Achsen / Y-Achsen aktivieren** | Kontrollkästchen unter den Interaktionsmöglichkeiten. | Ermöglicht das Herangehen an bestimmte Achsenabschnitte per Mausbewegung direkt im Diagramm. | | **Zeige kleinen Übersichtsplot** | Kontrollkästchen unter den Interaktionsmöglichkeiten. | Blendet eine verkleinerte Gesamtübersicht des Diagramms zur besseren Orientierung beim Zoomen ein. | | **Linien für minimale / maximale Werte anzeigen** | Kontrollkästchen unter den Interaktionsmöglichkeiten. | Zeichnet automatische Referenzlinien für die absoluten Tiefst- und Höchstwerte in den Chart ein. | | **Beschriftung - X-Achse / Y-Achse** | Text-Eingabefelder ganz unten im Reiter Einstellungen. | Ermöglicht die manuelle Benennung der horizontalen und vertikalen Achsen (z. B. „Zeit“ und „Leistung in kW“). | --- ## 3. Das fertige Dashboard-Ergebnis Nach dem Speichern wandelt das Widget die Zeitreihen in ein mehrdimensionales Diagramm um. Hast du beispielsweise die Aggregationsart auf „Stunde“ eingestellt, bildet das Widget für jede einzelne Stunde des Tages eine eigene, farblich voneinander getrennte Linie ab. Diese Linien erstrecken sich über die X-Achse, welche die Tage des ausgewählten Zeitraums abbildet. Bewege die Maus über das Diagramm, um den interaktiven Tooltip zu öffnen. Dieser zeigt dir sofort für jeden Schnittpunkt die exakten Leistungswerte an. Über die Schaltflächen am unteren Rand des Widgets kannst du komfortabel zwischen verschiedenen Seiten oder Zeitabschnitten hin- und herblättern. > 💡 **Praxis-Tipp:** Nutze das Pivot-Diagramm in Kombination mit dem Typ **Liniendiagramm (gekurvt)** und dem Attribut **Tag**, um die Verläufe der einzelnen Wochentage direkt übereinanderzulegen. So erkennst du sofort, ob ein bestimmter Wochentag (z. B. der Montag beim Anfahren der Produktion) systematisch höhere Lastspitzen aufweist als die restlichen Tage.