📈 Chart
The Chart widget is a powerful tool for visualizing complex data sets, trends, and real-time sensor telemetry. It supports multiple series and various rendering shapes to suit different types of analytical data.
⚙️ Properties (Props)
The Chart configuration is defined by the ChartWidget interface. It manages how data points are plotted and the scale of the axes.
| Property | Type | Description |
|---|---|---|
| Shape | Dropdown | Line: Connects points. Bar: Draws vertical bars. Scatter: Plots individual points. |
| Y Min / Max | number | Sets the vertical scale boundaries. Use null for auto-scaling. |
| Data Points | number[] | (Internal) The array of values currently plotted on the chart. |
| Point Count | number | The maximum number of points visible on the horizontal axis. |
📊 Data Visualization Modes
The shape property determines how the engine renders your data:
- Line Chart: Best for continuous data like temperature or heart rate. It provides a smooth visual trend over time.
- Bar Chart: Ideal for discrete comparisons, such as power consumption per hour or daily production counts.
- Scatter: Useful for statistical distribution or showing raw data samples without implied continuity.
🎨 Styling and Series
In the Inspector Panel, you can define multiple series:
- Series Color: Assign a unique color to each data line or bar set.
- Line Width: Adjust the thickness of the plot lines.
- Grid Lines: Toggle horizontal and vertical grid markers for better readability.
- Point Style: Choose if data points should be marked with dots, squares, or no markers at all.
⚡ Runtime API (Lua)
The Chart is designed for high-frequency updates via the Logic and Events system.
-- Add a single new value to a series (shifts old data left)
chart_sensor:add_value(0, sensor.read())
-- Set an entire array of data at once
local battery_history = {80, 78, 75, 72, 70}
chart_battery:set_data(0, battery_history)
-- Dynamically adjust the Y-axis scale
chart_sensor:set_range(0, 200)
-- Manually refresh the chart to redraw new points
chart_sensor:refresh()
PERFORMANCE TIP
For high-speed data (e.g., an oscilloscope view), limit the Point Count to the width of the widget in pixels. Drawing more points than there are available pixels can lead to unnecessary CPU overhead.
🚀 Next Steps
- Bar — Use for simple, single-value progress indicators.
- Meter — Use for real-time analog-style gauges.
- Logic and Events — Learn how to pipe Serial or MQTT data into your charts.