Für die visuelle Darstellung von Daten stellt GAPTEQ verschiedenste Chart-Typen bereit, womit Daten aus der Datenbank einfach und direkt aufbereitet werden können.
In diesem Artikel lesen Sie folgende Inhalte:
(Pie-) Chart einsetzten und konfigurieren
Interaktion mit anderen Komponenten
Anderen Chart-Typ einsetzen und konfigurieren
GAPTEQ stellt folgende Chart-Typen bereit:
- Pie- & Donut Series (Kuchen)
- Bar Series (Balken)
- Line Series (Linien)
- Area Series (Flächen)
- Financial Series (Stock und Candle Sticks)
- Scatter Series (Punktwolke)
- Bubble Series (Blasen)
- Range Series (Bereiche)
In diesem Artikel wird der Einsatz eines Chart beispielhaft anhand des Pie Charts erläutert.
1. (Pie-) Chart einsetzten und konfigurieren
-
Ziehen Sie zunächst, wie gewohnt, die Komponente Pie Chart per Drag & Drop auf die Page und vergeben einen Data Layer.
-
In den Pie Chart Properties können Sie unter „Series“ und „Add“ (grünes Plus-Zeichen) den gewünschten Chart-Typen (Pie oder Donut) auswählen und einen Namen vergeben.
Argument & Value vergeben
- Im folgenden Konfigurationsfenster (siehe unten) geben Sie nun unter „Argument“ & „Value“ an, welche Werte Sie in welcher Einheit im Chart abbilden wollen.
Notiz! Im folgenden Beispiel sehen Sie die Übersicht „Anzahlt Geräte pro Gerätetyp“ aus unserer GAPTEQ SAMPLE APP „Geräteverwaltung“. Hier ist die Anzahl der Geräte („Anzahl“) als Value und der Gerätetyp („typ_name“) als Argument hinterlegt.
- Mit der Checkbox „Show labels“ können Sie sich das Argument des Segments (im Bsp.: der Gerätename, "Smartphone") als Label anzeigen lassen.
Tipp! Um den Wert der Values bei Klick oder Mouseover anzuzeigen (im Bsp.: 6 Smartphones) erlauben Sie in den Pie charts Properties unter „Display Settings“ die Tooltips (enable Tooltips).
-
Über die Checkbox „Group small values“ können Sie Werte unter einem beliebigen Schwellenwert in der Darstellung kumuliert anzeigen (im Bsp.: unter „others“ sind alle Geräte, die weniger als 2x verliehen wurden, zusammengefasst).
2. Interaktion mit anderen Komponenten
Durch Klick auf ein Segment des Pie Charts können Sie detailliertere / weiterführende Aussagen zu den Segmenten anzeigen lassen.
Im Beispiel werden bei Klick auf das Segment „Smartphones“ alle 6 Smartphones, die in der Geräteverwaltung erfasst sind, in einer weiteren Komponente (im Bsp.: Data Grid) aufgeführt.
- Filtern Sie dazu das Data Grid in den Data links auf das „selectedArgument“ des Pie Chart (hier typ_name).
3. (Pie-) Chart designen
- In den Pie Chart properties können Sie unter „Series colors“ die Einfärbung der einzelnen Kuchensegmente bestimmen. Hier gibt es bereits vorbestimmte Farbkombinationen, die Sie auswählen können.
- Unter „Colors Extension“ finden Sie die Varianten extrapolate, blend, alternate und können damit die Farbkombinationen erweitern / anpassen.
- extrapolate: die gesamte Farbpalette wiederholt sich, wobei der Farbton allmählich von dunkel nach hell wechselt
- blend: eine Mischung aus zwei benachbarten Farben erstellen und diese zwischen diesen beiden Farben in die Palette einfügen
- alternate: die gesamte Farbpalette wiederholt sich, wobei sich die normalen, aufgehellten und abgedunkelten Farbtöne in dieser Reihenfolge abwechseln
4. Anderen Chart-Typ einsetzen und konfigurieren
- Gehen Sie bei anderen Charts genauso vor, wie beim Pie Chart und wählen Sie für „Argument“ und „Value“ die gewünschten Felder der Tabelle oder View.
Tipp! Einige der Chart-Typen halten zudem mehrere Varianten bereit (im Bsp.: mehrere Balken nebeneinander, gestapelt usw.). Ebenso lassen sich verschiedene Chart-Typen miteinander kombinieren bzw. übereinander legen, z.B. Balken und Linien.
Tipp! In Kombination mit den GAPTEQ Color Schemes besteht darüber hinaus die Möglichkeit, neben den im Standard zu Verfügung stehenden Farbschemata auch eigene Farben zu hinterlegen und eine CD-gerechten Look zu implementieren.
