Chart-Editor

Ein Chart ist eine einzelne tabellarische oder grafische Ergebnis-Darstellung in Form eines Diagramms, einer Tabelle oder einer HTML-Ausgabe. Die Erstellung erfolgt auf Grundlage von vorkonfigurierten Datensätzen (siehe Datensatz-Editor).

Folgende Chart-Typen können erzeugt werden:

Benutzeroberfläche

Benutzeroberfläche im Chart-Editor

  1. Auflistung der einzelnen Charts

  2. Konfiguration der Charts

  3. Vorschau eines Charts

Im ersten Bereich, der Charts-Übersicht, können neue Charts hinzugefügt, bearbeitet, dupliziert sowie gelöscht werden (siehe Buttons und Icons).
Im zweiten Bereich wird ein Chart-Typ ausgewählt und auf Grundlage eines passenden Datensatzes grafisch angepasst. Die Einstellungen des Charts können im dritten Bereich, der Vorschau, direkt visualisiert und kontrolliert werden.

Bereiche anpassen

Die einzelnen Bereiche können in der Breite angepasst bzw. komplett eingeklappt werden, um z.B. verdeckte Informationen sichtbar zu machen.

Bereiche ein- oder ausklappen:

Bereiche ein- und ausklappen

Bereiche in der Breite anpassen:

Bereiche verkleinern und vergrößern

Live Update

Live Update
Wozu dient die Funktion "Live Update"?

Die Aktivierung des Live Updates sorgt dafür, dass Änderungen im Chart direkt im Vorschaubereich sichtbar werden.

Wann sollte das Live Update deaktiviert werden?

Falls umfassende Charts mit vielen Datenpunkten dargestellt werden sollen, beansprucht das Rendern und visualisieren der Charts mehr Kapazitäten. Abhängig von Ihren individuellen Ressourcen kann dabei die Performance der Anwendung beeinträchtigt werden.
Falls Sie also Einschränkungen während der Konfiguration oder einen langsamen Bildaufbau im Vorschaubereich bemerken oder erwarten, deaktivieren Sie das Live Update.

Buttons und Icons

Button/Icon Beschreibung

Hinzufügen

Erstellt ein neues Element.

Kopiert den ausgewählten Chart inklusive aller Konfigurationen und fügt die Kopie ans Ende der Liste bzw. ans Ende der Gruppe an.

Entfernt das ausgewählte Element.

Öffnet die Gruppe und zeigt alle diesem Chart-Typ zugeordneten Einträge an.

Schließt die Gruppe und minimiert alle diesem Chart-Typ zugeordneten Einträge.

Öffnet ein Fenster, in dem erweiterte Einstellungen zum Aussehen des Charts vorgenommen werden können.
Außerdem können diese Einstellungen im JSON-Format eingesehen und bearbeitet werden.

Öffnet den gewählten Datensatz im Datensatz-Editor.

Aktualisiert die Chart-Ansicht im Vorschaubereich (wird vorrangig verwendet, falls das Live Update deaktiviert ist)

Ausführen

Erzeugt auf Grundlage der eingetragenen Daten und Parameter einen Chart.

Speichern

Speichert Eintragungen und Einstellungen.
Bei nicht gespeicherten Änderungen erscheint ein Hinweis.

Report-Editor

Öffnet einen Auswahl-Button "Neu hinzufügen". Beim Klick darauf wird der aktuelle Chart in der Liste der Reports eingefügt.

Neuen Chart erstellen

Beim Hinzufügen eines neuen Charts ist der vorausgewählte Chart-Typ der XY-Chart.

Sofern das Live Update ausgeschaltet ist, muss der Aktualisieren-Button geklickt werden, um Änderungen im Diagramm zu sehen.
Zum Aktivieren siehe Live Update.

  1. Im Analysis-Modul den Chart-Editor auswählen.

  2. Neuen Chart hinzufügen.

  3. Namen eingeben.

  4. Chart-Typ auswählen.

  5. Datensatz auswählen.

    Chart hinzufügen

  6. Daten-Selektor und ggf. Konfigurator je nach Chart-Typ anpassen.

Ein Chart ist erstellt und kann nun weiter konfiguriert werden.

