Press Ctrl/Cmd + P to print
or save as PDF

CHARTS

Daten visualisieren mit den Chart Komponenten

Für die visuelle Darstellung von Daten stellt GAPTEQ zwei Visualisierungs-Komponenten bereit, womit eine große Auswahl an Chart-Typen und Variationsmöglichkeiten zur Verfügung stehen. Die Charts können einfach per Drag & Drop in die Seiten integriert werden – und dadurch direkt Daten aus der Datenbank visualisieren.

Die Komponente Pie chart (**NEU** – GAPTEQ 3.8) umfasst zwei verschiedene Chart-Typen:

  • Pie (Kuchendiagramm)
  • Donut

Die Komponente “Chart“ umfasst sieben verschiedene Chart-Typen:

  • 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)

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.

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, wie im Bild, das Argument des Segments (im Bsp.: der Gerätename) 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 Beispiel: Unter „others“ sind alle Geräte, die weniger als 2x verliehen wurden, zusammengefasst.

 

   

 

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 (Data Grid) aufgeführt.

Tipp: Filtern Sie dazu das Data Grid auf das „selectedArgument“ des Pie chart (hier typ_name).

 

 

Designen des Pie charts

  • 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

2. Chart Komponente einsetzen und konfigurieren 

  • Gehen Sie beim Chart 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 der GAPTEQ-Komponente “Color Scheme“ 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.