Line chart
JSON used as input for Line chart rendering consists of multiple elements.
Basic structure
{
"x_axis": {
"labels": [ ... ]
}
"y_axis": {
"labels": {
"labels": [ ... ]
}
}
"elements": [
{
"type": "line",
"values": [ ... ]
]
}
Common elements
| Name | Description | Example | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
chartId | Chart view identifier. Refer to REST API. | chart_253-GZ9Q6t1MQt_rh7u3tAX91 | ||||||||||||||||||
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_253-GZ9Q6t1MQt_rh7u3tAX91",
"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 | #c7c7c7 | |||||||||
grid-colour | Color of the x-axis grid (horizontal) | #c7c7c7 | |||||||||
steps | Size of the steps of the axis | 1 | |||||||||
labels | Nested object defining the axis labels
|
Example:
"x_axis": {
"colour": "#c7c7c7",
"grid-colour": "#c7c7c7",
"steps": 1,
"labels": {
"colour": "#4e4e4e",
"labels": [ "2009", "2010", "2011", "2012" ]
}
},
"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 | #c7c7c7 | |||||||||
grid-colour | Color of the y-axis grid (vertical) | #c7c7c7 | |||||||||
steps | Size of the steps of the axis | 10 | |||||||||
min | Minimal value displayed on the axis | 0 | |||||||||
max | Maximal value displayed on the axis | 20000 | |||||||||
labels | Nested object defining the axis labels
|
Example:
"y_axis": {
"colour": "#c7c7c7",
"grid-colour": "#c7c7c7",
"steps": 2500,
"min": 12500,
"max": 30000,
"labels": {
"colour": "#4e4e4e",
"labels": [
{ "text": "12.500 km", "y": 12500 },
{ "text": "15.000 km", "y": 15000 },
{ "text": "17.500 km", "y": 17500 },
{ "text": "20.000 km", "y": 20000 },
{ "text": "22.500 km", "y": 22500 },
{ "text": "25.000 km", "y": 25000 },
{ "text": "27.500 km", "y": 27500 },
{ "text": "30.000 km", "y": 30000 }
]
}
}
"elements" content
Each object in array elements describe one chart element. In example above we have only one element with title Grade, that has type line and contains array with 4 values. Each value object consists of label, tool tip, value, context. Colour and dot-style is specified at the end of this line element.
| Name | Description | Example | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | Type of the chart. For line chart, the value is "line" | line | |||||||||||||||
text | Name of the chart | ||||||||||||||||
font-size | Font size used for displaying text | ||||||||||||||||
colour | Color used for displayed text | ||||||||||||||||
dot-style | Style of the dot
| ||||||||||||||||
values |
|
"elements": [
{
"type": "line",
"text": "Grade",
"font-size": 10,
"colour": "#19527d",
"dot-style": {
"dot-size": 5,
"halo-size": 2,
"type": "star"
},
"values": [
{
"value": 15183.327668348653,
"tip": "Year 2009<br>15.183,32 km",
"label": "15.183 km",
"context": "{\"identifierQuery\":\"\",\"dateInterval\":{\"to\":\"2009-12-31\",\"from\":\"2009-01-01\",\"period\":\"YEAR\"},\"dataLink\":\"fE1fR1JBREV8MjAwOTAxMDF8WXx8fHwyMDA5MDEwMXwyMDA5MTIzMXx8\"}"
},
{
"value": 27971.228181842624,
"tip": "Year 2010<br>27.971,22 km",
"label": "27.971 km",
"context": "{\"identifierQuery\":\"\",\"dateInterval\":{\"to\":\"2010-12-31\",\"from\":\"2010-01-01\",\"period\":\"YEAR\"},\"dataLink\":\"fE1fR1JBREV8MjAxMDAxMDF8WXx8fHwyMDEwMDEwMXwyMDEwMTIzMXx8\"}"
},
{
"value": 28280.286460244166,
"tip": "Year 2011<br>28.280,28 km",
"label": "28.280 km",
"context": "{\"identifierQuery\":\"\",\"dateInterval\":{\"to\":\"2011-12-31\",\"from\":\"2011-01-01\",\"period\":\"YEAR\"},\"dataLink\":\"fE1fR1JBREV8MjAxMTAxMDF8WXx8fHwyMDExMDEwMXwyMDExMTIzMXx8\"}"
},
{
"value": 13140.62901215068,
"tip": "Year 2012<br>13.140,62 km",
"label": "13.140 km",
"context": "{\"identifierQuery\":\"\",\"dateInterval\":{\"to\":\"2012-12-31\",\"from\":\"2012-01-01\",\"period\":\"YEAR\"},\"dataLink\":\"fE1fR1JBREV8MjAxMjAxMDF8WXx8fHwyMDEyMDEwMXwyMDEyMTIzMXx8\"}"
}
]
}
]
Examples
Overview
Content Tools