Radial chart
JSON used as input for Radial chart rendering consists of multiple elements.
Basic structure
{
"radar_axis": {
"spoke-labels": {
"labels": [ ... ]
}
}
"elements": [
{
"type": "area",
"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.
|
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": {}
}
"radar_axis" content
Radial axis is defined by min and max value, size of one step (steps) and spoke-labels. You can specify also colour and grid-colour for this axis.
| Name | Description | Example | ||||||
|---|---|---|---|---|---|---|---|---|
colour | Color of the axis label | #e9e9e9 | ||||||
grid-colour | Color of the axis grid | #e9e9e9 | ||||||
spoke-labels | Nested object defining the axis labels
|
Example:
"radar_axis": {
"colour": "#e9e9e9",
"grid-colour": "#e9e9e9",
"spoke-labels": {
"labels": [
"Austria",
"Canada",
"France",
"Germany"
]
}
}
"elements" content
Each object in array elements describe one chart element. In example below we have only one element that has type area and contains array with 4 values. Each value object consists of value, label, tool tip and context.
| Name | Description | Example | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | Type of the chart. There are 3 types of radial chart:
| area | |||||||||||||||
values |
| ||||||||||||||||
| colour | Colour of the line around area | #4379bd | |||||||||||||||
loop | Boolean flag indicating if there should be line between last and first vertex. Value "true" means visible line and it's required in case of filling area. | true | |||||||||||||||
| fill | Colour of the area | #4379bd | |||||||||||||||
| fill-alpha | Alpha channel that specifies the opacity of the area | 0.35 | |||||||||||||||
| text | Element title | Revenue | |||||||||||||||
| font-size | Font size used for displaying text | 12 | |||||||||||||||
dot-style | Style of the dot with following structure:
|
"elements": [
{
"type": "area",
"text": "Revenue",
"font-size": 12,
"colour": "#4379bd",
"dot-style": {
"type": "star",
"dot-size": 6,
"halo-size": 10
},
"loop": true,
"fill": "#4379bd",
"fill-alpha": 0.35,
"values": [
{
"value": 444835.123456789,
"label": "Austria",
"tip": "Austria\n444835 USD",
"context": "{\"dataLink\":\"36_-2043221510\",\"identifierQuery\":\"[L_COUNTRY={Austria}]\"}"
},
{
"value": 730974,
"label": "Canada",
"tip": "Canada\n730974 USD",
"context": "{\"dataLink\":\"36_-1852385179\",\"identifierQuery\":\"[L_COUNTRY={Canada}]\"}"
},
{
"value": 546650,
"label": "France",
"tip": "France\n546650 USD",
"context": "{\"dataLink\":\"36_-1863819150\",\"identifierQuery\":\"[L_COUNTRY={France}]\"}"
},
{
"value": 643782,
"label": "Germany",
"tip": "Germany\n643782 USD",
"context": "{\"dataLink\":\"36_-547347752\",\"identifierQuery\":\"[L_COUNTRY={Germany}]\"}"
}
]
}
]
Examples
Overview
Content Tools