Design Essentials for IoT Data Visualization Dashboards

A data dashboard is the most "impressive" deliverable in an IoT project, but it is also the part most easily turned into all flash and no substance. A good dashboard must first answer the question: "What does the person watching this screen actually care about?"

Define the Metrics First, Then Talk About Layout

The audience of a dashboard is usually managers or on-duty operators. What they need is situational awareness, not detailed data. We recommend organizing metrics into three layers:

1. Overview layer: total device count, online rate, alarm count — the global picture should be understandable within 3 seconds on a single screen;
2. Situation layer: map distribution, real-time curves, status proportions — to spot abnormal regions and trends;
3. Focus layer: rankings of key devices, a scrolling feed of the latest alarms — to guide the next response action.

Visual Hierarchy and Layout

• Place the map or core business chart in the center, with metric cards and charts on both sides, keeping the visual focus centered;
• A single screen should use no more than 4 chart types, and the colors should follow a two-tier system of "primary color + alert color";
• Use a large monospaced font for numbers and render units in a smaller size, so the width does not jump when values refresh.

Real-Time Design

• Polling (every 10–30 seconds) is sufficient for metric data; curves are better served by WebSocket push;
• The FastBee platform supports MQTT over WebSocket, so the frontend can subscribe to device data directly, eliminating the need for backend relay;
• Query historical trends with downsampling against the time-series database (such as TDengine) to avoid pulling all data points at once.

Common Anti-Patterns

• Cramming every chart onto one screen with text too small to read;
• Piling on 3D effects and spinning animations that steal the show;
• Displaying metrics that nobody owns — every metric should have a corresponding response process.