In diesem Artikel zeige ich Ihnen, wie Sie Daten in Ihrer Anwendung mit dem Simplifier Charts Widget visualisieren können.

Voraussetzungen

Für dieses Tutorial sollten Sie bereits wissen, wie Sie Anwendungen erstellen, Widget-Eigenschaften im UI-Designer festlegen, Daten aus Business Objekten Widgets im Prozess-Designer zuordnen, Business Objekte erstellen und Datentypen erstellen.
Wenn Ihnen das überhaupt nicht bekannt vorkommt: Erfahren Sie, wie Sie eine Anwendung erstellen und lesen Sie die grundlegenden Konzepte (UI Designer, Process Designer, Business Objects, Data Types).

Das Diagramm-Widget – Datenstruktur

Das Diagramm-Widget besteht im Wesentlichen aus Beschriftungen und Datensätzen.

Beschriftungen sind die Beschreibung der angezeigten Daten, während Datensätze die angezeigten Datenpunkte enthalten.

Dies ist an einem Beispiel leichter zu verstehen:

Das obige Balkendiagramm zeigt, sagen wir, wie viele Schokoriegel von vier Personen (Clara, Jeff, Anna, Bill) pro Monat (Januar, Februar, März) gegessen wurden.

Die Beschriftungen hier sind “Januar”, “Februar” und “März” auf der x-Achse.

Bei den Datensätzen handelt es sich um die Personen “Clara”, “Jeff”, “Anna” und “Bill”, die durch ihre jeweilige Farbe gekennzeichnet sind.

Die DataPoints eines DataSets sind die konkreten Werte, die im Diagramm angezeigt werden, z.B. für den Datensatz ‘Bill’ sind die DataPoints 1 (im Januar), 5 (im Februar) und 15 (im März).

Diagramm-Widgets in Simplifier

Im UI-Designer können Sie drei Optionen verwenden, um Ihrer Anwendung ein Diagramm-Widget hinzuzufügen:

1. Verwenden Sie das grundlegende Diagramm-Widget
2. Verwenden einer Diagramm-Widget-Gruppe
3. Verwenden der ChartDashboard-Vorlage

1. Verwenden Sie das grundlegende Diagramm-Widget

Um das grundlegende Diagramm-Widget zu verwenden, gehen Sie zum UI-Designer, wählen Sie die Registerkarte “Widgets” aus und suchen Sie nach “Diagramm”.
Wir werden dieses grundlegende Diagramm-Widget in den in diesem Artikel beschriebenen Anwendungsfällen 1 und 2 verwenden, um statische und dynamische Daten in unserer Anwendung anzuzeigen.

2. Verwenden Sie eine Diagramm-Widget-Gruppe

Anstatt ein einfaches Diagramm-Widget zu verwenden und die Beschriftungen/Datensätze manuell hinzuzufügen, können Sie auch eine Diagramm-Widget-Gruppe verwenden, in der die Beschriftungen und Datensätze bereits vorausgefüllt sind.
Wählen Sie im UI-Designer die Registerkarte “Widget-Gruppe” aus und suchen Sie nach “Diagramm”.
Sie können Widget-Gruppen für verschiedene Diagrammtypen finden.
Wählen Sie den gewünschten Typ aus und passen Sie die vorausgefüllten Daten an Ihren Anwendungsfall an.

3. Verwenden Sie die ChartDashboard-Vorlage

Wenn Sie mehrere Diagramme auf einem Bildschirm anzeigen möchten, sollten Sie die ChartDashboard-Vorlage verwenden.
Diese UI-Vorlage enthält ein Rasterlayout mit mehreren Bereichen, wobei jeder Bereich ein Diagramm-Widget mit vorausgefüllten Daten enthält.
Wählen Sie im UI-Designer die Registerkarte “Widget-Gruppe” aus und suchen Sie nach “Diagramm”.
Fügen Sie das Template ‘ChartDashboard’ zu Ihrem Bildschirm hinzu und passen Sie die vorausgefüllten Diagramme und deren Daten an Ihren Anwendungsfall an.

