Testing und Werkzeuge
Diagramm-Editor
Diagramme testen, laden und speichern – Chart.js-Konfiguration, Vorschau und DOCX-Vorlagen-Zuordnung
Der Diagramm-Editor ist ein Werkzeug, um Chart.js-Diagramme mit echten Payload-Daten zu rendern und gespeicherte Diagramme anzupassen. Damit visualisieren Sie z. B. Verbrauchsverläufe oder Vergleichswerte in Kundenabrechnungen. Im Editor prüfen Sie Konfiguration, Abmessungen und Testdaten in der Live-Vorschau. Gespeichert werden Chart.js-Konfiguration (jsConfiguration), technische Felder und DOCX-Zuordnungen – nicht die Test-JSON-Payload.
Beachten Sie auch die Einführung zu Diagramm-Erstellungen und deren Zuordnung zu Vorlagen.
Gespeicherte Diagramme liegen unter Vorlagen-Management → Diagramme. Beim Testen wird dieser Editor geöffnet. Aus ihm können aber auch ganz neue Diagramme angelegt werden.
Über den Dropdown können Sie ein bestehendes Diagramm öffnen (oder per URL laden ?id=), Änderungen nach erfolgreichem Rendern mit Änderungen am Diagramm übernehmen zu persistieren, oder ein neues Diagramm anlegen (inklusive Zuordnung zu DOCX-Vorlagen).
Diese Seite zeigt eine Liste aller Elemente, und darüber diverse Aktionen, die du ausführen kannst:
Diagramm im Editor laden, anlegen und speichern
In Bearbeitung: #id beispiel_identifier
In Bearbeitung
Zeigt das geladene Diagramm (numerische id in der URL und technischer Identifier), solange Sie einen bestehenden Datensatz bearbeiten.
Erzeugt die Live-Vorschau (PNG) mit aktueller Chart.js-Konfiguration, Abmessungen, Version und Payload JSON-Daten.
Speichert Änderungen am geladenen Diagramm, sofern der Datensatz schreibbar ist; inklusive Chart.js-Konfiguration, technischer Felder und DOCX-Vorlagen-Zuordnung.
Wechselt in den Anlege-Flow (?create=1) um Identifier, Marke, tec. festzulegen – sichtbar nur nach einem erfolgreichem Render (nicht sichtbar, falls noch nicht erfolgreich gerendert).
Diagramm öffnen…
Dropdown mit allen gespeicherten Diagrammen; die Auswahl lädt den gewählten Datensatz per neuer ?id=-URL. Der aktuelle Eintrag ist markiert.
Bestehendes Diagramm bearbeiten
Wenn Sie mit Diagramm öffnen… ein Element auswählen oder in der Diagramm-Liste Testen wählen, öffnet der Editor mit einer numerischen ID in der Adresszeile (ältere Links mit chartId= werden auf ?id= umgeleitet). Es werden die gespeicherten Felder geladen (u. a. Chart.js-Konfiguration, Breite, Höhe, Hintergrundfarbe, Chart.js-Version, verknüpfte DOCX-Vorlagen). Jetzt können Sie das Diagramm testen.
Der Bereich Payload JSON-Daten startet dabei leer und muss befüllt werden: Testpayloads liegen nicht in der Diagramm-Entität und müssen bei Bedarf manuell oder über Testdaten laden ergänzt werden.
Nach Diagramm rendern und erfolgreicher Vorschau können Sie mit Änderungen am Diagramm übernehmen die Änderungen persistieren – sofern das Diagramm nicht schreibgeschützt ist, z. B. weil es von der übergeordneten Umgebung geerbt wird.
Neues Diagramm anlegen
Direkt über den Hauptnavigations-Link oder über Neues Diagramm anlegen in der Diagramm-Verwaltung gelangen Sie in den Editor mit ?create=1 und Grundeinstellungen für das Speichern im System.
Oben im Formular erfassen Sie Identifier, Marke, Aktiv ab und Optionen wie Aktiv / Standard für Umgebungs-Mandanten; darunter konfigurieren Sie Chart.js, Abmessungen und Payload JSON-Daten und ordnen DOCX-Vorlagen zu.
Neues Diagramm anlegen in der Toolbar erscheint erst nach erfolgreichem Diagramm rendern, solange sich Konfiguration und Vorschau nicht unterscheiden.
Diagramm-Konfiguration
Wird ein neues Diagramm angelegt (?create=1), erscheint der Anlegeflow mit Stammdatenfeldern oberhalb der Chart.js-Konfiguration:
Eindeutige Kennung für programmatische Verwendung, Vorlagen-Zuordnung und API-Zugriff (snake_case, z. B. lastgang_monat).
beispiel_identifier
Corporate-Identity-Zuordnung des Diagramms; bei ?create=1 kann die Marke aus dem Listenfilter vorausgewählt sein.
default
Startdatum des Diagramms; erst ab diesem Datum wird es beim Rendern berücksichtigt (Vor-Terminierung möglich).
01.01.2026
Aktiv
Sofortige De-/Aktivierung unabhängig vom Datum Aktiv ab.
Standard für Umgebungs-Mandanten
Legt das Diagramm als Standard für alle Umgebungs-Mandanten der Umgebung fest (geerbte Defaults für Sub-Mandanten).
Chart.js-Konfiguration
Die linke Spalte enthält den Code-Editor für die Chart.js-Konfiguration. Daneben steht optional KI-Assistent (Drawer) zum Entwerfen und Validieren von Konfigurationsänderungen.
{
"type": "bar",
"data": {
"labels": ["Jan", "Feb", "Mrz"],
"datasets": [
{
"label": "Lastgang",
"backgroundColor": "rgba(54,162,235,0.5)",
"data": [73, 61, 48]
}
]
},
"options": {
"plugins": {
"datalabels": {
"anchor": "end",
"align": "top"
}
}
}
}Der Editor akzeptiert komplette Chart.js-Konfigurationen (Version 2.x oder 4.x), inklusive Plug-ins wie datalabels, annotation oder roundedBars. Platzhalter <<payload.*>> werden beim Rendern aufgelöst.
Beispiele und Best Practices finden Sie unter Chart.js-Konfigurationsübersicht. Ausdrücke und Syntax: Output.Rocks-Syntax.
Dimensionen und technische Felder
Mit den folgenden Feldern steuern Sie die Darstellung im Dokument sowie die Ausführungsumgebung beim Render-Lauf.
Breite des Diagramms in Pixeln. Sollte der Platzhalterbreite in Vorlagen entsprechen.
Höhe des Diagramms in Pixeln. Sollte der Platzhalterhöhe in Vorlagen entsprechen.
Halten Sie Breite/Höhe synchron zu den Platzhaltern der jeweiligen Vorlage. Nur so bleiben Dimensionen der Elemente und Beschriftungen pixelgenau.
Legt den Hintergrund des gerenderten Diagramms fest (CSS-konforme Werte oder transparent).
Version der Chart.js-Library, mit der dieses Diagramm gerendert wird (wird in der Diagramm-Entität gespeichert).
Zuordnung zu einem spezifischen Umgebungs-Mandanten oder Standard-Verwendung für alle Mandanten.
JSON & Testdaten
Für realistische Previews benötigen Sie Payloads aus dem Kundenkontext (z. B. Zeitreihen oder Kennzahlen). Laden Sie gespeicherte Datensätze über Testdaten laden oder pflegen Sie die JSON-Struktur manuell im Feld Payload JSON-Daten.
[
{
"key": "value",
"items": [1, 2, 3]
},
{
"nested": {
"property": "value"
}
}
]Verwenden Sie den "Testdaten laden" Button, um schnell gespeicherte Testdaten aus dem Testdaten-Bereich zu laden.
Der Inhalt des JSON-Editors wird nicht als Teil der Diagramm-Definition in der Datenbank gespeichert. Nach einem Seiten-Reload, nach dem Wechsel auf ein anderes gespeichertes Diagramm oder wenn Sie die Seite ohne ?id= neu öffnen, ist der Bereich wieder leer — ergänzen Sie Testdaten bei Bedarf erneut oder über Testdaten laden.
DOCX-Vorlagen zuweisen
Als letztes folgt in der linken Spalte die Vorlagen-Zuordnung — die Auswahl der DOCX-Vorlagen, in denen das Diagramm verwendet werden soll. Die Zuordnung wird mit Änderungen am Diagramm übernehmen bzw. nach Erstellen im Anlege-Modus (nach erfolgreichem Render) gespeichert.
| ID | Identifier | Gruppen-Identifier | Aktiv | Aktiv ab | |
|---|---|---|---|---|---|
| 5929 | template_identifier | group_identifier | YES | 05.08.2023 | |
| 5930 | another_template | Null | YES | 05.08.2023 |
Vorlagenbibliothek
Die rechte schmale Spalte (neben der Render-Vorschau) listet gruppierte Chart.js-Beispielkonfigurationen aus der Backend-Vorlagenbibliothek. Kategorien lassen sich auf- und zuklappen; unter jeder Vorlage erscheint ein Vorschaubild. Ein Klick auf eine Vorlage lädt deren Beispiel in den Editor — ohne das Diagramm in der Datenbank zu speichern. Die Vorschau wird geleert; rendern Sie danach erneut.
ACHTUNG - Überschrieben werden:
- Chart.js-Konfiguration — der gesamte Inhalt des Konfigurations-Editors wird durch die
configder Vorlage ersetzt (keine Zusammenführung mit Ihrem bisherigen Text). - Dimensionen und Render-Metadaten — Breite, Höhe, Hintergrundfarbe und Chart.js-Version aus der Vorlage (viele Beispiele nutzen Chart.js
2.9.4).
Unverändert bleiben:
- Payload JSON-Daten (Test-JSON)
- Stammdaten im Anlege-Modus (Identifier, Marke, …)
- DOCX-Vorlagen-Zuordnung
Vorlagen
Wählen Sie eine Vorlage zum Bearbeiten
Kategorien & Vorschaubilder
Jede Zeile ist eine aufklappbare Kategorie. Darin erscheinen klickbare Vorlagen mit Titel und JPEG-Vorschau. Der Klick ersetzt Konfiguration und technische Felder wie oben beschrieben — speichern Sie ggf. manuell eine Kopie Ihrer Chart.js-Konfiguration, bevor Sie in eine Vorlage wechseln!
Render-Vorschau und Fehlermeldungen
Hier erscheint das gerenderte Diagramm (PNG).
Preview wird nach dem Rendern angezeigt
Validierungs- oder Renderfehler erscheinen in der App oberhalb oder im Vorschau-Bereich. Fehlerhafte Formularfelder werden links hervorgehoben. — Prüfen Sie die Meldungen und rendern Sie erneut.
Verwandte Bereiche
- Diagramme verwalten: Backend-Liste mit Zuordnung zu Templates und Komponenten
- Datenvisualisierung: Szenarien und Chart.js-Konfiguration in Vorlagen
- Output.Rocks-Syntax: Platzhalter in Chart.js-Konfigurationen