Chart Editor
A chart is a single tabular or graphical representation of results in the form of a diagram, table or HTML output. Charts are created on the basis of preconfigured data sets (see Dataset editor).
The chart library used in the Analysis module is AmCharts. See official documentation
The following chart types can be created:
-
Charts based on data objects with numerical attributes
-
Charts based on data objects with different attributes
-
Charts based on lists (arrays)
User interface
-
List of individual charts
-
Configuration of charts
-
Preview of a chart
In the first area, the chart overview, new charts can be added, edited, duplicated and deleted (see Buttons and icons).
In the second area, a chart type is selected and graphically adjusted on the basis of a suitable data set.
The chart settings can be directly visualized and checked in the third area, the preview.
Customize areas
The individual areas can be adjusted in width or completely collapsed, e.g. to make hidden information visible.
Collapse or expand areas:
Adjust the width of areas:
Live Update
- What is the purpose of the "Live Update" function?
-
Activating the Live Update ensures that changes in the chart are visible directly in the preview area.
- When should the Live Update be deactivated?
-
If comprehensive charts with many data points are to be displayed, rendering and visualizing the charts requires more capacity. Depending on your individual resources, the performance of the application may be affected.
Therefore, if you notice or expect restrictions during configuration or a slow image build-up in the preview area, deactivate the live update.
Buttons and icons
| Button/icon | Description |
|---|---|
Add |
Creates a new element. |
Copies the selected chart including all configurations and adds the copy to the end of the list or to the end of the group. |
|
Removes the selected element. |
|
Opens the group and displays all entries assigned to this chart type. |
|
Closes the group and minimizes all entries assigned to this chart type. |
|
Opens a window in which advanced settings for the appearance of the chart can be made. |
|
Opens the selected data set in the data set editor. |
|
Updates the chart view in the preview area (primarily used if Live Update is deactivated) |
|
Execute |
Generates a chart based on the data and Parameters entered. |
Save |
Saves entries and settings. |
Report editor |
Opens a "Add new" selection button. Clicking on this opens the current chart in the list of reports Reports |
Create new chart
When adding a new chart, the preselected chart type is the XY chart.
|
If the Live Update is switched off, the Refresh button must be clicked in order to see changes in the Diagram. |
-
Select the chart editor in the Analysis module.
-
Add a new chart.
-
Enter a name.
-
Select chart type.
-
Select data set.
-
Adjust the data selector and, if necessary, the configurator depending on the chart type.
A chart has been created and can now be configured further.
General settings
The general settings are the same for all chart types:
-
Naming of the chart, which is also used in the Report editor and in the widget
-
Selection of a chart in the Data record editor
-
Selection of the chart type
-
Preconfiguration depending on the selected chart type
Advanced settings
The advanced settings are the same for all chart types, but some of the options are only suitable for certain charts.
|
Before you can make advanced settings, you should at least add values in the data selector. Otherwise, no chart preview is possible. |
-
Title that can be seen in the chart image (if the display is activated)
-
Background color of the chart
-
Shows a legend in the chart image
-
Overview display above the chart, in which the value range of the X-axis can be restricted
-
Shows a cursor and vertical and horizontal lines in the chart image for easy reading of the current value
-
Animation
-
Overview display next to the chart, in which the value range of the Y-axis can be restricted
-
Date format of the data to be displayed on a time axis
-
Preview of the chart image
-
JSON structure of the chart configuration
The attribute configuration corresponds to the AmCharts4 configuration, see AmCharts4 documentation.
|
The attribute ID of a chart (see JSON structure in the advanced settings must be unique across all components). |
Gauge charts
The gauge chart consists of a circle and a pointer that points to a value on the circle. This chart expects a data set that contains exactly one data object with a number-Attribute. This is the only way the pointer can point to a specific value.
Data selector - customize pointer
The pointer of the Diagram is set in the "Data selector" area. The appearance of the pointer can be configured and which value should serve as the basis for the pointer.
{
"value1": 50,
"value2" : 40
}-
Click on the Add button.
A new entry is added. -
Click in the attribute field.
-
If there are several attributes in the data set, select an attribute from the drop-down list.
In principle, several attributes and therefore several pointers are also possible.
-
Attribute that is selected from the data set.
Click in the field and select the desired value from the drop-down list.
.Fill color of the pointer.
Double-click in the field and select a color via the color selection window.
The inner radius determines the distance of the pointer base to the center of the circle.
The outer radius determines the distance of the pointer tip to the center of the circle.
of the pointer base in pixels.
Removes the selected pointer.
Adds a new pointer.
Axis settings - Adjust circle
The appearance of the (half) circle can be adjusted using the axis settings.
-
The initial value of the value range.
No unit is specified. -
The end value of the value range.
No unit is specified.
The distances between the start and end values are automatically adjusted to the selected value range. -
The start angle determines the position of a circle at which the start value is located.
-
The end angle determines the position of the circle at which the end value is located.
-
The inner radius controls the width of the colored axis ranges.
Styling
The following colors can be adjusted:
-
Color of the pointer see Fill color and Border color
-
Color of the axis area Axis range
HTML charts (template charts)
The template chart offers a great deal of design freedom. Here you can prepare and display data individually by embedding it in HTML content. This allows you to embed values from the data set in texts, for example.
{
"name": "John",
"birthday" : "12.03.1982",
"address" : "Mainstreet 5"
}Template configurator
The HTML content is stored in the template configurator. The data is accessed via attributes in curly brackets. The content is interpreted as Ext.XTemplate, whereby the data is already automatically bound to the data object from the selected data set.
<h1>Hello {name}</h1>All constructs such as iterations and if-else conditions from the Ext.XTemplate are available.
Tortendiagramme (Pie Charts)
Das Tortendiagramm eignet sich für die Darstellung von Anteilen und (z.B. prozentualen) Verteilungen.
[
{
"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.
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 - Chart gestalten
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 |
Styling
Es werden 2 Möglichkeiten vorgestellt wie die Farben einzelner Tortenstücke (Slices) festgelegt werden können.
Die Farben werden in der Chart-Konfiguration unter series → colors → list definiert.
{
"dataSetId": "1765462730967",
"name": "Verwendungszeit der BPC-Module",
"chartType": "pie",
"id": "1765462804881",
"enabled3D": true,
"config": {
"depth": 20,
"data": [],
"series": [
{
"type": "PieSeries3D",
"category": "module",
"value": "usage_time",
"dataFields": {
"category": "module",
"value": "usage_time"
},
"colors": {
"list": [
"#cbbc6b",
"red",
"rgb(128,100,100)",
"rgba(100,200,100,0.7)"
]
}
}
],
"background": {
"fill": "rgba(255,255,255,0)"
},
"angle": 30,
"scale": 1,
"titles": "",
"radius": 120,
"innerRadius": 20
}
} 2. Farben werden in den Daten festlegen:
Die Eingangsdaten enthalten Attribut, welches dem Farbwert entspricht, in diesem Fall dataColor:
[
{
"module": "Dashboard_default_dashboard\nundefined",
"usage_time": 41044.20053708553,
"dataColor": "green"
},
{
"module": "Core_core_module\nundefined",
"usage_time": 6314547,
"dataColor": "rgb(128,100,100)"
},
{
"module": "Monitor_process-starter-forms\nundefined",
"usage_time": 3978150.25,
"dataColor": "#cbbc6b"
}
]Um im Anschluss die Zuweisung von den Farbwerten zu den Datenreihen zu ermöglichen, wird, wie im folgenden Beispiel gezeigt, in der Chartkonfiguration das Attribut dataColor referenziert.
Die Referenz erfolgt in dem der Wert series → slices → template → propertyFields → fill auf das Attribut in den Eingangsdaten, in diesem Fall dataColor gesetzt wird.
{
"dataSetId": "1765462730967",
"name": "Verwendungszeit der BPC-Module",
"chartType": "pie",
"id": "1765462804881",
"enabled3D": true,
"config": {
"depth": 20,
"data": [],
"series": [
{
"type": "PieSeries3D",
"category": "module",
"value": "usage_time",
"dataFields": {
"category": "module",
"value": "usage_time"
},
"slices": {
"template":{
"propertyFields": {
"fill": "dataColor"
}
}
}
}
],
"background": {
"fill": "rgba(255,255,255,0)"
},
"angle": 30,
"scale": 1,
"titles": "",
"radius": 120,
"innerRadius": 20
}
}Wie in den Beispielen ersichtlich wird, können die Farbwerte sowohl als Hex-Code, als auch als benannte Farben (String) oder im RGB- bzw. RGBA-Format angegeben werden.
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
[
{
"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
}
]
-
A data series is added by clicking on the Add button.
-
Type selection
-
LineSeries: Display data series as a line or surface
-
ColumnSeries: Display data series as a bar
-
ColumnSeries3D: Display data series as three-dimensional bars
-
ConeSeries: Display data series as three-dimensional cones
-
-
Selection of the data attribute on the X-axis
-
Selection of the data attribute on the Y-axis
In the XY-axis configurator, the X-axis type is set to "Date".
The date value in the example data set is located behind the "timestamp" attribute.
In the XY axis configurator, the Y axis type is set to "Numeric".
The numeric value in the example data set is located behind the "total_sessions" attribute.
This turns the X-axis of the diagram into a time axis and the Y-axis into a value axis.
Configuration of axes based on the data type
It is recommended to first define the axis type in the XY axis configurator according to the data type.
The following options are available for both axes:
-
Date (time-based values)
-
Numeric (numerical values)
-
Text
In addition, specific configurations may be required for the respective data series, especially in the event of incorrect display. These configurations should be made individually for each data series. To adjust the settings of a data series, click on the gear icon in the data selector.
Numerical values
If an axis represents numerical values such as sales, the attribute valueX or valueY must be set to the corresponding data field.
{ "year": 2023, "revenue": 50000 }In der Konfiguration der Chart-Serie sollte valueX auf "year" und valueY auf "revenue" verweisen, wenn die Jahre auf der x-Achse und die Umsätze auf der Y-Achse dargestellt werden sollen:
{
"type": "LineSeries",
"dataFields": {
"valueX": "year",
"valueY": "revenue"
}
}Datumswerte
Falls eine Achse ein zeitbasiertes Format wie Tage, Monate oder Jahre nutzt, wird das Attribut dateX bzw. dateY benötigt.
{ "date": "2024-03-01", "temperature": 15 }In diesem Fall müsste dateX auf "date" und valueY auf "temperature" gesetzt werden, wenn das Datum auf der X-Achse und die Temperatur auf der Y-achse dargestellt werden soll.
Kategorien (Textwerte)
Wenn eine Achse Textwerte wie Produktnamen, Kategorien oder Standorte enthält, muss categoryX bzw. categoryY verwendet werden.
{ "product": "Smartphone", "sales": 1200 }In diesem Fall müsste categoryX auf "product" und valueY auf "sales" gesetzt werden, wenn das Produkt auf der X-Achse und der Umsatz auf der Y-achse dargestellt werden soll.
{
"type": "LineSeries",
"dataFields": {
"categoryX": "product",
"valueY": "sales"
}
}Default configuration for new data series
For newly added data series, the default configuration is set as follows:
{
"type": "ColumnSeries",
"dataFields": {
"valueX": "timestamp",
"dateY": "value"
}
}Falls diese Einstellungen nicht passend sind, sollten diese manuell angepasst werden, um eine korrekte Darstellung der Daten zu gewährleisten.
Styling
The colors in the XY charts are applied similarly to the pie chart.
Applies to both line charts and bar charts. Each series is assigned its color in order according to the color list.
Only applies to the bar chart. Each bar is assigned the color value from the input data.
The color values are assigned slightly differently than those in the pie chart.
The reference, value series → columns → template → propertyFields → fill is set to the attribute in the input data, in this case dataColor.
{
"series": [
{
"columns": {
"template": {
"propertyFields": {
"fill": "dataColor"
}
}
}
}
]
}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
[
{
"Vorname": "Max",
"Nachname": "Mustermann"
},
{
"Vorname": "Franz",
"Nachname": "Müller"
}
]
-
Adding a column.
-
Drag-and-drop handle: Changing the column order
-
Heading: Desired text as heading in the column header
-
Data attribute: Selection field with attributes from data set
-
Layout Parameters: JSON field with additional style Parameters
Styling
The background color or text color of the table header can be set using CSS attributes
{
"flex": 1,
"style": "color:red; background-color:green"
}Diagram export
For the diagrams Gauge charts, Tortendiagramme (Pie Charts) and Linien- und Balkendiagramme (XY Charts) there is the option for the user to activate an export.
If this option is activated, a menu is offered in the top right-hand corner of the diagrams. This menu can be used to export the diagram in various file formats.