Allgemeine Einstellungen

Für alle Chart-Typen sind die allgemeinen Einstellungen gleich:

Allgemeine Einstellungen

  1. Benennung des Charts, die auch im Report-Editor und im Widget sichtbar ist

  2. Auswahl eines im Datensatz-Editor angelegten Datensatzes, auf den der Chart zugreifen kann

  3. Auswahl des Chart-Typs

  4. Vorkonfiguration abhängig vom gewählten Chart-Typ

  5. Fortgeschrittene Einstellungen

Fortgeschrittene Einstellungen

Die fortgeschrittenen Einstellungen sind bei allen Chart-Typen gleich, jedoch eignen sich einige der Optionen nur für bestimmte Charts.

Bevor Sie fortgeschrittene Einstellungen vornehmen können, sollten Sie mindestens im Daten-Selektor Werte hinzufügen. Andernfalls ist keine Chart-Vorschau möglich.
Fortgeschrittene Einstellungen

  1. Titel, der in der Chart-Abbildung zu sehen ist (falls die Anzeige aktiviert ist)

  2. Hintergrundfarbe des Charts

  3. Blendet in der Chart-Abbildung eine Legende ein

  4. Übersichtsdarstellung oberhalb des Charts, in der der Wertebereich der X-Achse eingeschränkt kann

  5. Blendet in der Chart-Abbildung einen Cursor sowie vertikale und horizontale Linien zum einfachen Ablesen des aktuellen Wertes ein

  6. Animation

  7. Übersichtsdarstellung neben dem Chart, in der der Wertebereich der Y-Achse eingeschränkt werden kann

  8. Datumsformat der Daten, die auf einer Zeitachse dargestellt werden sollen

  9. Vorschau der Chart-Abbildung

  10. JSON-Struktur der Chart-Konfiguration
    Die Attribut-Konfiguration entspricht der AmCharts4-Konfiguration, siehe AmCharts4-Dokumentation.

Die Attribut-ID eines Charts (siehe JSON-Struktur in den fortgeschrittenen Einstellungen muss über alle Komponenten hinweg eindeutig sein.)

Tacho-Diagramme (Gauge Charts)

Das Tacho-Diagramm besteht aus einem Kreis und einem Zeiger, der auf einen Wert auf dem Kreis zeigt. Dieser Chart erwartet einen Datensatz, der genau ein Datenobjekt mit einem number-Attribut enthält. Nur so kann der Zeiger auch auf einen spezifischen Wert zeigen.

Daten-Selektor - Zeiger anpassen

Im Bereich "Daten-Selektor" wird der Zeiger des Diagramms eingestellt. Dabei ist das Aussehen des Zeigers konfigurierbar und welcher Wert als Grundlage für den Zeiger dienen soll.

Beispieldaten für Zeigerdiagramm
{
  "value1":  50,
  "value2" : 40
}
Wert für den Zeiger hinzufügen

  1. Auf den Hinzufügen-Button klicken.
    Ein neuer Eintrag wird hinzugefügt.

  2. In das Attribut-Feld klicken.

  3. Falls im Datensatz mehrere Attribute vorhanden sind, ein Attribut aus der Drop-Down-Liste auswählen.

    Attribut-Auswahl

Grundsätzlich sind auch mehrere Attribute und damit mehrere Zeiger möglich.

Zeiger anpassen

  1. Attribut, das aus dem Datensatz ausgewählt wird.
    Ins Feld klicken und aus der Drop-Down-Liste den gewünschten Wert auswählen.

  2. Füllfarbe des Zeigers.
    Ins Feld doppelklicken und über das Farbauswahlfenster eine Farbe auswählen.

  3. Randfarbe des Zeigers.
    Ins Feld doppelklicken und über das Farbauswahlfenster eine Farbe auswählen.

  4. Innenradius in %.
    Der Innenradius bestimmt den Abstand der Zeigerbasis zum Mittelpunkt des Kreises.

  5. Außenradius in %.
    Der Außenradius bestimmt den Abstand der Zeigerspitze zum Mittelpunkt des Kreises.

  6. Breite der Zeigerbasis in Pixel.

  7. Löscht das ausgewählte Attribut.

  8. Fügt ein neues Attribut hinzu.

