Combined chartJSON used as input for Combined chart rendering consists of multiple elements. Basic structure| Code Block |
|---|
{
"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. | Name | Description | Example |
|---|
mouse | Mouse sensitivity | 2 | shadow | [true, false] | true | stroke | [0, 1] | 1 | colour | Default font color for tooltips | #202020 | background | Default background for tooltips. | "#ffffff" |
| | x_legend | (Optional) Defines legend for X axis (below the chart). | Name | Description | Example |
|---|
text | Displayed text | This is legend text | style | CSS style | {font-size: 10px; text-align: center;} |
| | y_legend | (Optional) Defines legend for Y axis (on the left side of chart). | Name | Description | Example |
|---|
text | Displayed text | This is legend text | style | CSS style | {font-size: 10px; text-align: center;} |
| | y_right_legend | (Optional) Defines legend for Y axis (on the right side of chart). | Name | Description | Example |
|---|
text | Displayed text | This is legend text | style | CSS style | {font-size: 10px; text-align: center;} |
| |
Example | Code Block |
|---|
{
"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 | Name | Description | Example |
|---|
colour | Color of the labels | #4e4e4e | labels | Array of labels to display. | [ "Austria", "Canada", "France", "Germany" ] |
| |
Example: | Code Block |
|---|
"x_axis": {
"colour": "#c7c7c7",
"grid-colour": "#c7c7c7",
"labels": {
"colour": "#4e4e4e",
"labels": [ "Austria", "Canada", "France", "Germany" ]
}
}, |
"y_axis" contentLeft 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 | Name | Description | Example |
|---|
colour | Color of the labels | #4e4e4e | labels | Array of label and values | [ { "text": "0 USD", "y": 0 }, { "text": "100.000 USD", "y": 100000 } ] |
| |
Example: | Code Block |
|---|
"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" contentRight 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 | Name | Description | Example |
|---|
colour | Color of the labels | #4e4e4e | labels | Array of label and values | [ { "text": "-20 units", "y": -20 }, { "text": "-10 units", "y": -10 } ] |
| |
Example: | Code Block |
|---|
"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" contentEach 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: | Code Block |
|---|
"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| Attachments |
|---|
| upload | false |
|---|
| old | false |
|---|
| sortBy | name |
|---|
|
|