Stack Bar chart
JSON used as input for Stack bar chart rendering consists of multiple elements.
Basic structure
{
"x_axis": {
"labels": {
"labels": [ ... ]
}
}
"y_axis": {
"labels": {
"labels": [ ... ]
}
}
"elements": [
{
"type": "bar_stack",
"keys": [ ... ],
"values": [ ... ]
}
]
}
Common elements
| Name | Description | Example | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
chartId | Chart view identifier. Refer to REST API. | chart_4-b3T3T8tVlP_JDdEDsaCIu | ||||||||||||||||||
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_4-b3T3T8tVlP_JDdEDsaCIu",
"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_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" ]
}
},
"y_axis" content
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 | 50000 | |||||||||
min | Minimal value displayed on the axis | 0 | |||||||||
max | Maximal value displayed on the axis | 400000 | |||||||||
labels | Nested object defining the axis labels
|
Example:
"y_axis": {
"colour": "#e9e9e9",
"grid-colour": "#e9e9e9",
"steps": 50000,
"min": 0,
"max": 400000,
"labels": {
"colour": "#4e4e4e",
"labels": [
{ "text": "0 USD", "y": 0 },
{ "text": "50.000 USD", "y": 50000 },
{ "text": "100.000 USD", "y": 100000 },
{ "text": "150.000 USD", "y": 150000 },
{ "text": "200.000 USD", "y": 200000 },
{ "text": "250.000 USD", "y": 250000 },
{ "text": "300.000 USD", "y": 300000 },
{ "text": "350.000 USD", "y": 350000 },
{ "text": "400.000 USD", "y": 400000 }
]
}
}
"elements" content
Each object in array elements describe one chart element. In example below we have only one element with title Revenue, that has type stack bar and contains array with 2 values (in example below Austria and Canada). Each value is an array that contains value objects. In example below first value array is for Austria and consists of top, bottom, value, tool tip, label, top label, colour and context. Legend keys can be specified and displayed at the top of the chart.
| Name | Description | Example | |||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | Type of the chart. For stack bar chart, the value is "bar_stack" | bar_stack | |||||||||||||||||||||||||||
text | Name of the chart | ||||||||||||||||||||||||||||
font-size | Font size used for displaying text | ||||||||||||||||||||||||||||
colour | Color used for displayed text | ||||||||||||||||||||||||||||
| keys | Array of text labels displayed at the top of the chart
| ||||||||||||||||||||||||||||
values | Array of value arrays
|
"elements": [
{
"type": "bar_stack",
"text": "Revenue",
"font-size": 10,
"colour": "#4379bd",
"keys": [
{
"colour": "#4379bd",
"text": "Year 2012",
"font-size": 12
},
{
"colour": "#b5cb04",
"text": "Year 2013",
"font-size": 12
}
],
"values": [
[
{
"val": 48637,
"top": 48637,
"bottom": 0,
"colour": "#4379bd",
"label": "Austria\n2012 (Revenue)\n(48637)",
"tip": "Austria\n2012 (Revenue)\n48637 / 222172",
"context": "{\"dataLink\":\"36_1097194719\",\"identifierQuery\":\"[L_COUNTRY={Austria}]\",\"dateInterval\":{\"from\":\"2012-01-01\",\"to\":\"2012-12-31\"}}"
},
{
"val": 173535,
"top": 222172,
"bottom": 48637,
"colour": "#b5cb04",
"label": "Austria\n2013 (Revenue)\n(173535)",
"topLabel": "222172 USD",
"tip": "Austria\n2013 (Revenue)\n173535 / 222172",
"context": "{\"dataLink\":\"36_-792896568\",\"identifierQuery\":\"[L_COUNTRY={Austria}]\",\"dateInterval\":{\"from\":\"2013-01-01\",\"to\":\"2013-12-31\"}}"
}
],
[
{
"val": 42788,
"top": 42788,
"bottom": 0,
"colour": "#4379bd",
"label": "Canada\n2012 (Revenue)\n(42788)",
"tip": "Canada\n2012 (Revenue)\n42788 / 384257",
"context": "{\"dataLink\":\"36_1288031050\",\"identifierQuery\":\"[L_COUNTRY={Canada}]\",\"dateInterval\":{\"from\":\"2012-01-01\",\"to\":\"2012-12-31\"}}"
},
{
"val": 341469,
"top": 384257,
"bottom": 42788,
"colour": "#b5cb04",
"label": "Canada\n2013 (Revenue)\n(341469)",
"topLabel": "384257 USD",
"tip": "Canada\n2013 (Revenue)\n341469 / 384257",
"context": "{\"dataLink\":\"36_-602060237\",\"identifierQuery\":\"[L_COUNTRY={Canada}]\",\"dateInterval\":{\"from\":\"2013-01-01\",\"to\":\"2013-12-31\"}}"
}
]
]
}
]
Examples
Overview
Content Tools