Purpose: The BarChart widget is used to visualize a dataset containing multiple categories and their corresponding numerical values. It is ideal for comparing values across different items at a single point in time, such as the output of several machines.
Table Of Contents
Anatomy #
- Title: The name of the chart.
- Bars: A series of vertical bars where the height of each bar represents its value.
- X-Axis: Displays the labels for each category.
- Y-Axis: Displays the scale for the values.
Configuration Settings #
When adding a BarChart 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. Defaults to "labels". |
| Values Key | Text Input | The key inside the nested object that points to the array of numbers for the bar values. Defaults to "values". | |
| Alerts | – | – | Not supported yet. |
| Floating Icon | – | – | Not supported yet. |
Data Schema #
The BarChart 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:
"production_output" - Labels Key:
"machines" - Values Key:
"units_per_hour"
Expected JSON Payload:
{
"production_output": {
"machines": ["Machine A", "Machine B", "Machine C"],
"units_per_hour": [112, 124, 98]
}
}
Use Cases #
- Comparing the production output of multiple factory lines.
- Visualizing error counts by category.
- Showing inventory levels for a set of products.
