Horizontal Heat Map chartJSON used as input for Horizontal heat map chart rendering consists of multiple elements. Basic structure| Code Block |
|---|
{
"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. | 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_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" contentX 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 | Name | Description | Example |
|---|
colour | Color of the labels | #4e4e4e | labels | Array of labels to display | [ "2013", "2014", "2015" ] |
| |
Example: | Code Block |
|---|
"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 | Name | Description | Example |
|---|
colour | Color of the labels | #4e4e4e | labels | Array of labels to display | [ "Austria", "Canada" ] |
| |
Example: | Code Block |
|---|
"y_axis": {
"colour": "#e9e9e9",
"grid-colour": "#e9e9e9",
"steps": 1,
"offset": 1,
"min": 1,
"max": 2,
"labels": {
"colour": "#4e4e4e",
"labels": [ "Austria", "Canada" ]
}
}, |
"elements" contentEach 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 | Name | Description | Example |
|---|
left | Numerical value specifying the left position of a bar | 0 | right | Numerical value specifying the right position of a bar | 1 | tip | Tooltip text to display on mouse hover | "Austria\n2013 (Revenue)\n173535 / 222172" | colour | Color used for a bar | #b5cb04 | alpha | Alpha channel that specifies the opacity of the bar. | 0.25 | context | If defined, context will be send to the client as event parameter | |
| |
| Code Block |
|---|
"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| Attachments |
|---|
| upload | false |
|---|
| old | false |
|---|
| sortBy | name |
|---|
|
|