Anwendungsfall 1 – Das Diagramm-Widget im UI Designer mit statischen Daten

In diesem Schritt erstellen wir das obige Balkendiagramm mit statischen Daten vollständig im UI Designer.

Hinzufügen des Diagramm-Widgets

• Erstellen einer Anwendung oder Öffnen einer vorhandenen Anwendung
• Wählen Sie den Bildschirm aus, auf dem Sie Ihr Diagramm anzeigen möchten
• Hinzufügen eines Rasterlayouts zum Bildschirm (ui_layout_Grid)
• Hinzufügen des Diagramm-Widgets zum Rasterlayout (Diagramm)
• Legen Sie im Diagramm-Widget die Eigenschaft “chartType” auf “bar” fest.

Fügen Sie die Beschriftungen hinzu

• Fügen Sie dem Diagramm ein ChartLabel-Widget hinzu.
  Wählen Sie im Dialog ‘Labels’ als Aggregation aus
• Ändern Sie die Eigenschaft ‘label’ des Labels in ‘January’
• Fügen Sie zwei weitere ChartLabels mit dem Text “Februar” und “März” hinzu

Fügen Sie die Datensätze hinzu

• Fügen Sie dem Diagramm ein ChartDataset hinzu.
  Wählen Sie im Dialog “Datensätze” als Aggregation aus
• Ändern Sie die Eigenschaft ‘label’ in ‘Clara’
• Mit den Eigenschaften ‘backgroundColor’ und ‘borderColor’ können Sie das Aussehen des Datensatzes ändern
• Fügen Sie dem Diagramm drei weitere Datensätze mit jeweils einer anderen Farbe hinzu, und legen Sie die Beschriftungen auf “Jeff”, “Anna” und “Bill” fest.

Hinzufügen der DataPoints

• Fügen Sie dem Datensatz für ‘clara’ einen DataPoint hinzu.
  Wählen Sie im Dialog “Daten” als Aggregation aus
• Ändern Sie die Eigenschaft ‘value’ auf 1
• Fügen Sie dem Dataset für ‘Clara’ zwei weitere DataPoints hinzu, die jeweils einen anderen Wert haben.
  Fügen Sie außerdem drei DataPoints zu den Datasets für ‘Jeff’, ‘Anna’ und ‘Bill’ hinzu und ändern Sie die Werte.

Bereitstellen der App

Klicken Sie nun auf “Bereitstellen”, öffnen Sie Ihre Anwendung und navigieren Sie zum Bildschirm mit dem Balkendiagramm.
Das wars!
Im nächsten Schritt erfahren Sie, wie Sie ein Diagramm mit dynamischen Daten erstellen.

Anwendungsfall 2 – Arbeiten mit dynamischen Daten

In den meisten Anwendungsfällen möchten Sie ein Diagramm haben, in dem Daten angezeigt werden, die aus dem Backend geladen wurden.
Dazu müssen wir Vorlagen in unserem Diagramm-Widget verwenden und unsere Daten an das Diagramm binden.

Erstellen eines Business Objekts für die Backend-Daten

Das Drehbuch

Für dieses Beispiel habe ich eine serverseitige Business Objekt-Funktion “getChartsData” erstellt, die die Daten zurückgibt, die wir im Diagramm anzeigen möchten.
Es ähnelt den Diagrammdaten, die wir oben gesehen haben.
Beachten Sie, wie die Daten in Beschriftungen und Datasets strukturiert sind und die Datasets Arrays von DataPoints enthalten.

Die Ausgabeparameter

Ihre Business Objekt-Funktion benötigt zwei Ausgabeparameter: ‘labels’ und ‘datasets’.
Legen Sie für beide den Datentyp auf “Any” fest.

Nun wollen wir für diese Parameter spezifische Datentypen generieren, um sie im Process Designer abzubilden.
Klicken Sie dazu auf “Speichern & Testen”.
Klicken Sie im Dialog zuerst auf “Test” und dann auf “Datentyp generieren”.
Auf diese Weise erstellt Simplifier automatisch Datentypen für die JSON-Daten, die im Ergebnisfenster angezeigt werden.

