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