Horizontal Heat Map chart
JSON used as input for Horizontal heat map chart rendering consists of multiple elements.
Basic structure
{
"x_axis": {
"labels": {
"labels": [ ... ]
}
}
"y_axis": {
"labels": {
"labels": [ ... ]
}
}
"elements": [
{
"type": "multihbar",
"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 colour, grid-colour, steps and labels.
| 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 | 0 | |||||||||
labels | Nested object defining the axis labels
|
Example:
"x_axis": {
"colour": "#e9e9e9",
"grid-colour": "#e9e9e9",
"steps": 0,
"labels": {
"colour": "#4e4e4e",
"labels": [
"2013",
"2014",
"2015"
]
}
}
"y_axis" content
| Name | Description | Example | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
colour | Color of the axis label | #e9e9e9 | |||||||||
grid-colour | Color of the y-axis grid (horizontal) | #e9e9e9 | |||||||||
steps | Size of the steps of the axis | 1 | |||||||||
min | Minimal value displayed on the axis | 1 | |||||||||
max | Maximal value displayed on the axis | 2 | |||||||||
offset | Offset of the steps of the axis | 1 | |||||||||
labels | Nested object defining the axis labels
|
Example:
"y_axis": {
"colour": "#e9e9e9",
"grid-colour": "#e9e9e9",
"steps": 1,
"offset": 1,
"min": 1,
"max": 2,
"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 multihbar 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, alpha and context.
| Name | Description | Example | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | Type of the chart. For horizontal heat map chart, the value is "multihbar" | multihbar | |||||||||||||||||||||
values | Array of value arrays
|
"elements": [
{
"type": "multihbar",
"values": [
[
{
"right": 1,
"left": 0,
"tip": "Austria\n2012 (Revenue)\n48637 / 222172",
"colour": "#4379bd",
"alpha": "0.2156665431193521",
"context": "{\"dataLink\":\"36_1097194719\",\"identifierQuery\":\"[L_COUNTRY={Austria}]\",\"dateInterval\":{\"from\":\"2012-01-01\",\"to\":\"2012-12-31\"}}"
},
{
"right": 2,
"left": 1,
"tip": "Austria\n2013 (Revenue)\n173535 / 222172",
"colour": "#4379bd",
"alpha": "0.5501983721763353",
"context": "{\"dataLink\":\"36_-792896568\",\"identifierQuery\":\"[L_COUNTRY={Austria}]\",\"dateInterval\":{\"from\":\"2013-01-01\",\"to\":\"2013-12-31\"}}"
},
{
"right": 3,
"left": 2,
"tip": "Austria\n2014 (Revenue)\n109801 / 322172",
"colour": "#4379bd",
"alpha": "0.3794904932017772",
"context": "{\"dataLink\":\"36_-792896568\",\"identifierQuery\":\"[L_COUNTRY={Austria}]\",\"dateInterval\":{\"from\":\"2014-01-01\",\"to\":\"2014-12-31\"}}"
}
],
[
{
"right": 1,
"left": 0,
"tip": "Canada\n2012 (Revenue)\n42788 / 584257",
"colour": "#b5cb04",
"alpha": "0.2",
"context": "{\"dataLink\":\"36_1288031050\",\"identifierQuery\":\"[L_COUNTRY={Canada}]\",\"dateInterval\":{\"from\":\"2012-01-01\",\"to\":\"2012-12-31\"}}"
},
{
"right": 2,
"left": 1,
"tip": "Canada\n2013 (Revenue)\n341469 / 584257",
"colour": "#b5cb04",
"alpha": "1.0",
"context": "{\"dataLink\":\"36_-602060237\",\"identifierQuery\":\"[L_COUNTRY={Canada}]\",\"dateInterval\":{\"from\":\"2013-01-01\",\"to\":\"2013-12-31\"}}"
},
{
"right": 3,
"left": 2,
"tip": "Canada\n2014 (Revenue)\n192217 / 584257",
"colour": "#b5cb04",
"alpha": "0.6002370421955197",
"context": "{\"dataLink\":\"36_-602060237\",\"identifierQuery\":\"[L_COUNTRY={Canada}]\",\"dateInterval\":{\"from\":\"2014-01-01\",\"to\":\"2014-12-31\"}}"
}
]
]
}
]
Examples
Overview
Content Tools