# Building an IoT Dashboard: From Sensor to Chart in Real Time
By Govind Bajaj · 2025

Tags: iot, dashboard, mqtt, recharts, real-time
I built a temperature monitoring dashboard for a warehouse. 47 sensors. Live charts. Threshold alerts. Here's the complete sensor-to-screen pipeline.
I built a temperature monitoring dashboard for a warehouse with forty-seven sensors across five zones.

The dashboard shows live temperature readings on a floor plan, charts temperature trends over time, and fires alerts when any zone exceeds its threshold. It updates in real-time as sensor data flows through the pipeline.

Here is the complete sensor-to-screen pipeline I built.

## Architecture Overview

The pipeline has four stages. Sensors publish temperature readings to an MQTT broker every five seconds. A Node.js backend subscribes to all sensor topics, stores readings in MongoDB, and forwards them to the frontend via WebSocket. The React dashboard subscribes to WebSocket events and updates the UI in real-time.

## Sensor Configuration

Each sensor is an ESP32 microcontroller with a DHT22 temperature sensor. They connect to WiFi and publish to the MQTT broker using PubSubClient.

The key configuration is using retained messages so new subscribers immediately get the last reading.

## Backend Processing

The Node.js backend uses the mqtt package to subscribe to all temperature topics. When a message arrives, it stores the reading in MongoDB and emits it to all connected WebSocket clients.

Alert checking happens on the backend. If a reading exceeds the zone threshold, an alert event is emitted alongside the regular reading.

## Dashboard Components

The dashboard has three views. The floor plan shows all zones with color-coded temperature indicators. The chart view shows temperature trends over the last hour using Recharts. The alerts panel shows active and resolved alerts with timestamps.

## Data Flow

Sensor publishes to MQTT. Backend receives and stores. WebSocket broadcasts. React state updates. Chart re-renders with new data point. Total latency: 200-400ms from sensor to screen.

## Takeaways

- MQTT is ideal for IoT sensor data: lightweight, reliable, handles intermittent connections
- Use retained messages so new subscribers get the last reading immediately
- Process alerts on the backend, not the frontend — keeps business logic centralized
- Recharts handles real-time updates well with minimal configuration
- Store all readings in MongoDB for historical analysis and trend detection
- Total sensor-to-screen latency of 200-400ms is achievable with this architecture