Output.Rocks bietet die Möglichkeit, Daten in Tabellen und Diagrammen zu visualisieren. Während Tabellen klassischerweise benutzt werden um Werte eindeutig zu listen und abzurechnen, können sie gleichzeitig Rechenoperationen durchführen und transparent machen.

Diagramme sind dagegen eine gute Wahl um die Entwicklung von Werten im Zeitverlauf zu visualisieren oder die Aufteilung von Anteilen zu veranschaulichen. Dafür stehen eine Vielzahl an Diagrammtypen zur Verfügung.

Tabellen

Grundlegende Tabellensyntax

Die einfachste Methode in Output.Rocks um Tabellen zu erstellen ist die Verwendung Wiederholender Tabellenzeilen (Repeat Row) mit dem <<rr_objektName>> Tag.

Die einfache Wiederholung ermöglicht es, Zeilen einer Tabelle basierend auf einer Datenliste zu wiederholen. Nehmen wir den folgenden Datensatz:

{
  "monatsVerbrauch": [
    {
      "monat": "Januar", 
      "wert": 450, 
      "vorjahr": 420
    },
    {
      "monat": "Februar", 
      "wert": 420, 
      "vorjahr": 380
    },
    {
      "monat": "März", 
      "wert": 310, 
      "vorjahr": 340
    },
    {
      "monat": "April", 
      "wert": 280, 
      "vorjahr": 260
    }
  ]
}

Daraus können wir in Ihrer Word‑ oder LibreOffice‑Vorlage eine Tabelle erstellen, indem wir die entsprechenden Tags direkt in die Tabellenzellen einfügen. Die visuelle Formatierung (Farben, Rahmen, Schriftarten) legen Sie in der Vorlage fest. Tabellenzeilen die sich auf den Datensatz beziehen werden wir mit <<rr_objektName>> wiederholen und mit <<er_objektName>> wieder abschließen:

Tabelle die Zeilen für einen Datensatz wiederholt

+---------------+------------------+----------------+
| Monat         | Verbrauch (kWh)  | Vorjahr (kWh)  |
+---------------+------------------+----------------+
| <<rr_monatsVerbrauch>>                            |
+---------------+------------------+----------------+
| <<monat>>     | <<wert>>         | <<vorjahr>>    |
+---------------+------------------+----------------+
| <<er_monatsVerbrauch>>                            |
+---------------+------------------+----------------+

Summen und Berechnungen

In der .docx‑Vorlage können Sie direkt in einer Tabelle Rechenoperationen durchführen, wie zum Beispiel die automatische Summierung von Werten oder spezifische Berechnungen für bestimmte Zeilen.

Tabelle mit zeilen-interner und zeilen-übergreifender Berechnung:

<<$gesamtDifferenz=0>>

+---------------+-----------------------------------------------------+
| Monat         | Abweichung zum Vorjahr                              |
+---------------+-----------------------------------------------------+
| <<rr_monatsVerbrauch>>                                              |
+---------------+-----------------------------------------------------+
| <<monat>>     | <<$diff={wert - vorjahr}>>                          |
|               | <<$gesamtDifferenz={$gesamtDifferenz+$diff}>>       |
|               | <<$diff>> kWh                                       |
+---------------+-----------------------------------------------------+
| <<er_monatsVerbrauch>>                                              |
+---------------+-----------------------------------------------------+
| Gesamt        | <<$gesamtDifferenz>> kWh                            |
+---------------+-----------------------------------------------------+

Diagramme

Grundlegende Diagrammverwaltung und Einbettung

Alle dynamisch und individuell erstellen Diagramme von Output.Rocks werden im Diagramm-Editor Backend als JS Objekt erstellt und danach ähnlich wie bei dynamischer Bilderzeugung mit Platzhalter und Bildmarke in eine Vorlage eingefügt.

Die Schritte:

1. Zuerst wird das Diagramm im Werkzeuge -> Diagramm-Editor gestaltet. Nutzen Sie die verschiedenen Vorlagen und Konfigurationsoptionen um das Diagramm zu gestalten. Kopieren Sie die fertige Konfiguration in die Zwischenablage.

2. Unter Vorlagen-Management -> Diagramme legen sie nun das Diagramm mit seinem Identifier an. Im Reiter 'Konfiguration' fügen Sie die Konfiguration aus Schritt 1 ein.

3. In der Vorlage definiert ein Platzhalter-Bild die Maße des Diagramms und wird mit der Bildmarke img_identifierDesDiagramms versehen.

4. Für System-Events wird das Diagramm zusätzlich der Vorlage zugewiesen. Im Reiter 'Vorlagen' des Diagramm-Editors werden alle zugewiesenen Vorlagen ausgewählt.

Einfaches Liniendiagramm

Hier ein einfaches Beispiel für ein Liniendiagramm, das den Verbrauch über mehrere Monate darstellt:

{
  "type": "line",
   "data": {
    "labels": ["Januar", "Februar", "März", "April", "Mai", "Juni"],
    "datasets": [
      {
        "label": "Monatlicher Verbrauch",
        "backgroundColor": "rgba(54, 162, 235, 0.5)",
        "borderColor": "rgb(54, 162, 235)",
        "data": [420, 460, 310, 280, 260, 180]
      }
    ]
  },
  "options": {
    "title": {
      "display": true,
      "text": "Verbrauchsentwicklung"
    }
  }
}

