Horizontal Stack Bar chart
JSON used as input for Horizontal stack bar chart rendering consists of multiple elements.
Basic structure
{
"x_axis": {
"labels": {
"labels": [ ... ]
}
}
"y_axis": {
"labels": {
"labels": [ ... ]
}
}
"elements": [
{
"type": "multihbar",
"keys": [ ... ],
"values": [ ... ]
}
]
}
Common elements
| Name | Description | Example | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
chartId | Chart view identifier. Refer to REST API. | chart_36-ea2T3h3snN | ||||||||||||||||||
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_36-ea2T3h3snN",
"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
X axis is defined by min and max value, size of one step (steps) and labels. Each label consists of value on X axis (x) and displayed text. You can specify also colour and grid-colour for X axis.
| Name | Description | Example | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
colour | Color of the axis label | #e9e9e9 | |||||||||
grid-colour | Color of the x-axis grid (horizontal) | #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:
"x_axis": {
"colour": "#e9e9e9",
"grid-colour": "#e9e9e9",
"steps": 50000,
"min": 0,
"max": 400000,
"labels": {
"colour": "#4e4e4e",
"labels": [
{ "text": "0 USD", "x": 0 },
{ "text": "50.000 USD", "x": 50000 },
{ "text": "100.000 USD", "x": 100000 },
{ "text": "150.000 USD", "x": 150000 },
{ "text": "200.000 USD", "x": 200000 },
{ "text": "250.000 USD", "x": 250000 },
{ "text": "300.000 USD", "x": 300000 },
{ "text": "350.000 USD", "x": 350000 },
{ "text": "400.000 USD", "x": 400000 }
]
}
}
"y_axis" content
| Name | Description | Example | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
colour | Color of the axis label | #e9e9e9 | |||||||||
grid-colour | Color of the y-axis grid (horizontal) | #e9e9e9 | |||||||||
labels | Nested object defining the axis labels
|
Example:
"y_axis": {
"colour": "#e9e9e9",
"grid-colour": "#e9e9e9",
"labels": {
"colour": "#4e4e4e",
"labels": [ "Austria", "Canada" ]
}
},
"elements" content
Each object in array elements describe one chart element. In example below we have only one element, that has type horizontal 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 left, right, tool tip, 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 horizontal stack bar chart, the value is "multihbar" | multihbar | ||||||||||||||||||
| keys | Array of text labels displayed at the top of the chart
| |||||||||||||||||||
values | Array of value arrays
|
"elements": [
{
"type": "multihbar",
"keys": [
{
"colour": "#4379bd",
"text": "Year 2012",
"font-size": 12
},
{
"colour": "#b5cb04",
"text": "Year 2013",
"font-size": 12
}
],
"values": [
[
{
"right": 0,
"left": 48637,
"tip": "Austria\n2012 (Revenue)\n48637 / 222172",
"colour": "#4379bd",
"context": "{\"dataLink\":\"36_1097194719\",\"identifierQuery\":\"[L_COUNTRY={Austria}]\",\"dateInterval\":{\"from\":\"2012-01-01\",\"to\":\"2012-12-31\"}}"
},
{
"right": 48637,
"left": 222172,
"tip": "Austria\n2013 (Revenue)\n173535 / 222172",
"colour": "#b5cb04",
"context": "{\"dataLink\":\"36_-792896568\",\"identifierQuery\":\"[L_COUNTRY={Austria}]\",\"dateInterval\":{\"from\":\"2013-01-01\",\"to\":\"2013-12-31\"}}"
}
],
[
{
"right": 0,
"left": 42788,
"tip": "Canada\n2012 (Revenue)\n42788 / 384257",
"colour": "#4379bd",
"context": "{\"dataLink\":\"36_1288031050\",\"identifierQuery\":\"[L_COUNTRY={Canada}]\",\"dateInterval\":{\"from\":\"2012-01-01\",\"to\":\"2012-12-31\"}}"
},
{
"right": 42788,
"left": 384257,
"tip": "Canada\n2013 (Revenue)\n341469 / 384257",
"colour": "#b5cb04",
"context": "{\"dataLink\":\"36_-602060237\",\"identifierQuery\":\"[L_COUNTRY={Canada}]\",\"dateInterval\":{\"from\":\"2013-01-01\",\"to\":\"2013-12-31\"}}"
}
]
]
}
]
Examples
Overview
Content Tools