Bar chart
JSON used as input for Horizontal bar chart rendering consists of multiple elements.
Basic structure
{ "x_axis": { "labels": { "labels": [ ... ] } } "y_axis": { "labels": { "labels": [ ... ] } } "elements": [ { "type": "hbar", "values": [ ... ] } ] }
Common elements
Name | Description | Example | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
chartId | Chart view identifier. Refer to REST API. | chart_3-32kmvvEujZ_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-32kmvvEujZ_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": {} }
"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 | 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:
"x_axis": { "colour": "#e9e9e9", "grid-colour": "#e9e9e9", "steps": 100000, "min": 0, "max": 800000, "labels": { "colour": "#4e4e4e", "labels": [ { "text": "0 EUR", "x": 0 }, { "text": "100.000 EUR", "x": 100000 }, { "text": "200.000 EUR", "x": 200000 }, { "text": "300.000 EUR", "x": 300000 }, { "text": "400.000 EUR", "x": 400000 }, { "text": "500.000 EUR", "x": 500000 }, { "text": "600.000 EUR", "x": 600000 }, { "text": "700.000 EUR", "x": 700000 }, { "text": "800.000 EUR", "x": 800000 } ] } },
"y_axis" content
Y axis in horizontal bar chart is empty in most cases, but one label could be defined 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 - every time 1 for this type of chart | 1 | |||||||||
offset | Offset of the axis - every time 1 for this type of chart | 1 | |||||||||
min | Minimal value displayed on the axis - every time 1 for this type of chart | 1 | |||||||||
max | Maximal value displayed on the axis - every time 1 for this type of chart | 1 | |||||||||
labels | Nested object defining the axis labels
|
Example:
"y_axis": { "colour": "#e9e9e9", "grid-colour": "#e9e9e9", "steps": 1, "offset" : 1, "min": 1, "max": 1, "labels": { "colour": "#4e4e4e", "labels": [ "Countries" ] } }
"elements" content
Each object in array elements describe one chart element. In example above we have four elements each with title, that have type horizontal bar and contains array with 1 value. Each value object consists of label, tool tip, right, context. Colour is specified at the end of each element.
Name | Description | Example | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | Type of the chart. For horizontal bar chart, the value is "hbar" | hbar | |||||||||||||||
text | Name of the chart | ||||||||||||||||
colour | Color used for displayed text | ||||||||||||||||
values |
|
"elements" : [ { "colour" : "#4379bd", "type" : "hbar", "text" : "Austria", "values" : [ { "right" : 444835.123456789, "tip" : "Austria\n444835", "label" : "444.835", "context" : "{\"dataLink\":\"3_-2043221543\",\"identifierQuery\":\"[L_COUNTRY={Austria}]\"}" } ] }, { "colour" : "#b5cb04", "type" : "hbar", "text" : "Canada", "values" : [ { "right" : 730974, "tip" : "Canada\n730974", "label" : "730.974", "context" : "{\"dataLink\":\"3_-1852385212\",\"identifierQuery\":\"[L_COUNTRY={Canada}]\"}" } ] }, { "colour" : "#ff4800", "type" : "hbar", "text" : "France", "values" : [ { "right" : 546650, "tip" : "France\n546650", "label" : "546.650", "context" : "{\"dataLink\":\"3_-1863819183\",\"identifierQuery\":\"[L_COUNTRY={France}]\"}" } ] }, { "colour" : "#2998ae", "type" : "hbar", "text" : "Germany", "values" : [ { "right" : 643782.34, "tip" : "Germany\n643782", "label" : "643.782", "context" : "{\"dataLink\":\"3_-547347785\",\"identifierQuery\":\"[L_COUNTRY={Germany}]\"}" } ] } ]
Examples