Konfiguration

Die Chart.js Bibliothek, die für Output.Rocks Diagramme genutzt wird, bietet umfangreiche Konfigurationsmöglichkeiten zur visuellen Anpassung Ihrer Datenvisualisierungen. Während die grundlegende Struktur mit Typ, Daten und Optionen ausreicht, können fortgeschrittene Anpassungen Ihre Diagramme noch aussagekräftiger gestalten. Der Werkzeuge -> Diagramm-Editor bietet eine einfache Möglichkeit, die Diagramm-Konfiguration über eine Vielzahl von Vorlagen zu ändern und zu testen.

Dynamische Daten

Der große Vorteil von Output.Rocks Diagrammen ist die Möglichkeit, Diagramme vollständig dynamisch mit Ihren Daten zu befüllen. Dafür verwenden Sie Output.Rocks Platzhalter und Expressions direkt in der Chart.js Konfiguration.

{
  "type": "bar",
  "data": {
    "labels": ["<<monatsVerbrauch[0].monat>>",
              "<<monatsVerbrauch[1].monat>>",
              "<<monatsVerbrauch[2].monat>>",
              "<<monatsVerbrauch[3].monat>>"],
    "datasets": [
      {
        "label": "Aktueller Verbrauch",
        "backgroundColor": "rgba(54, 162, 235, 0.5)",
        "borderColor": "rgb(54, 162, 235)",
        "data": [<<monatsVerbrauch[0].wert>>,
                <<monatsVerbrauch[1].wert>>,
                <<monatsVerbrauch[2].wert>>,
                <<monatsVerbrauch[3].wert>>],
        "fill": false
      },
      {
        "label": "Vorjahresverbrauch",
        "backgroundColor": "rgba(153, 102, 255, 0.5)",
        "borderColor": "rgb(153, 102, 255)",
        "data": [<<monatsVerbrauch[0].vorjahr>>,
                <<monatsVerbrauch[1].vorjahr>>,
                <<monatsVerbrauch[2].vorjahr>>,
                <<monatsVerbrauch[3].vorjahr>>],
        "fill": false
      },
      {
        "label": "Differenz zum Vorjahr",
        "backgroundColor": "rgba(255, 99, 132, 0.5)",
        "borderColor": "rgb(255, 99, 132)",
        "data": [<<monatsVerbrauch[0].wert>> - <<monatsVerbrauch[0].vorjahr>>,
                <<monatsVerbrauch[1].wert>> - <<monatsVerbrauch[1].vorjahr>>,
                <<monatsVerbrauch[2].wert>> - <<monatsVerbrauch[2].vorjahr>>,
                <<monatsVerbrauch[3].wert>> - <<monatsVerbrauch[3].vorjahr>>],
        "fill": false
      }
    ]
  },
  "options": {
    "title": {
      "display": true,
      "text": "Verbrauchsvergleich vs. Vorjahr"
    }
  }
}

Erläuterung der dynamischen Komponenten

1. Direkte Verwendung von Payload-Platzhaltern:

   • In numerischen Kontexten können Payload-Platzhalter direkt verwendet werden: <<monatsVerbrauch[0].wert>>
   • Keine zusätzlichen Kennzeichnungen sind nötig
   • Datensets werden als Arrays erwartet, wie in diesem Beispiel: "data": [<<wert1>>, <<wert2>>, <<wert3>>]

2. String-Deklarationen in Labels:

   • Labels werden als Strings (auch im Array) in doppelten Anführungszeichen deklariert: "<<monatsVerbrauch[0].monat>>"
   • Die Platzhalter werden innerhalb dieser Strings positioniert und bei der Verarbeitung durch die tatsächlichen Werte ersetzt

3. Berechnungen bzw. Expressions:

   • Für Berechnungen können die Werte direkt mit Operatoren verbunden werden

• Geschweifte Klammern {...} wie in Vorlagen‑Syntax sind nicht nötig
  • Operationen können aber durch einfache Klammern (...) strukturiert werden
  • Beispiel: (<<wert1>> - <<wert2>>) * 12

Die Nutzung dynamischer Daten in Output.Rocks Diagrammen eröffnet völlig neue Möglichkeiten für Ihre Kundenkommunikation. Statt statischer Diagramme können Sie jetzt individualisierte Visualisierungen erstellen, die genau die relevanten Daten Ihrer Kunden darstellen. Besonders bei wiederkehrenden Berichten wie Verbrauchsabrechnungen, Portfolioanalysen oder Vertragsentwicklungen bieten dynamische Diagramme einen erheblichen Mehrwert.

Fehlerbehandlung

Bei der Arbeit mit dynamischen Diagrammen und Tabellen gibt es einige Tipps zu beachten, um Fehler zu vermeiden:

• In Tabellen sollten Sie für den Fall leerer Datensätze vorsorgen und bedingte Abschnitte verwenden:

<<cs_{monatsVerbrauch == null || monatsVerbrauch.size() == 0}>>
Keine Verbrauchsdaten verfügbar
<<es_>>

• Prüfen Sie die Datentypen (Zahlen vs. Strings) und deren Formatierung (123 vs. "123").

• Testen Sie Ihre Tabellen und Diagramme immer mit realistischen Datenmengen im Editor, um unerwartete Formatierungsprobleme zu vermeiden

• Testen Sie mögliche Edge Cases (leere oder unvollständige Datensätze, sehr große Zahlen)