GAPTEQ provides various chart types for the visual representation of data, allowing data from the database to be processed easily and directly.
GAPTEQ provides the following chart types:
- Pie & Donut Series
- Bar Series
- Line Series (lines)
- Area Series (areas)
- Financial Series (Stock and Candle Sticks)
- Scatter Series (dot clouds)
- Bubble Series (bubbles)
- Range Series (ranges)
In this article, the use of a chart is explained using the pie chart as an example.
1. Inserting and configuring the (pie) chart
- First, drag and drop the Pie Chart component onto the page as usual and assign a data layer.
- In the Pie Chart Properties, you can select the desired chart type (Pie or Donut) under “Series” and “Add” (green plus sign) and assign a name.
Assign argument & value
In the following configuration window (see below), under “Argument” & “Value”, specify which values you want to display in which unit in the chart.
Note! The following example shows the overview “Number of devices per device type” from our GAPTEQ SAMPLE APP “Device management”. Here, the number of devices (“Number”) is stored as the value and the device type (“type_name”) as the argument.
- You can use the “Show labels” checkbox to display the argument of the segment (in the example: the device name, “Smartphone”) as a label.
Tip! To display the value of the values on click or mouseover (in the example: 6 smartphones), enable the tooltips in the Pie charts properties under “Display Settings” (enable tooltips).
- You can use the “Group small values” checkbox to display values below any threshold value cumulatively in the display (in the example: all devices that have been awarded less than twice are summarized under “others”).
2. Interaction with other components
By clicking on a segment of the pie chart, you can display more detailed / further information on the segments.
In the example, by clicking on the “Smartphones” segment, all 6 smartphones that are recorded in the device management are listed in another component (in the example: Data Grid).
- To do this, filter the data grid in the data on the left to the “selectedArgument” of the pie chart (here type_name).
3. Design (pie) chart
- In the Pie Chart properties, you can determine the coloring of the individual pie segments under “Series colors”. There are already predefined color combinations that you can select.
- Under “Colors Extension” you will find the variants extrapolate, blend, alternate and can thus extend / adapt the color combinations.
- extrapolate: the entire color palette is repeated, with the hue gradually changing from dark to light
- blend: create a blend of two adjacent colors and insert it between these two colors in the palette
- alternate: the entire color palette is repeated, with the normal, lightened and darkened hues alternating in this order
4. Insert and configure another chart type
For other charts, proceed in the same way as for the pie chart and select the desired fields of the table or view for “Argument” and “Value”.
Tip! Some of the chart types also offer several variants (e.g. several bars next to each other, stacked, etc.). Different chart types can also be combined with each other or placed on top of each other, e.g. bars and lines.
Tip! In combination with the GAPTEQ Color Schemes, it is also possible to store your own colors in addition to the standard color schemes and implement a CD-compatible look.