Achseneinstellungen - Kreis anpassen

Durch die Achseneinstellungen kann das Aussehen des (Halb-)Kreises angepasst werden.

Achsen-Einstellungen

  1. Der Anfangswert des Wertebereiches.
    Es wird keine Einheit angegeben.

  2. Der Endwert des Wertebereiches.
    Es wird keine Einheit angegeben.
    Die Abstände zwischen Anfangs- und Endwert werden automatisch an den gewählten Wertebereich angepasst.

  3. Der Anfangswinkel bestimmt, an welcher Stelle eines Kreises der Anfangswert steht.

  4. Der Endwinkel bestimmt, an welcher Stelle des Kreises der Endwert steht.

  5. Der Innenradius regelt die Breite der farbigen Achsenbereiche. Als Achsenbereiche können bestimmte Wertebereiche festgelegt werden, die z.B. als kritisch gelten.

HTML-Diagramme (Template Charts)

Das Template-Diagramm bietet einen großen Gestaltungsfreiraum. Hier können Sie Daten individuell aufbereiten und darstellen, indem sie in HTML-Inhalte eingebettet werden. So können Sie Werte aus dem Datensatz z.B. in Texte einbinden.

Beispiel-Template
Beispiel Daten für Template-Chart
{
  "name":  "John",
  "birthday" : "12.03.1982",
  "address" : "Mainstreet 5"
}

Template-Konfigurator

In dem Template-Konfigurator werden die HTML-Inhalte hinterlegt. Der Zugriff auf die Daten erfolgt über Attribute in geschweiften Klammern. Der Inhalt wird als Ext.XTemplate interpretiert, wobei die Daten bereits automatisch an das Datenobjekt aus dem ausgewählten Datensatz gebunden sind.

Beispiel Template
<h1>Hello {name}</h1>

Alle Konstrukte wie Iterationen und If-Else Bedingungen aus dem Ext.XTemplate sind verfügbar.

Tortendiagramme (Pie Charts)

Das Tortendiagramm eignet sich für die Darstellung von Anteilen und (z.B. prozentualen) Verteilungen.

Beispiel Daten für ein Tortendiagramm
[
    {
        "module": "Analysis",
        "usage_time": 5898712
    },
    {
        "module": "Core",
        "usage_time": 8011348
    },
    {
        "module": "Dashboard",
        "usage_time": 1909192
    }
]

Daten-Selektor - Tortenstücke anpassen

Nachdem Sie einen zuvor im Datensatz-Editor konfigurierten Datensatz ausgewählt haben, können im Daten-Selektor die Attribute aus den Daten gewählt werden.

Auswahl des Datensatzes
pie chart attributes

Es bietet sich an, als "Kategorie" das Attribut des alphanumerischen Wertes im Datensatz zu wählen (im Beispiel "module") und als "Y-Wert" das Attribut des numerischen Wertes (im Beispiel "usage_time")

Pie-Konfigurator - Design gestalten

pie chart configurator

Im Pie-Konfigurator gibt es folgende Einstellungsmöglichkeiten:

Label Beschreibung Beispielwert

Skalieren

Nummerischer Wert, um die Gesamtgröße des Torten-Diagrams zu beeinflussen

1,5

Innerer Radius

Nummerischer Wert, um die Größe des inneren Radius zu beeinflussen

20

Äußerer Radius

Nummerischer Wert, um die Größe des äußeren Radius zu beeinflussen

120

Start-Winkel

Nummerischer Wert, um den Winkel an dem das Torten-Diagramm beginnt

-180

End-Winkel

Nummerischer Wert um den Winkel an dem das Torten-Diagramm beginnt

180

3D aktivieren

Darstellung als 3 dimensionales Torten-Diagramm

-

Tiefe

Tiefe des 3 dimensionalen Torten-Diagrams (nur für 3D)

45

Werte für Tiefendarstellung benutzen.

Y-Wert abhängige Tiefe des 3 dimensionalen Torten-Diagrams im (nur für 3D)

3D-Winkel

Betrachtungswinkel des Torten-Diagrams (nur für 3D)

Labels anzeigen