Schließen Sie den Testdialog und setzen Sie den Datentyp Ihrer Ausgabeparameter auf die neu erstellten Datentypen (in meinem Fall: ‘getChartsData_labels_Col’ für die Labels und ‘getChartsData_datasets_Col’ für die Datensätze).

Erstellen eines Vorlagendiagramm-Widgets im UI-Designer

Für die dynamische Datenbindung müssen wir ein Diagramm-Widget erstellen, das Vorlagen anstelle von statischen Daten verwendet.
Wir können die Label-Daten direkt im Process Designer binden.
Da die Dataset-Struktur jedoch verschachtelt ist (ein Dataset enthält einen oder mehrere DataPoints), können wir diese nicht im Process Designer abbilden.
Wir müssen also die Datensätze in einer globalen Variablen speichern und die Pfade zu dieser Variablen im UI-Designer verwenden, um ein Mapping zu generieren.
Folgendes müssen Sie tun:

Hinzufügen des Diagramm-Widgets

• Erstellen einer Anwendung oder Öffnen einer vorhandenen Anwendung
• Wählen Sie den Bildschirm aus, auf dem Sie Ihr Diagramm anzeigen möchten
• Hinzufügen eines Rasterlayouts zum Bildschirm (ui_layout_Grid)
• Hinzufügen des Diagramm-Widgets zum Rasterlayout (Diagramm)
• Legen Sie im Diagramm-Widget die Eigenschaft “chartType” auf “bar” fest.
• Setzen Sie die Schalter für die Eigenschaften ‘labelsTemplate’ und ‘datasetsTemplate’ auf ‘true’
• Setzen Sie die Eigenschaft ‘datasetsPath’ auf die globale Variable, in der wir die von unserem Business Objekt abgerufenen Datensätze speichern (in meinem Fall heißt die globale Variable ‘aChartsData’ – wir werden die globale Variable später erstellen)
• Legen Sie den Datentyp für die Eigenschaft ‘labels’ auf ‘getChartsData_labels_Col’ fest (wir haben diesen Datentyp im vorherigen Schritt erstellt)

Hinzufügen einer Vorlage für Beschriftungen und Datensätze

• Hinzufügen eines ChartLabels zum Diagramm-Widget
• Hinzufügen eines ChartDataset zum Diagramm-Widget
• Setzen Sie im ChartDataset den Schalter der Eigenschaft ‘dataTemplate’ auf ‘True’
• Setzen Sie im ChartDataset die Eigenschaften ‘backgroundColorsPath’, ‘borderColorsPath’, ‘dataPath’ und ‘label’ auf die jeweiligen Pfade der globalen Variablen

Hinzufügen einer Vorlage für die DataPoints

• Hinzufügen eines ChartDataPoint zum Dataset
• Setzen Sie im DataPoint die Eigenschaft ‘value’ auf den entsprechenden Pfad der globalen Variablen: Beachten Sie, dass die Eigenschaft ‘value’ vom Typ Float ist, so dass die Eingabe des Pfads in das Eingabefeld zu einem Fehler führen würde, da der String nicht korrekt als Float geparst wird.
  Um andere Datentypen als Strings korrekt einzugeben, klicken Sie auf den Button rechts neben dem Eingabefeld.
  Es öffnet sich ein Dialog, in dem Sie den Pfad eingeben können (als korrekte Modellbindung).

Ordnen Sie die Business Objekt-Daten im Process Designer zu

Fast fertig!
Wir müssen nun eine globale Variable erstellen, um die Daten zu speichern, und dann zum Process Designer wechseln, um das Datenmapping zu implementieren.

Erstellen einer globalen Variablen

• Zur Data Workbench
• Erstellen Sie eine globale Variable mit dem Namen ‘aChartsData’, in der die Datensätze gespeichert werden sollen.
• Legen Sie den Datentyp auf ‘getChartsData_datasets_Col’ fest
• Klicken Sie auf “Speichern”

