Speedometer chart
JSON used as input for Speedometer chart rendering consists of multiple elements.
Basic structure
{ "speedometer_axis": { "labels": { "labels": [ ... ] } } "elements": [ { "type": "speedometer", "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": {} }
"speedometer_axis" content
Speedometer axis is defined by min and max value, size of one step (steps) and labels. Each label consists of value on axis (y) and displayed text. You can specify also colour and grid-colour for T axis.
Name | Description | Example | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
colour | Color of the axis label | #e9e9e9 | |||||||||
grid-colour | Color of the axis grid | #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
| ||||||||||
fill-percent | Percentage amount of filled speedometer | 25 |
Example:
"speedometer_axis": { "colour": "#e9e9e9", "grid-colour": "#e9e9e9", "steps": 100000, "min": 0, "max": 800000, "fill-percent": 25, "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 } ] } }
"elements" content
Each object in array elements describe one chart element. In example below we have only one element that has type speedometer and contains array with 4 values. Each value object consists of value, label, tool tip and colour.
Name | Description | Example | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | Type of the chart. For speedometer chart, the value is "speedometer" | speedometer | |||||||||||||||
values |
|
"elements": [ { "type": "speedometer", "values": [ { "value": 444835.123456789, "label": "Austria", "tip": "Austria\n444835 USD", "colour": "#4379bd" }, { "value": 730974, "label": "Canada", "tip": "Canada\n730974 USD", "colour": "#b5cb04" }, { "value": 546650, "label": "France", "tip": "France\n546650 USD", "colour": "#ff4800" }, { "value": 643782, "label": "Germany", "tip": "Germany\n643782 USD", "colour": "#aabbcc" } ] } ]
Examples
Overview
Content Tools