Beschriftungen (Kategorie und Prozentsatz) am Diagram anzeigen

Schriftgröße

nummerischer Wert für die Schriftgröße der Labels (nur für Labels)

Legende anzeigen

Legende (Farbe, Kategorie und Prozentsatz) am unteren Diagrammrand anzeigen

Linien- und Balkendiagramme (XY Charts)

XY-Diagramme umfassen alle Diagrammtypen, die auf zwei Achsen dargestellt werden können. Dazu zählen hier Linien-, 2D-Balken- und 3D-Balken-Diagramme.

Daten-Selektor - Datenreihen hinzufügen

Beispiel Daten für XY-Diagramm
[
    {
        "timestamp": "2022-06-20T04:00:00.000Z",
        "total_sessions": 2
    },
    {
        "timestamp": "2022-06-20T05:00:00.000Z",
        "total_sessions": 6
    },
    {
        "timestamp": "2022-06-20T06:00:00.000Z",
        "total_sessions": 12
    }

]
xy chart series configurator

  1. Durch das Klicken auf den Hinzufügen-Button wird eine Datenreihe hinzugefügt.

  2. Typ-Auswahl

    • LineSeries: Datenreihe als Linie oder Fläche darstellen

    • ColumnSeries: Datenreihe als Balken darstellen

    • ColumnSeries3D: Datenreihe als dreidimensionale Balken darstellen

    • ConeSeries: Datenreihe als dreidimensionale Kegel darstellen

  3. Auswahl des Datenattributes auf der X-Achse

  4. Auswahl des Datenattributes auf der Y-Achse

Im XY-Achsen-Konfigurator ist der X-Achsentyp auf "Datum" gesetzt. Der Datumswert in dem Beispieldatensatz befindet sich hinter dem Attribut "timestamp".
Im XY-Achsen-Konfigurator ist der Y-Achsentyp auf "Numerisch" gesetzt. Der nummerische Wert in dem Beispieldatensatz befindet sich hinter dem Attribut "total_sessions".
Somit wird die X-Achse des Diagrams zu einer Zeitachse und die Y-Achse zu einer Werteachse.

XY-Achsen-Konfigurator

xy axes configurator

Sie können jeweils für die X- als auch für die Y-Achse den Achsen-Typ festlegen. Zur Auswahl stehen die Werte Text, Numerisch und Datum.

Tabellen (Table Charts)

In einer Tabelle können Werte aus den vorkonfigurierten Datensätzen übersichtlich zugeordnet werden. Die Tabelle kann beliebig viele Spalten beinhalten. Die Anzahl der Zeilen wird durch den Datensatz festgelegt.

Das Layout der Tabelle wird über JSON-Parameter konfiguriert.

Daten-Selektor - Tabellenspalten hinzufügen

Beispiel Daten für Tabellendiagramm
[
    {
        "Vorname": "Max",
        "Nachname": "Mustermann"
    },

    {
        "Vorname": "Franz",
        "Nachname": "Müller"
    }
]
table data selector

  1. Hinzufügen einer Spalte.

  2. Drag-and-drop Handle: Verändern der Spaltenreihenfolge

  3. Überschrift: gewünschter Text als Überschrift im Spaltenkopf

  4. Daten-Attribut: Auswahlfeld mit Attributen aus Datensatz

  5. Layout-Parameter: JSON Feld mit zusätzlichem Style Parameter

    1. flex: Steuerung der Breite der Spalte

    2. style: CSS-Attribute die der Spalte mitgegeben werden können.

Diagramm Export

Für die Diagramme Tacho-Diagramme (Gauge Charts), Tortendiagramme (Pie Charts) und Linien- und Balkendiagramme (XY Charts) gibt es die Möglichkeit für den Benutzer einen Export zu aktivieren.

export configuration
Abbildung 1. Export Konfiguration

Ist diese Option aktiviert, so wird in den Diagrammen in der rechten oberen Ecke ein Menü angeboten. Über dieses Menü lässt sich das Diagramm in verschiedenen Dateiformaten exportieren.

export menu
Abbildung 2. Export Menü am Diagramm
Keywords:
Press Esc to exit full screen
Modal image placeholder
Press Esc to exit full screen