Zuordnen der Beschriftungen

• Wechseln Sie zum Prozess-Designer und erstellen Sie eine neue Story
• Abonnieren Sie ein Ereignis, das ausgelöst wird, bevor Ihr Diagramm angezeigt wird.
  In meinem Fall habe ich das Ereignis ‘onAfterRendering’ meines Startbildschirms ‘chart’ verwendet
• Fügen Sie ein Business Objekt-Shape hinzu, wählen Sie Ihr Business Objekt und die entsprechende Funktion aus, in die die Diagrammdaten geladen werden.
  In meinem Fall: Business Objekt ‘Test’, Funktion ‘getChartsData’
• Öffnen des Dialogfelds “Ausgabezuordnung”
• Hinzufügen einer ‘Parameter’-Form
• Wählen Sie im Dialogfeld “Beschriftungen” aus, klicken Sie auf das Pfeilsymbol und dann auf das Pluszeichen neben “Etikett”
• Klicken Sie auf “Ok”

• Fügen Sie dann eine “Widget”-Form hinzu
• Wählen Sie Ihren Bildschirm und Ihr Diagramm-Widget aus (in meinem Fall: Bildschirm ‘Diagramme’, Widget ‘Chart_Bar’
• Klicken Sie auf Aggregationen (die Schaltfläche rechts unter der Suchleiste)
• Klicken Sie auf das Pfeilsymbol neben “Labels”

• Klicken Sie auf Ihre ChartLabel-Vorlage (in meinem Fall: ChartLabel_Template)
• Klicken Sie auf die Plus-Schaltfläche neben “Label”
• Klicken Sie auf “Ok”

• Verbinden Sie abschließend die beiden Formen
• Klicken Sie auf “Ok”
• Jetzt haben Sie die Beschriftungen des Diagramms zugeordnet!

Zuordnen der Datensätze

• Hinzufügen einer ‘Parameter’-Form
• Wählen Sie im Dialogfeld “Datensätze” und klicken Sie auf das Plus-Symbol
• Klicken Sie auf “Ok”

• Hinzufügen einer “variablen” Form
• Wählen Sie die Registerkarte “Sammlungen”
• Wählen Sie Ihre globale Variable für die Datensätze aus (in meinem Fall: aChartsData)
• Klicken Sie auf “Ok”

• Verbinden der beiden Shapes
• Klicken Sie auf “Ok”
• Jetzt haben Sie die Datensätze des Diagramms zugeordnet!
  Da wir die Pfade für die Eigenschaften, die wir im UI Designer abbilden möchten, angegeben haben, müssen wir in diesem Fall nur die Ausgabedaten auf die globale Variable abbilden

Bereitstellen der App

Klicken Sie abschließend auf “Bereitstellen”, öffnen Sie Ihre Anwendung und navigieren Sie zum Bildschirm mit dem Balkendiagramm.
Das Diagramm mit den aus dem Business Objekt geladenen Daten sollte angezeigt werden.

Das war’s, du bist fertig!
Sie können nun den Typ Ihres Diagramms anpassen (siehe nächstes Kapitel), Daten in Ihrem Business Objekt hinzufügen/entfernen, die Farben ändern, weitere Diagramme zu Ihrem Bildschirm hinzufügen usw.

Die Diagrammtypen

Das Diagramm, das wir in den obigen Anwendungsfällen erstellt haben, ist ein Balkendiagramm.
Es gibt verschiedene Arten von Diagrammen, die Sie für das Diagramm-Widget auswählen können:

• Linie
• Stab
• barStacked
• horizontalBalken
• Torte
• Krapfen
• Radar
• polarArea
• verstreuen

In der Abbildung unten sehen Sie Beispiele für einige der Typen.
Wählen Sie einfach den Typ aus, der für die Daten in Ihrem Anwendungsfall geeignet ist.

Beachten Sie, dass die Datenstruktur von Typ zu Typ variieren kann.
Eine Übersicht über die verschiedenen Typen und ihre Datenstrukturen finden Sie hier: https://www.chartjs.org/docs/latest/charts/