Box Plot chart
JSON used as input for Box Plot chart rendering consists of multiple elements.
Basic structure
{
"x_axis": {
"labels": {
"labels": [ ... ]
}
}
"y_axis": {
"labels": {
"labels": [ ... ]
}
}
"elements": [
{
"type": "box_plot",
"values": [ ... ]
}
]
}
Common elements
| 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": {}
}
"x_axis" content
| Name | Description | Example | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
colour | Color of the axis label | #e9e9e9 | |||||||||
grid-colour | Color of the x-axis grid (horizontal) | #e9e9e9 | |||||||||
labels | Nested object defining the axis labels
|
Example:
"x_axis": {
"colour": "#e9e9e9",
"grid-colour": "#e9e9e9",
"labels": {
"colour": "#4e4e4e",
"labels": [ "Austria", "Canada" ]
}
},
"y_axis" content
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": 1000000,
"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 },
{ "text": "900.000 USD", "y": 900000 },
{ "text": "1.000.000 USD", "y": 1000000 }
]
}
}
"elements" content
Each object in array elements describe one chart element. In example below we have only one element with text Revenue, that has type box_plot and contains array with 2 values. Each value object consists of numbers high, top, bottom, low and tooltips tip, tipHigh, tipLow and labels labelTop, labelBottom. There are also colour, median, average, whiskers, outliers and confidence interval specified for this element.
| Name | Description | Example | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | Type of the chart. For box plot chart, the value is "box_plot" | box_plot | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
text | Name of the chart | Revenue | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
colour | Color used for box plots | #ff8000 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
values | JSON array that contains multiple box plot values with following structure:
|
"elements": [
{
"type": "box_plot",
"text": "Revenue",
"colour": "#4379bd",
"values": [
{
"high": 500000,
"top": 444835.123456789,
"bottom": 400000,
"low": 300000,
"tip": "Austria\n444.835 - 400.000",
"tipHigh": "Austria\n500.000",
"tipLow": "Austria\n300.000",
"labelTop": "Top: 444.835",
"labelBottom": "Bottom: 400.000",
"median": {
"value": 426180.5,
"tip": "Austria\nMedian: 426.180"
},
"avg": {
"value": 429999.3,
"tip": "Austria\nAverage: 429.999"
},
"whiskers": [
{
"value": 500000,
"label": "High: 500.000",
"tip": "Austria\nHigh: 500.000"
},
{
"value": 300000,
"label": "Low: 300.000",
"tip": "Austria\nLow: 300.000"
}
],
"outliers": [
{
"value": 555000,
"tip": "Austria\nMaximum: 555.000"
},
{
"value": 299000,
"tip": "Austria\nMinimum: 299.000"
}
],
"confidence": {
"top": 430000,
"bottom": 410000,
"tip": "This is confidence interval"
}
},
{
"high": 880000,
"top": 730974,,
"bottom": 680000,
"low": 480000,
"tip": "Canada\n730.974 - 680.000"
}
]
}
]
Examples
Overview
Content Tools