Widgets are interactive data visualizations placed on dashboards. Dashgrid provides widgets optimized for
great user-experience, readability, and preformance.
Key Features
- Multiple Chart Types - Line, area, column, bar, scatter, and number visualizations, more coming soon
- Multi-Series Support - Display up to 10 variables in a single widget
- Flexible Positioning - Span multiple columns and rows on the dashboard grid
- Customizable Formatting - Configure axis labels, tooltips, colors, and display formats
- Real-Time Data - Automatic updates via WebSocket connections to data buckets
- Performance Optimized - Configurable data point limits for optimal rendering
Dashgrid provides currently six widget types to visualize your data:
- Line Chart - Connected data points with lines
- Area Chart - Lines with filled areas below
- Column Chart - Vertical bars
- Bar Chart - Horizontal bars
- Scatter Chart - Individual data points without connecting lines
- Number - Single numeric values (up to 4 values)
- More widget types will be added in the future
Position & Size
Widgets are positioned on the dashboard grid using three properties:
- Cell Index - The starting position in the grid
- Column Span - Number of columns the widget occupies (max. 3)
- Row Span - Number of rows the widget occupies (max. 2)
Axis
Configure axis display for chart widgets:
- X-Axis - Label format and visibility
- Y-Axis - Domain range (min/max), label format, and visibility
- Grid Lines - Horizontal and vertical grid visibility
Available formats for axis labels:
- str - Plain string
- int - Integer number
- dec1, dec2, dec3 - Decimal numbers with 1, 2, or 3 decimal places
- dateshort, datelong - Short and long date formats
- datetime - Full date and time
- monthyear - Month and year only
- timeshort12, timeshort24 - 12-hour or 24-hour short time
- timelong12, timelong24 - 12-hour or 24-hour long time
Configure how tooltips display data:
- Label Format - How labels appear (string, date formats, time formats)
- Value Format - How values appear (string, integer, decimal places)
- Unit - Optional unit displayed for values (e.g., "°C", "%", "USD")
Format options are the same as listed in the Axis section above.
Series
In Dashgrid widgets, series allow you to display multiple variables within a single widget. For example, a line chart can show temperature, humidity, and pressure as three separate series, each with its own line and color, label and value in tooltip.
Series Configuration
Each series in a widget has the following properties:
- Series Key - Numeric identifier (1-10) that maps to the data field in your data bucket
- Label - Human-readable name displayed in legends and tooltips
- Color - Visual color for distinguishing the series
- Shape Type - Interpolation method for line/area charts (monotone, linear, basis, step)
Most widget types support up to 10 series.
The Number widget supports up to 4 series.
Additional Options
- Show Records - Number of data points displayed (default: 200, range: 1-10,000). The amount of data points heavily affects user-experience, readability, and performance.
- Stacked - For multi-series charts, stack series on top of each other (available for area, bar, column charts)
Data & API
Each widget connects to a Data Bucket to receive data:
- Create a data bucket first
- Edit your widget and select a data bucket to connect to
- Configure which data series to display (identified by series keys)
Widgets automatically update in real-time when new data arrives in their connected data bucket.
