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).

Setting for Time

Setting for Values

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.

Array of arrays

[ 
    [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

Array of objects

[ 
    {"year":2020,"value":10}, 
    {"year":2021,"value":20}, 
    {"year":2022,"value":30} 
]

Axis data key: year tells you, that a value of property year will be mapped to the related axis. -> 2020; 2021; 2022

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

Only root property can be set this way. In case of complex objects, see the next tab: Array of complex structures.

Array of complex structures

[ 
    {"date":{"year":2020,"month":1},"value":10}, 
    {"date":{"year":2021,"month":1},"value":20}, 
    {"date":{"year":2022,"month":1},"value":30} 
]

Axis data key: date tells you in this case, that the child object shall be passed to the mapper. -> {"year":2020,"month":1}, {"year":2021,"month":1}, {"year":2022,"month":1}

Now you need to enable data mapper and create an expression telling how to extract the value you want.

To access only year, write to the mapper field:

item.year

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

The item is available to access value of the selected Axis data key.

Ranges Configuration

Under construction