Skip to content

Data Series#

dataSeriesIcon

Overview#

The Data Series widget provides a chart view with various series to display data from the system. Below is an example of a UI Page using the Data Series widget (the chart on the bottom of the page).

dataSeriesExample

General Steps#

To use the Data Series widget in a UI Page, follow the steps below:

  1. In any UI Page in Build mode, select the Data Series from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
  2. Enter the Settings section of the widget through the three vertical dots.
  3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image.

Screenshot showing a data series general settings wizard.

Widget Customization#

  1. Optionally, in the Style tab, you can define a Border Width and Color.

    Diagram showing a data series style customization option.

  2. In the Layout tab, you can configure the Base visual properties of the widget, such as:

    • Title - The main heading of the chart.
    • Subtitle - The secondary heading of the chart.
    • Show Animations - Determines whether animations are enabled for chart transitions and interactions. This option is set to false by default.
    • Show Subtitle Always - Controls whether the subtitle (series names) is always visible. If set to false (default), the subtitle will adjust responsively based on the chart size.
    • Show Axis Always - Specifies whether the X and Y axes should always be displayed. By default, this is set to false, allowing the axes to be responsive to the chart's size.
    • Decimal Places - Defines the number of decimal places to display on the axes.

    You can also configure the Categories Axis, or X Axis, properties, namely:

    • Show Axis Always - Determines if the X axis labels (categories) should always be shown. The default setting is false, making the axis labels responsive to the chart's size.
    • Shorten Axis Labels - Controls whether the labels on the X axis should be shortened for improved readability. This option is set to false by default.
    • Show Label on Tooltip - Specifies if the category label should appear in tooltips when hovering over data points. This option is set to false by default.
    • Data Field - Indicates the name of the data field used for the categories, linking the chart to the appropriate dataset.
    • Label Type - Defines the type of labels for the X axis, which can be String, Number, or Date/Time. For Date/Time labels, various formats are available such as Sequence, Minutes, Hours (12h or 24h format), Time, Time with Seconds, Date, Long Date, Complete Date and Time, Date and Time, Week Day, Week Day and Month Day, Week Days and Month, and Month and Year.

    Finally, you can define the Values Axis, or Y Axis, properties:

    • Show Axis Always* - Determines if the Y axis labels (values) should always be shown. The default setting is false, making the axis labels responsive to the chart's size.
    • Axis Minimum - Sets the minimum value for the Y axis, providing a lower boundary for the data range displayed.
    • Axis Maximum - Sets the maximum value for the Y axis, providing an upper boundary for the data range displayed.
    • Axis Units - Defines the units for the Y axis values.
    • Secondary Axis - Toggles the display of a secondary Y axis, useful for comparing two different sets of data. This option is set to false by default.
    • Secondary Axis Minimum - Sets the minimum value for the secondary Y axis.
    • Secondary Axis Maximum - Sets the maximum value for the secondary Y axis.
    • Secondary Axis Units - Defines the units for the secondary Y axis values.

    Screenshot showing a widget customization interface with options for setting up data series.

  3. In the Series tab, define the series that will be displayed.

    Screenshot showing a UI with options for saving and customizing a data series.

  4. Optionally, define the Links between this widget and other elements of the UI Page.

    Screenshot showing a data series links configuration wizard with options for linking to other UI elements.

  5. By saving and closing the settings, the widget will be changed accordingly.

Using the Fill Settings Feature#

When using widgets that can be configured via input, you can take advantage of the Fill Settings feature, which is accessible through the three-dot menu of each widget while in build mode. This functionality automatically updates the widget settings based on its current state.

To use it, simply connect a compatible output from a System Task to the appropriate input of the Data Series widget. Then, select the Fill Settings button, and the widget will be updated accordingly.

Screenshot showing a UI with options for "Data Series" and "Fill Settings".