Purpose: The LineChart widget is designed to visualize data points over a continuous interval or time series. It is the standard choice for tracking a metric’s history to identify trends, patterns, or anomalies.
Table Of Contents
Anatomy #
- Title: The name of the chart.
- Line: A line connecting a series of data points, showing the progression of the data.
- X-Axis: Displays the labels for each data point, typically representing time or sequence.
- Y-Axis: Displays the scale for the values.
- Tooltip: Appears when hovering over the chart to show precise values.
- Expand Button: If a “Large View” is configured, this button appears to open a more detailed, often scrollable, view of the chart.
Configuration Settings #
When adding a LineChart widget in the Asset Editor, you will be presented with the following settings.
| Group | Setting | UI Control | Description |
|---|---|---|---|
| Datasource | Datasource | Dropdown | The datasource to stream data from. |
| Data Key | Text Input | The top-level key in your JSON payload that contains the nested object with your chart data. | |
| Display | Title | Text Input | The display name shown at the top of the chart. |
| Data Mapping | Labels Key | Text Input | The key inside the nested object that points to the array of strings for the X-axis labels (e.g., timestamps). Defaults to "labels". |
| Values Key | Text Input | The key inside the nested object that points to the array of numbers for the Y-axis values. Defaults to "values". | |
| Alerts | – | – | Not supported yet. |
| Floating Icon | – | – | Not supported yet. |
Data Schema #
The LineChart widget expects the payload to contain a key (matching the widget’s Data Key) that points to a nested JSON object. This object must contain two arrays: one for labels and one for values. The arrays must have the same number of elements.
Example:
- Data Key:
"server_cpu_load" - Labels Key:
"timestamps" - Values Key:
"cpu_percent"
Expected JSON Payload:
{
"server_cpu_load": {
"timestamps": ["14:00", "14:05", "14:10", "14:15", "14:20"],
"cpu_percent": [15.2, 18.0, 17.5, 25.3, 22.1]
}
}
Use Cases #
- Tracking a sensor’s temperature over the last hour.
- Monitoring CPU or memory usage of a server over time.
- Visualizing a stock price history.
- Showing daily energy consumption for a building.
