Die Diagramme-Funktion unterstützt die Visualisierung von Daten durch individuell anpassbare Grafiken, die direkt in Dokumente integriert werden können.

Diagramme werden im App-Backend erstellt und mit einem eindeutigen Identifier versehen. Sie können in Vorlagen verwendet werden, um Daten visuell darzustellen. Diagramme werden mit Chart.js konfiguriert und können dynamische Daten aus dem JSON-Payload verwenden. Weitere Informationen zur Verwendung von Diagrammen in Vorlagen finden Sie in der Datenvisualisierungs-Dokumentation.

Diese Seite zeigt eine Liste aller Elemente, und darüber diverse Aktionen, die du ausführen kannst:

Diagramme, die in gerenderten Dokumenten verwendet werden sollen

Diagramme können über das Backend-Interface oder programmatisch über die API erstellt werden.

Jedes Diagramm benötigt einen eindeutigen Identifier zur Verwendung in Vorlagen. Verwenden Sie aussagekräftige Namen wie invoice_chart_elec oder verbrauch_vergleich.

Diagramme-Liste

Die Übersicht zeigt alle verfügbaren Diagramme mit ihren wichtigsten Eigenschaften:

ID, Identifier, Aktiv ab

ID Identifier Gruppen-Identifier Aktiv ab Wert
1identifier_nameNull22.05.2025Beispielwert für Standardwert

ID

Eindeutige Nummer zur internen Identifikation des Diagramms.

Identifier

Eindeutiger Name des Diagramms für Rendering und API-Aufrufe.

Gruppen-Identifier

Eindeutiger Name für eine optionale Gruppierung von verwandten Diagrammn. Elemente einer Gruppe werden gemeinsam verarbeitet und optionale Validatoren können dabei einzelne Elemente aktivieren oder ignorieren.

Aktiv ab

Startdatum eines Diagramms. Diagramms werden erst ab diesem Datum beim Rendern beachtet.

Wert

Der Dateneintrag des Diagramms. Kann Text, Zahlen, Bedingungen oder andere Daten enthalten, die in Vorlagen verwendet werden.

Höhe und Vorlagen

Höhe Vorlagen
300template_identifier

Höhe

Die Höhe des Diagramms in Pixeln. Diese wird beim Rendern verwendet, um die Größe in der Vorlage zu bestimmen.

Vorlagen

Zeigt an, in welchen Vorlagen diese/s Diagramm verwendet wird. Die Zuordnung erfolgt entweder über die Vorlagen-Konfiguration im Reiter "Diagramme" oder "QR-Codes", oder über den "Vorlagen"-Reiter in der Bearbeitungsansicht des jeweiligen Diagramms.

Aktiv, Erstellt am, Aktualisiert am

Validatoren Pausiert Aktiv Erstellt am Aktualisiert am
NullNOJa22.05.2025 16:3722.05.2025 16:37
missing_streetYESNein21.05.2025 19:0022.05.2025 17:02
Validatoren

Zugewiesene Validierungsregeln für das Diagramm. Prüfen Ihre Bedingungen vor der Verarbeitung und aktivieren/deaktivieren das Rendering entsprechend.

Pausiert

Temporäre Deaktivierung des Diagramms. Pausierte Elemente werden nicht verarbeitet.

Aktiv

Aktivierungsstatus des Diagramms. Nur aktive Elemente werden beim Rendern berücksichtigt.

Erstellt am

Zeitstempel der Diagramm-Erstellung.

Aktualisiert am

Zeitstempel der letzten Änderung. Zeigt wann Diagramm-Konfiguration zuletzt bearbeitet wurde.

Mandant, Standard für Umgebungs-Mandanten

Umgebungs-Mandant Standard für Umgebungs-Mandanten Benutzerdefinierte ID Farbe
(1880) Submarke 1NONull
NullYES<<payload.value>>
Umgebungs-Mandant

Zugeordneter Mandant des/der Diagramm. Ermöglicht Mandanten-spezifische Konfiguration.

Standard für Umgebungs-Mandanten

Kennzeichnet Diagramm als Standard und vererbt (verfügbar) für alle Umgebungs-Mandanten.

Mandanten-Verknüpfungen sorgen dafür, dass ein/e Diagramm nur innerhalb der passenden Submarken (oder ähnliches, wie Tarifwelten) verwendet wird oder an alle Umgebungs-Mandanten vererbt wird.
Diese Felder werden ausschließlich eingeblendet, wenn Sie als Umgebungs-Admin angemeldet sind.
Details zur Anzeige der Mandanten-Spalten finden Sie in der Mandanten-Management-Dokumentation.

Benutzerdefinierte ID

Optionale benutzerdefinierte Kennung nach dem Rendering für externe Systeme. Wird als Referenzen des/der Diagramm bei Callbacks übergeben und beherrscht Vorlagen-Syntax inkl. Zugriff auf Payload-Daten.

Farbe

Visuelle Kennzeichnung für schnelle Identifikation des/der Diagramm. Vor allem nützlich für Dashboard-Statistiken und Charts.

Kontext-Aktionen

Aktions-Dropdown

