Building an IoT Dashboard with Python

An IoT dashboard is a web-based or GUI application that monitors, controls, and visualizes data from IoT devices. It collects real-time data from sensors, devices, or cloud services and displays it through graphs, charts, and alerts.

Use Cases:
✅ Smart home automation
✅ Industrial monitoring
✅ Weather stations
✅ Smart agriculture

Tech Stack for an IoT Dashboard

Component	Options
Backend	Flask, FastAPI, Django
Frontend	React, Vue.js, Dash
Database	MySQL, PostgreSQL, Firebase, MongoDB
IoT Communication	MQTT, WebSockets, HTTP APIs
Visualization	Plotly, Chart.js, Matplotlib

---

1. Setting Up the Backend with Flask

The backend collects data from IoT devices and serves it to the frontend.

Install Dependencies

pip install flask flask-socketio paho-mqtt pandas

Create a Flask Backend (app.py)

from flask import Flask, jsonify
from flask_socketio import SocketIO
import random

app = Flask(__name__)
socketio = SocketIO(app, cors_allowed_origins="*")

# Simulated IoT data
sensor_data = {"temperature": 25, "humidity": 60}

@app.route('/data', methods=['GET'])
def get_data():
    return jsonify(sensor_data)

def update_sensor_data():
    while True:
        sensor_data["temperature"] = random.uniform(20, 30)
        sensor_data["humidity"] = random.uniform(50, 70)
        socketio.emit("update", sensor_data)
        socketio.sleep(5)

@socketio.on("connect")
def connect():
    print("Client connected")
    socketio.start_background_task(update_sensor_data)

if __name__ == "__main__":
    socketio.run(app, debug=True)

This backend:
✔️ Serves real-time sensor data
✔️ Emits data updates via WebSockets

---

2. Connecting IoT Devices (ESP32, Raspberry Pi) Using MQTT

IoT devices send data via MQTT (Message Queuing Telemetry Transport).

Install MQTT Library

pip install paho-mqtt

Python Code for an IoT Device Sending Data via MQTT

import paho.mqtt.client as mqtt
import random
import time

broker = "broker.hivemq.com"  # Public MQTT broker
topic = "iot/sensor"

client = mqtt.Client()
client.connect(broker, 1883, 60)

while True:
    data = f'{{"temperature": {random.uniform(20,30)}, "humidity": {random.uniform(50,70)}}}'
    client.publish(topic, data)
    print(f"Published: {data}")
    time.sleep(5)

Simulates IoT sensor data and sends it to an MQTT broker.

---

3. Building a Real-Time IoT Dashboard Using Dash (Python Frontend)

Dash (by Plotly) helps build interactive web dashboards.

Install Dash

pip install dash plotly requests

Create a Dashboard (dashboard.py)

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import requests
import plotly.graph_objs as go
import time

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("IoT Dashboard"),
    dcc.Graph(id="live-graph"),
    dcc.Interval(id="interval", interval=5000, n_intervals=0)
])

@app.callback(
    Output("live-graph", "figure"),
    Input("interval", "n_intervals")
)
def update_graph(n):
    response = requests.get("http://127.0.0.1:5000/data").json()
    
    figure = go.Figure()
    figure.add_trace(go.Scatter(y=[response["temperature"]], name="Temperature", mode="lines+markers"))
    figure.add_trace(go.Scatter(y=[response["humidity"]], name="Humidity", mode="lines+markers"))
    figure.update_layout(title="Live Sensor Data", xaxis_title="Time", yaxis_title="Values")

    return figure

if __name__ == "__main__":
    app.run_server(debug=True)

Fetches data from Flask backend and displays real-time graphs.

---

4. Deploying the IoT Dashboard

Deploy Flask API using Docker

Create a Dockerfile:

FROM python:3.9
WORKDIR /app
COPY . /app
RUN pip install flask flask-socketio paho-mqtt
CMD ["python", "app.py"]

Run Flask App in a Docker Container

docker build -t iot-dashboard .
docker run -p 5000:5000 iot-dashboard

Deploy Dashboard Using Heroku or AWS

1. Use Heroku CLI

heroku create iot-dashboard
git push heroku main

2. Or deploy on AWS EC2, Lambda, or Firebase Hosting.