# 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:
```json
// 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:
```javascript
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).
{% tabs %}
{% tab title="Setting for Time" %}
{% endtab %}
{% tab title="Setting for Values" %}
{% endtab %}
{% endtabs %}
#### 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.
{% tabs %}
{% tab title="Array of arrays" %}
```json
[
[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
{% endtab %}
{% tab title="Array of objects" %}
```json
[
{"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
{% hint style="warning" %}
Only root property can be set this way. In case of complex objects, see the next tab: *Array of complex structures*.
{% endhint %}
{% endtab %}
{% tab title="Array of complex structures" %}
```json
[
{"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:
```javascript
item.year
```
Axis data key: `value` tells you, that a value of property `value` will be mapped to the related axis. -> 10; 20; 30
{% hint style="info" %}
The item is available to access value of the selected Axis data key.
{% endhint %}
{% endtab %}
{% endtabs %}
#### Ranges Configuration
{% hint style="info" %}
Under construction
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.adapptio.com/working-with-adapptio/components/composed-chart.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.