Diagramm testen
Anzeigen
Ändern
Löschen

Aktions-Dropdown

Klicken Sie auf das Drei-Punkte-Menü am Ende jeder Zeile für Aktionen mit dem jeweiligen Diagramm.

Testen

Öffnet eine Diagramm-Testumgebung zum lokalen Rendern mit bearbeitbaren Validatoren und JSON-Testdaten.

Anzeigen

Öffnet eine reine Detailansicht der kompletten Meta-Informationen und Einstellungen des Diagramm.

Ändern

Öffnet das Bearbeitungsformular für alle Einstellungen und den Upload einer neuen Diagramm-Version.

Löschen

Entfernt das Diagramm dauerhaft aus dem System. Diese Aktion kann nicht rückgängig gemacht werden.

Spalten konfigurieren

Spalten konfigurieren
Spalten-Konfiguration

Passen Sie die Anzeige der Diagramm-Liste für bessere Übersichtlichkeit an. Spalten können per Drag-and-Drop neu angeordnet und über Checkboxen ein-/ausgeblendet werden.

Persönliche Einstellungen

Für mich anwenden : Spalten-Konfiguration wird nur für Ihren Account gespeichert und beeinflusst andere Benutzer nicht.

Instanz-weite Einstellungen

Als Standard anwenden : Konfiguration wird für alle Benutzer der Instanz übernommen und als neue Standard-Ansicht gesetzt.

Diagramm erstellen

Formular-Aktionen

Aktions-Buttons zum Speichern und Verwalten der Diagramm-Konfiguration.

Erstellen und weiteres Element hinzufügen
Erstellen
Der primäre Button speichert die Diagramm-Konfiguration. Der sekundäre Button ermöglicht das Erstellen und direkte Hinzufügen weiterer Elemente.

Verwenden Sie "Erstellen und weiteres Element hinzufügen" für effizientes Batch-Erstellen mehrerer Elemente.

Das Erstellungsformular für Diagramme ist in drei Tabs unterteilt: Details für grundlegende Konfiguration, Konfiguration für die Chart.js-Konfiguration und Diagramm-Parameter, und Vorlagen für die Zuordnung zu Vorlagen.

Identifier

Eindeutige Kennung für dieses/r Diagramm zur programmatischen Verwendung, Einbindung in Vorlagen, Lookups und API-Zugriff.

Identifiers sollten 'snake_case' sein, also klein geschrieben und Unterstriche verwenden, z.B. 'kunde_name' oder 'rechnung_nummer'.

Eindeutige Kennung für programmatische Verwendung und API-Zugriff
Aktiv ab

Startdatum des Diagramms. Diagramme werden erst ab diesem Datum beim Rendern beachtet.

Die Aktiv-Checkbox ermöglicht eine sofortige De-/Aktivierung unabhängig vom Datum.

Vor-Terminierung: Mit diesem Feld können Diagramme vor-terminiert werden. Setzen Sie ein zukünftiges Datum, um das Element automatisch ab diesem Zeitpunkt zu aktivieren.

Mehrere Elemente mit gleichem Identifier: unterschiedliches 'Aktiv ab' staffelt die Version; bei einer Anfrage gilt das aktive Element mit dem spätesten Aktiv ab (nicht Erstell- oder Änderungsdatum).

31/12/2023
Datum, ab dem das Element aktiv wird
AktivUnabhängig vom Datum sofort (de)aktivieren

Mandant & Standard für Umgebungs-Mandanten

Umgebungs-Mandant

Zuordnung zu einem spezifischen Umgebungs-Mandanten oder Standard-Verwendung für alle Mandanten.

None
None
(1880) Test Stadtwerk
Wählen Sie einen Umgebungs-Mandanten aus oder "None" für private Nutzer-Elemente oder Standard-Elemente
Eine detaillierte Einführung in Umgebungs-Mandanten, Vererbung von Standard-Elementen und Mandanten-Konfiguration finden Sie unter Mandanten-Management: Multi-Client Element-System.
Standard für Umgebungs-Mandanten

Markiert Element als Standard-Element, das automatisch an alle Umgebungs-Mandanten vererbt wird.

Aktiviert = Standard-Element wird an alle Umgebungs-Mandanten vererbt und ist für diese sichtbar

Fehlermeldung: Die Kombination "Standard für Umgebungs-Mandanten" + ausgewählter "Umgebungs-Mandant" erzeugt die Fehlermeldung: Tenant defaults can not be set on tenant assigned entities. Ein Element kann entweder für einen spezifischen Mandant ODER als Standard für alle Umgebungs-Mandanten konfiguriert werden.

Eine detaillierte Einführung in Standard-Elemente, Element-Vererbung und die Mandanten-Hierarchie finden Sie unter Mandanten-Management: Multi-Client Element-System.

Diagramme-Integration und Workflow

Diagramme werden in Output.Rocks in verschiedenen Bereichen verwendet und mit anderen Funktionen kombiniert. Die korrekte Integration ist entscheidend für einen effizienten Dokumentenerstellungs‑Workflow.

Verwandte Backend-Bereiche

Diagramm-Funktionen

Use Cases