Composed Chart

The Goal

Describes how to visualize data using the Composed Chart component.

Supported Data Format

The chart supports data in array of arrays or array of objects formats. In case you do not have data in one of these formats, you should use the transform node in an action to convert them. Or you can try to use built-in data mapper, which will be described further.

Recommended data format:

// array of arrays
[
    [10, 20, ...],
    ...
]

// array of objects
[
    { "time": 1653590420, "x": 123.321, ... },
    ...
]
Create an action generating random data

Add transform node, connect and paste the source code:

const timeData = [];
const dateNow = new Date();

for(let i = 0; i < 100; i++) {
  const timestamp = dateNow.toISOString();
  
  const dataPoint = [timestamp, Math.random()*1000];
  timeData.push(dataPoint);

  dateNow.setMinutes(dateNow.getMinutes() - 1);
}

return timeData;

Chart Configuration

Place a chart to a view and select it. In the inspector you can find a complex setting for:

  • Items (data) - representing a bunch of all chart's data.

  • Axes - defining chart's multi-level axes.

  • Series - specifying each data series extracted from the items (data).

  • Ranges - specifying dividing lines or areas in the chart.

Set Items (data) to be dynamic and connect with your data.

Axes Configuration

The most important is to set a unique Id, which will be used to link series to the axis. You should also set a proper Type. Type: Value - if an axis should represent numeric values; Category - if an axis should display categories as a pure text; or Datetime - if an axis will work with time (ISO-8601 or unix timestamps).

Series Configuration

Just below the common fields, such as series title, color, area opacity or type of series, you can find settings for X-axis and Y-axis.

The Axis Id field specifies the Id of the axis, you already defined before in Axes configuration.

The Axis data key is used to extract data from the Items (data). Generally speaking, this is the path to the root property. In case, you are using data in format: array of arrays (as in this doc), you can specify the index on which the property is located.

[ 
    [2020, 10], 
    [2021, 20], 
    [2022, 30] 
]

Axis data key: 0 tells you, that a value at the first position will be mapped to the related axis. -> 2020; 2021; 2022

Axis data key: 1 tells you, that a value at the second position will be mapped to the related. axis. -> 10; 20; 30

Ranges Configuration

Under construction

Last updated