Using the Chart Widget

This widget allows to create a chart representing data from the model. The widget currently supports four types of charts.

Chart Widget (Overview of Types)

  • Trend/Category chart: uses a category horizontal axis that can represent resources, time buckets, etc., and a value vertical axis.

  • Vertical/Category chart: uses a category vertical axis that can represent resources, time buckets, etc., and a value horizontal axis.

  • Pie chart: a single-series pie chart.

  • Radar chart: a multi-series radar chart with one axis for each category value.

Most charts support multiple series that can be configured to use different data sources (entities), category field and value fields. The value field uses different aggregations such as average, minimum, maximum, count and distinct. If a single data source is used for the chart, an integrated filter widget can be enabled, allowing the user to filter the chart without editing the configuration.

Category based charts can now use the entity business key as category (and split by) field instead of using a scalar field (e.g. name). In this case, the internal id of the instance will be used to split the data, and the display value of the corresponding business key will be used in the tooltip and axis labels.

The widget settings can be edited using a dedicated configurator.

Chart Widget Configurator

The upper tabs allow configuring the:

  • Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.

  • Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.

  • Toolbar, beneath the widget header, by adding configurable action buttons. For more details, please refer to Section Using the Action API.

  • Custom Controller in charge of customizing the widget behavior, set to None by default.

  • Scenario Comparison option to Automatically enable the Scenario comparison mode for the widget.

  • Filters that should only apply to the widget, in addition to any filters set at a more global level, such as the Filter widget. For more details, please refer to Section Using the Filter Widget.

The main tabs allow configuring the:

  • Chart Properties of the widget, such as the:

    • Chart type of the widget, either Trend/Category, Vertical/Category, Radar, or Pie,

    • Show Legend option that displays the chart legend which, when selected, displays a tab Legend in the configurator with related settings, and the

    • Show Zoom Panel option — only available for Trend/Vertical and Vertical/Category charts — which displays zoom options on the chart,

    • X-axis options — only available for Trend/Vertical and Vertical/Category charts — whose Axis Label can be set to any title or unit.

      Clicking on the button Show more Options underneath displays two parameters:

      • Time axis allows to set the X-axis label format to either:

        • Time and date.

        • Day and month.

        • Weekday and week.

        • Day, week, and month.

        • Week and year.

        • Month and year.

        • Automatic. This last option sets one of the closest time formats stated above depending on the chart time span, respectively, less than 4 days, 15 days, 60 days, 120 days, 210 days or more.

        Time Axis Configuration

      • Tick label rotation (-90 to 90) — not compatible with the Time Axis option above — which is set to Auto by default to automatically tilt the label so it is displayed entirely under the X-axis.

    • Y-axis options — only available for Trend/Vertical and Vertical/Category charts — whose Axis Label can be set to any title or unit.

      Clicking on the button Show more Options underneath displays the:

      • Axis min, Axis max and Interval options, that allow configuring the Y axis graduation, as well as the

      • Use logarithmic scale option that implements Y axis intervals increasing based on an automatic factor for curves which evolution is not adapted to small graphs.

  • Chart Series for the widget, i.e. the data from the scenario data set to be displayed. You can set multiple Series in the related left panel using the buttons + and - and order them using the button located on the right of each series in the said list. When selecting a series in this list, it is grayed out and it can be configured individually using the parameters located on the right, such as the:

    • Series Title if need be,

    • Series Type — only available for Trend/Vertical and Vertical/Category charts — which can be set to Bar, Line, Curve, Area or Dot,

    • Data Source, which refers to the table, in the scenario data set, from which to retrieve the values to display,

    • Color to use for the graph — not available for Pie charts which use different colors,

    • Symbol to use for the graph — not available for Bar charts,

    • Symbol Size to use for the graph — not available for Bar charts,

    • Categories (X-Axis) parameters with the Category Field that refers to the column, in the scenario data set, from which to retrieve the values to display as categories, or a related value if available as indicated by the icon that precedes it.

      Clicking on the button Show more Options underneath displays the:

      • Color by Category option that uses different colors for each category, as well as the

      • Parse as ISO date setting to indicate that the values are strings that encode a date in compliance with the ISO 8601 standard.

    • Values (Y-Axis) parameters with the Value Field that refers to the column, in the scenario data set, from which to retrieve the value to display for each category, or a related value if available as indicated by the icon that precedes it as well as the Aggregation options Count, Distinct, Average, Sum, Max, and Min.

      Clicking on the button Show more Options underneath displays the:

      • Split values by dropdown list, which allows selecting a column to split the category set as Value Field into subcategories.

      • Use data to sort chart options Unsorted, Ascending and Descending, and the

      • Value format dropdown list with the options:

        • Date, using the format 10/3/2023, Oct. 3, 2023, October 3, 2023, or Thursday, October, 2023.

        • Time, using the format 3:50 PM, 3:50:55 PM, or 3:50:55 PM GMT+2.

        • Duration, using the format 8760:00:00 (hh:mm:ss), 525600 (Minutes), 8760 (Hours), 365 (Days), 52 (Weeks), 12 (Months), or 1 (Years).

        • Number, using the format 123,412%, 1,231 (Rounded value), 1,234.1, 1,234.12, 1,234.123, 1.234123e+3 (Scientific), 1.234e+3 (Scientific), 1.234K (thousands), 1K (thousands, rounded), 0.001M (millions), or 0M (millions, rounded).

        • Currency, using the format $ 1,234 (Rounded value), € 1,234 (Rounded value), 1,234 (Rounded value), $ 1,234.12 (Decimals), € 1,234.12 (Decimals) or 1,234.12 (Decimals).

        • Custom, which prompts the user to choose a formatter and a format, either ICU (Default), using the ICU message format, or Luxon (Date & Time), using the Luxon message format.

  • Filter configuration, with parameters such as the:

    • Apply Context Filters option, which makes the chart take into account any filter inherited from the context, and the

    • Filterable option which, when selected, displays the dropdown list Filter Field to select a column to use as interactive filter values for the chart. The filter displayed on the chart can be renamed via the field Filter Label.

  • Tooltip display configuration that can be set for:

    • A whole category, which displays the options Skip split and series with missing values, that removes invalid series from the tooltip, as well as the option Limit number of items in split series, which allows to set a maximum Number of Items and Sort values.

    • A single data point for more granularity.