Storing and Visualizing: From Cloud to Dashboard

The cloud received your message. Now it needs to store it and make it visible. Let’s see what happens.

What the Cloud Does

When the cloud receives a message, it:

1. Validates - Checks if the message is valid JSON
2. Parses - Extracts device_id, timestamp, temperature
3. Stores - Saves it in a database
4. Serves - Makes it available to dashboards

Storing the Data

The cloud stores messages in a database. For time-series data (like temperature over time), it might use:

• Time-series database (InfluxDB, TimescaleDB) - Optimized for time-based data
• Regular database (PostgreSQL, MySQL) - Works fine for simple cases
• Cloud storage (AWS IoT Core, Azure IoT Hub) - Managed services

What gets stored:

• Device ID
• Timestamp
• Sensor values (temperature, humidity, etc.)
• Metadata (battery, signal strength)

Example database record:

device_id: room-101
timestamp: 2025-06-01T10:00:00Z
temperature_c: 23.4

The Data Path

Here’s how data flows from message to dashboard:

Step-by-Step Process

Step 1: Receive Message

• Cloud API endpoint receives HTTP POST or MQTT message
• Extracts the JSON payload

Step 2: Validate and Parse

• Checks if JSON is valid
• Extracts fields (device_id, timestamp, temperature_c)
• Validates data types and ranges

Step 3: Store in Database

• Inserts record into database
• Indexes by device_id and timestamp for fast queries

Step 4: Render in Dashboard

• Dashboard queries database for recent readings
• Fetches data for charts and current values
• Updates display

Simple Backend Code

Here’s what the backend might look like (pseudo-code):

# Backend endpoint
@app.post("/telemetry")
def receive_telemetry(message):
    # Validate JSON
    if not is_valid_json(message):
        return {"error": "Invalid JSON"}, 400
    
    # Parse
    data = json.loads(message)
    device_id = data["device_id"]
    timestamp = data["timestamp"]
    temperature = data["temperature_c"]
    
    # Store in database
    db.insert({
        "device_id": device_id,
        "timestamp": timestamp,
        "temperature_c": temperature
    })
    
    return {"status": "ok"}

Simple Frontend Code

Here’s what the dashboard might do (pseudo-code):

# Dashboard frontend
def render_dashboard():
    # Query database for last hour
    readings = db.query(
        "SELECT * FROM telemetry WHERE device_id = 'room-101' AND timestamp > NOW() - INTERVAL '1 hour'"
    )
    
    # Extract data for chart
    times = [r.timestamp for r in readings]
    temps = [r.temperature_c for r in readings]
    
    # Render chart
    chart = create_line_chart(times, temps)
    
    # Show current value
    current_temp = readings[-1].temperature_c
    display_current_value(current_temp)

Time Series Visualization

Dashboards show data over time. Here’s a simple example:

What Dashboards Show

Current Value Card

• Latest reading
• Status (OK, Warning, Critical)
• Last updated time

Time Series Chart

• Line chart showing temperature over time
• X-axis: time
• Y-axis: temperature
• Can zoom in/out, filter by time range

Historical Data Table

• List of recent readings
• Sortable by time or value
• Export to CSV

Alerts

• Show when temperature goes above/below thresholds
• Highlight unusual readings

The Complete Flow

1. Device reads sensor → creates JSON → sends to cloud
2. Cloud receives → validates → stores in database
3. Dashboard queries database → renders charts → updates display
4. You see the data on your screen

This happens continuously. Every 10 seconds, a new reading flows through this path.

What’s Next?

Now you know how data gets from sensor to dashboard. But what happens when things go wrong? In the next page, we’ll look at reliability and security.