JSON used as input for Histogram chart rendering consists of multiple elements.
{ "x_axis": { "labels": { "labels": [ ... ] } } "y_axis": { "labels": { "labels": [ ... ] } } "elements": [ { "type": "bar", "hideGap": true, "values": [ ... ] } ] } |
Name | Description | Example | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
chartId | Chart view identifier. Refer to REST API. | chart_3-FDEp6Q41fb_s3fwVc7F9H | ||||||||||||||||||
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_3-FDEp6Q41fb_s3fwVc7F9H", "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": {} } |
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", "France", "Germany" ] } }, |
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 | 100000 | |||||||||
min | Minimal value displayed on the axis | 0 | |||||||||
max | Maximal value displayed on the axis | 800000 | |||||||||
labels | Nested object defining the axis labels
|
Example:
"y_axis": { "colour": "#e9e9e9", "grid-colour": "#e9e9e9", "steps": 100000, "min": 0, "max": 800000, "labels": { "colour": "#4e4e4e", "labels": [ { "text": "0 USD", "y": 0 }, { "text": "100.000 USD", "y": 100000 }, { "text": "200.000 USD", "y": 200000 }, { "text": "300.000 USD", "y": 300000 }, { "text": "400.000 USD", "y": 400000 }, { "text": "500.000 USD", "y": 500000 }, { "text": "600.000 USD", "y": 600000 }, { "text": "700.000 USD", "y": 700000 }, { "text": "800.000 USD", "y": 800000 } ] } } |
Each object in array elements describe one chart element. In example below we have only one element with text Revenue, that has type bar and contains array with 4 values. Each value object consists of label, tool tip, top, context. Colour is specified at the end of this element. The key visualisation part of histogram element is the hideGap value.
Name | Description | Example | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | Type of the chart. For histogram chart, the value is "bar" because it acts as a bar chart. | bar | |||||||||||||||
hideGap | Boolean value indicating if gap between bars should be hidden - value should be "true" for histogram chart. | true | |||||||||||||||
text | Name of the chart | ||||||||||||||||
font-size | Font size used for displaying text | ||||||||||||||||
colour | Color used for displayed text | ||||||||||||||||
values |
|
"elements": [ { "type": "bar", "hideGap": true, "text": "Revenue", "font-size": 10, "colour": "#4379bd", "values": [ { "top": 444835.123456789, "tip": "Austria\n444835.1", "label": "444.835", "context": "{\"dataLink\":\"3_-2043221543\",\"identifierQuery\":\"[L_COUNTRY={Austria}]\"}" }, { "top": 730974, "tip": "Canada\n730974", "label": "730.974", "context": "{\"dataLink\":\"3_-1852385212\",\"identifierQuery\":\"[L_COUNTRY={Canada}]\"}" }, { "top": 546650, "tip": "France\n546650", "label": "546.650", "context": "{\"dataLink\":\"3_-1863819183\",\"identifierQuery\":\"[L_COUNTRY={France}]\"}" }, { "top": 643782.34, "tip": "Germany\n643782.3", "label": "643.782", "context": "{\"dataLink\":\"3_-547347785\",\"identifierQuery\":\"[L_COUNTRY={Germany}]\"}" } ] } ] |