Circuit background

Connect Documentation

Deep Dive: Dashboards

Dashboards

Dashboards let you visualise your IoT data in real-time. Build custom monitoring screens with charts, gauges, status indicators, and control buttons.

Creating a Dashboard

  • Go to your project
  • Click Dashboards
  • Click New Dashboard
  • Give it a name (e.g., "Living Room Climate")

Adding Charts

Click the + button to add a chart. Each chart type serves a different purpose:

  • Line Chart - Trends over time (temperature, humidity)
  • Bar Chart - Comparisons (daily totals, category breakdown)
  • Gauge - Current value with thresholds (tank level, battery)
  • Boolean Status - On/off state (heater, pump, door)
  • Heartbeat - Device connectivity monitoring
  • Executions Table - Recent rule triggers and actions
  • Action Button - Manual control (turn on pump, reset device)

Line Chart

Shows data points over time. Perfect for monitoring trends.

Configuration

  • Name - Chart title
  • Sources - Schema field(s) to plot
  • Aggregation - How to combine values: avg, sum, min, max, count
  • Time Bucket - Grouping interval: 1m, 5m, 1h, 1d
  • Time Range - How far back to show: 1h, 24h, 7d, 30d

Overlays

Line charts support optional overlays:

Boolean Status Overlay - Shade the background based on a boolean field. Green when `heater_on` is true, red when false.

Action Execution Overlay - Show markers when actions fired. Vertical lines when "turn on heater" action executed.

Example: Temperature with Heater Status

1

This shows temperature over 24 hours, with the background shaded green when the heater was on.

Bar Chart

Compare values across categories or time periods.

Two Modes

Time-based - Group by time buckets:

1

Shows daily energy consumption for the past week.

Category-based - Group by a field value:

1

Shows average temperature per room.

Gauge

Display a single value with colour-coded thresholds.

Configuration

  • Name - Chart title
  • Source - Single schema field
  • Aggregation - last (current value), avg, min, max
  • Time Bucket - Required if aggregation isn't last
  • Min / Max - Scale range
  • Thresholds - Colour breakpoints

Thresholds

Define colour zones by value:

1

Example: Tank Level

1

Boolean Status

Simple on/off indicator for binary states.

Configuration

  • Name - Widget title
  • Source - Boolean field from schema
  • True Label - Text when true (default: "On")
  • False Label - Text when false (default: "Off")
  • True Colour - Colour when true (default: green)
  • False Colour - Colour when false (default: red)

Example: Heater Status

1

Heartbeat

Monitor device connectivity. Shows how long since the last payload.

Configuration

  • Name - Widget title
  • Schema - Which schema to monitor
  • Warning Seconds - Show yellow after this long
  • Critical Seconds - Show red after this long

Colour States

  • Green - Received payload within warning threshold
  • Yellow - Exceeded warning but not critical
  • Red - Exceeded critical threshold (device may be offline)

Example: Climate Sensor Heartbeat

1

If you expect readings every minute, you'll see green when working normally, yellow if 2+ minutes since last reading, red if 5+ minutes (something's wrong).

Executions Table

Shows recent rule triggers and action executions.

Configuration

  • Name - Widget title
  • Rule ID - Filter to specific rule (optional)
  • Limit - Number of rows to show (1-100)

What It Shows

Each row displays: timestamp, rule name, action executed, and status (success/failed). Great for debugging rules and seeing what's actually happening.

Action Button

Manually trigger an action from the dashboard.

Configuration

  • Name - Button label
  • Action ID - Which action to execute

Use Cases

  • Manual override - Turn heater on regardless of rules
  • Testing - Trigger webhook to verify it works
  • Emergency - Shut down pump immediately

When clicked, the action executes as if triggered by a rule. Commands are queued for the next device check-in.

Real-Time Updates

Dashboards update automatically when new data arrives:

  • Your device sends a payload
  • Server validates and stores it
  • WebSocket pushes update to your browser
  • Charts refresh instantly

No page reload needed. Just leave the dashboard open and watch your data flow in.

Dashboard Layout

Charts can be positioned and resized on a grid:

  • Drag to reposition
  • Resize from corners
  • Lock to prevent accidental moves

Each chart has position settings: x/y for grid position, w/h for width and height in grid units.

Tips

Start Simple

Begin with one or two charts. Add more as you understand your data patterns.

Group Related Data

Put temperature and humidity on the same line chart using multiple sources. Easier to spot correlations.

Use Heartbeats

Always add a heartbeat widget. The first sign of trouble is usually "device stopped sending data."

Name Things Clearly

"Living Room Temperature" beats "Line Chart 1". Future you will thank present you.

Check on Mobile

Dashboards work on phones. Resize charts to look good on smaller screens.

Next Steps

  • Rules and Actions - Automate responses to your data
  • Debugging - Troubleshoot when things go wrong