Chartcomponent you can easily create graphs or charts to visualize and interpret your data. Our default properties offer enough configurability to quickly create basic chart types like line, area and bar charts. For users with more advanced needs, we added the ability to create fully customizable visualizations by using the plotly.js API with which the theme of the chart can be adapted to your branding and even sophisticated 3-dimensional graphs can be created.
A simple line chart
Chartcomponent expects one of three specific JSON structures.
In the following, we demonstrate this based on our default data that contains three data series as columns in a table:
Each key represents the name of the data series and each value the content of the data series.
x: [1, 2, 3, 4, 5],
y1: [-5, 20, 10, 14, 9],
y2: [20, 10, 5, 2, 22],
Each object in the array represents a single data point with all it's dimensions.
This is the usual structure that is returned for an query action and the very same structure we use for our
Tablecomponent. If you have an action that fetches data right from your data source, you can, thus, simply input
actionName.dataand it will populate your chart component.
'headers': ['x', 'y1', 'y2'],
[1, 2, 3, 4, 5],
[-5, 20, 10, 14, 9],
[20, 10, 5, 2, 22],
Note that any data series can be chosen as the x-axis value. We will, by default, infer a suitable x-axis value from the provided data for you. Regardless, all data series can be added to the y-axis.
Example as shown in data structures.
Defines that type of the chart in which the provided data should be presented. Additional chart types can be used when using the Plotly configuration.
For the bar chart, there is an additional property that defines the orientation of the chart.
Contains all data series from the provided data. In the dropdown, the data series that should represent the x-axis can be selected. For the pie chart, the x-axis field reflect the labels.
Represents the data series on the y-axis of the chart. Additional data series can be added via "Add data series". Each data series has some configurable properties themselves (see below).
Data series properties
Each data series possesses some properties of their own:
Name of the data series.
Contains all data series from the provided data. It allows you to select the data that should be associated with your data series.
The color of the trace (line, bar, etc.) of your data series.
Aggregation - Enabled
For data points that don't have unique x-axis values, this allows you to aggregate them into a single y-axis value. Note: Aggregation is not supported by the pie chart.
Aggregation - Method
If aggregation is enabled, this input defines how the data series should be aggregated. E.g. if we choose
As mentioned above, we provide some basic customization options for the user to create their first chart quickly. Beyond that, the user has the choice to fully customize their chart using plotly.js's API. Therefore, we offer a
Modeswitch to quickly switch between our form-based configuration and Plotly's JSON configuration format. When you switch from the form-based input to the JSON configuration, all specifications that were made in the form are synced to/reflected in the JSON.
Defines the title of the chart.
Determines if a legend is displayed in the chart component.
If a legend is displayed, this property determines its position.
X-Axis - Title
Defines the title placed next to the x-axis.
X-Axis - Show labels
Determines if the labels are displayed on the x-axis.
X-Axis - Show grid
Determines if the grid (grid lines and axis) is shown for the x-axis.
Y-Axis - Title
Defines the title placed next to the y-axis.
Y-Axis - Show labels
Determines if the labels are displayed on the y-axis.
Y-Axis - Show grid
Determines if the grid (grid lines and axis) is shown for the y-axis.
Users that prefer to customize the layout and appearance of their chart can use Plotly's JSON configuration format. The
Customconfiguration is conveniently accessible via the
Modeswitch. When you switch from the form-based input to the JSON configuration, all specifications that were made in the form are synced to/reflected in the JSON.
Chartdoes not offer any events.
Returns the data underlying the chart in a unified format, including the x-axis input and all data series. This is required since we allow different structures as data input.