Stack Bar chartJSON used as input for Stack bar chart rendering consists of multiple elements. Basic structure| Code Block |
|---|
{
"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. | 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" |
| |
Example | Code Block |
|---|
{
"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 | Name | Description | Example |
|---|
colour | Color of the labels | #4e4e4e | labels | Array of labels to display. | [ "Austria", "Canada" ] |
| |
Example: | Code Block |
|---|
"x_axis": {
"colour": "#c7c7c7",
"grid-colour": "#c7c7c7",
"labels": {
"colour": "#4e4e4e",
"labels": [ "Austria", "Canada" ]
}
}, |
"y_axis" contentY 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 | Name | Description | Example |
|---|
colour | Color of the labels | #4e4e4e | labels | Array of label and values | [ { "text": "0 USD", "y": 0 }, { "text": "50.000 USD", "y": 50000 } ] |
| |
Example: | Code Block |
|---|
"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" contentEach 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 | Name | Description | Example |
|---|
colour | Color used for displayed text | #b5cb04 | text | Text of the key | Year 2013 | font-size | Font size used for displaying text | 12 |
| | values | Array of value arrays | Name | Description | Example |
|---|
top | Numerical value specifying the top position of a bar | 222172 | bottom | Numerical value specifying the bottom position of a bar | 48637 | | val | Numerical value specifying the value of a bar | 173535 | tip | Tooltip text to display on mouse hover | "Austria\n2013 (Revenue)\n173535 / 222172" | label | Value label displayed inside a bar (optional) | "Austria\n2013 (Revenue)\n(173535)" | topLabel | Value label displayed at the top of a bar (optional) | "222172 USD" | colour | Color used for a bar | #b5cb04 | context | If defined, context will be send to the client as event parameter | |
| |
| Code Block |
|---|
"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| Attachments |
|---|
| upload | false |
|---|
| old | false |
|---|
| sortBy | name |
|---|
|
|