Combined chart
JSON used as input for Combined chart rendering consists of multiple elements.
Basic structure
{
"x_axis": {
"labels": {
"labels": [ ... ]
}
},
"y_axis": {
"labels": {
"labels": [ ... ]
}
},
"y_axis_right": {
"labels": {
"labels": [ ... ]
}
}
"elements": [
{
"type": ...,
"values": [ ... ]
}
]
}
Common elements
| Name | Description | Example | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
chartId | Chart view identifier. Refer to REST API. | chart_3-FDEp6Q41fb_s3fwVc7F9H | ||||||||||||||||||
bg_color | Defines the color of the background for the entire chart | #e5e5e5 | ||||||||||||||||||
is_decimal_separator_comma | Determines whether to use comma as decimal separator. [0, 1] | 1 | ||||||||||||||||||
is_thousand_separator_disabled | Determines whether to use the thousands separator or not. [0, 1] | 1 | ||||||||||||||||||
tooltip | Defines the basic tooltip settings for the entire chart.
| |||||||||||||||||||
x_legend | (Optional) Defines legend for X axis (below the chart).
| |||||||||||||||||||
y_legend | (Optional) Defines legend for Y axis (on the left side of chart).
| |||||||||||||||||||
y_right_legend | (Optional) Defines legend for Y axis (on the right side of chart).
|
Example
{
"chartId": "chart_3-FDEp6Q41fb_s3fwVc7F9H",
"bg_colour": "#e5e5e5",
"is_decimal_separator_comma": 1,
"is_thousand_separator_disabled": 1,
"tooltip": {
"mouse": "2",
"shadow": true,
"stroke": 1,
"colour": "#202020",
"background": "#ffffff"
},
"options": {},
"x_legend": {
"text": "This is X axis legend",
"style": "{font-size: 10px; text-align: center;}"
},
"y_legend": {
"text": "This is left Y axis legend",
"style": "{font-size: 10px; text-align: center;}"
},
"y_right_legend": {
"text": "This is right Y axis legend",
"style": "{font-size: 10px; text-align: center;}"
}
}
"x_axis" content
| Name | Description | Example | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
colour | Color of the axis label | #c7c7c7 | |||||||||
grid-colour | Color of the x-axis grid (horizontal) | #c7c7c7 | |||||||||
labels | Nested object defining the axis labels
|
Example:
"x_axis": {
"colour": "#c7c7c7",
"grid-colour": "#c7c7c7",
"labels": {
"colour": "#4e4e4e",
"labels": [ "Austria", "Canada", "France", "Germany" ]
}
},
"y_axis" content
Left Y axis is defined by min and max value, size of one step (steps) and labels. Each label consists of value on Y axis (y) and displayed text. You can specify also colour and grid-colour for Y axis.
| Name | Description | Example | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
colour | Color of the axis label | #e9e9e9 | |||||||||
grid-colour | Color of the y-axis grid (vertical) | #e9e9e9 | |||||||||
steps | Size of the steps of the axis | 100000 | |||||||||
min | Minimal value displayed on the axis | 0 | |||||||||
max | Maximal value displayed on the axis | 800000 | |||||||||
labels | Nested object defining the axis labels
|
Example:
"y_axis": {
"colour": "#e9e9e9",
"grid-colour": "#e9e9e9",
"steps": 100000,
"min": 0,
"max": 800000,
"labels": {
"colour": "#4e4e4e",
"labels": [
{ "text": "0 USD", "y": 0 },
{ "text": "100.000 USD", "y": 100000 },
{ "text": "200.000 USD", "y": 200000 },
{ "text": "300.000 USD", "y": 300000 },
{ "text": "400.000 USD", "y": 400000 },
{ "text": "500.000 USD", "y": 500000 },
{ "text": "600.000 USD", "y": 600000 },
{ "text": "700.000 USD", "y": 700000 },
{ "text": "800.000 USD", "y": 800000 }
]
}
}
"y_axis_right" content
Right Y axis is defined by min and max value, size of one step (steps) and labels. Each label consists of value on Y axis (y) and displayed text. You can specify also colour and grid-colour for Y axis.
| Name | Description | Example | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
colour | Color of the axis label | #e9e9e9 | |||||||||
grid-colour | Color of the y-axis grid (vertical) | #e9e9e9 | |||||||||
steps | Size of the steps of the axis | 10 | |||||||||
min | Minimal value displayed on the axis | -20 | |||||||||
max | Maximal value displayed on the axis | 40 | |||||||||
labels | Nested object defining the axis labels
|
Example:
"y_axis_right": {
"colour": "#e9e9e9",
"grid-colour": "#e9e9e9",
"steps": 10,
"min": -20,
"max": 40,
"labels": {
"colour": "#4e4e4e",
"labels": [
{ "text": "-20 units", "y": -20 },
{ "text": "-10 units", "y": -10 },
{ "text": "0 units", "y": 0 },
{ "text": "10 units", "y": 10 },
{ "text": "20 units", "y": 20 },
{ "text": "30 units", "y": 30 },
{ "text": "40 units", "y": 40 }
]
}
}
"elements" content
Each object in array elements describe one chart element. Structure of chart element depends on the chart type and therefore please see section "elements" for following chart types supported in combined chart:
There is only one additional configuration in chart element - "axis" that specifies which Y axis should be used to render values of this element.
| Name | Description | Example |
|---|---|---|
axis | Specifies Y axis that should be used to render values of this element. Default: "left" | right |
In example below we have only one simple bar chart element that is related to Y axis on the "right" side of a chart:
"elements": [
{
"type": "bar",
"axis": "right",
"text": "Revenue",
"font-size": 10,
"colour": "#4379bd",
"values": [
{
"top": 444835.123456789,
"tip": "Austria\n444835.1",
"label": "444.835",
"context": "{\"dataLink\":\"3_-2043221543\",\"identifierQuery\":\"[L_COUNTRY={Austria}]\"}"
},
{
"top": 730974,
"tip": "Canada\n730974",
"label": "730.974",
"context": "{\"dataLink\":\"3_-1852385212\",\"identifierQuery\":\"[L_COUNTRY={Canada}]\"}"
},
{
"top": 546650,
"tip": "France\n546650",
"label": "546.650",
"context": "{\"dataLink\":\"3_-1863819183\",\"identifierQuery\":\"[L_COUNTRY={France}]\"}"
},
{
"top": 643782.34,
"tip": "Germany\n643782.3",
"label": "643.782",
"context": "{\"dataLink\":\"3_-547347785\",\"identifierQuery\":\"[L_COUNTRY={Germany}]\"}"
}
]
}
]
Examples
Overview
Content Tools