1284  Visualization Tools for IoT Dashboards

1284.1 Learning Objectives

By the end of this chapter, you will be able to:

  • Evaluate and select appropriate visualization tools based on project requirements
  • Configure Grafana data sources for IoT time-series databases
  • Create effective dashboard panels using time-series, gauge, and geomap visualizations
  • Implement template variables for dynamic, reusable dashboards
  • Configure alerting rules with appropriate notification channels
  • Decide when to build custom dashboards vs. using off-the-shelf tools
TipMinimum Viable Understanding: Choosing Visualization Tools

Core Concept: Tool selection depends on your constraints - Grafana for time-series monitoring, ThingsBoard for full IoT platforms, Node-RED for rapid prototypes, and custom development for unique requirements.

Why It Matters: Choosing Grafana when you need a complete IoT platform means building device management from scratch. Choosing ThingsBoard when you only need charts means learning unnecessary complexity. Match the tool to the job.

Key Takeaway: Start with Grafana for monitoring dashboards (30 minutes to first dashboard). Graduate to ThingsBoard when you need device management. Use Node-RED for prototypes. Build custom only when off-the-shelf tools cannot meet requirements.

1284.2 Introduction

With hundreds of visualization tools available, choosing the right one for your IoT project requires understanding each tool’s strengths and trade-offs. This chapter covers the most popular options for IoT visualization: Grafana for time-series monitoring, ThingsBoard for complete IoT platforms, Node-RED for rapid prototyping, and custom development for unique requirements.

1284.3 Tool Comparison Overview

Tool Learning Curve Time to Dashboard Customization Cost Best Use Case
Grafana Medium 30 minutes Medium Free/Paid Time-series monitoring
InfluxDB + Chronograf Medium 1 hour Low Free/Paid InfluxDB deployments
ThingsBoard High 2-4 hours High Free/Paid Full IoT platform
Node-RED Low 15 minutes Low Free Prototypes, demos
Custom (D3.js) Very High Days/weeks Very High Dev time Unique requirements

Decision tree for selecting IoT visualization tools based on requirements including time-to-deploy, customization needs, and infrastructure constraints

Flowchart diagram
Figure 1284.1: Decision tree for selecting IoT visualization tools

1284.4 Grafana

The industry standard for time-series visualization.

1284.4.1 Key Features

  • Multi-source support: InfluxDB, Prometheus, PostgreSQL, MySQL, MQTT, and 100+ plugins
  • Beautiful, responsive UI: Production-ready out of the box
  • Powerful query editor: Transformations and calculations
  • Built-in alerting: Multiple notification channels
  • Template variables: Dynamic dashboards without code
  • Annotations: Mark events on charts
  • User management: Roles and permissions

1284.4.2 Strengths

  • Free and open source (OSS version)
  • Large community and extensive documentation
  • Enterprise features available (Grafana Cloud, on-prem Enterprise)
  • Rapid development - dashboard in minutes

1284.4.3 Weaknesses

  • Focused on time-series (less suitable for non-temporal data)
  • Limited native mobile app
  • Complex queries require learning specific query languages

1284.4.4 Best For

Time-series IoT monitoring, DevOps metrics, industrial dashboards

1284.4.5 Typical Stack

Sensors -> MQTT -> Telegraf -> InfluxDB -> Grafana

1284.5 InfluxDB + Chronograf

Native time-series database with integrated visualization.

1284.5.1 Key Features

  • Chronograf UI designed specifically for InfluxDB
  • Flux query language for advanced transformations
  • Tight integration with InfluxDB’s TICK stack
  • Pre-built dashboard templates
  • Kapacitor integration for alerting

1284.5.2 Strengths

  • Optimized performance for InfluxDB queries
  • Consistent experience across stack
  • Time-series specific features (retention, downsampling)

1284.5.3 Weaknesses

  • Locked to InfluxDB (can’t easily use other sources)
  • Smaller community than Grafana
  • Less polished UI

1284.5.4 Best For

InfluxDB-centric deployments, when you want a complete integrated stack

1284.6 ThingsBoard

Open-source IoT platform with built-in dashboards.

1284.6.1 Key Features

  • Full IoT platform: Device management, data collection, dashboards
  • Widget-based dashboard builder: Drag-and-drop interface
  • Rule engine: Alerts and automation
  • Multi-tenancy support: Serve multiple customers
  • Mobile app: iOS/Android
  • Integration APIs: HTTP, MQTT, CoAP

1284.6.2 Strengths

  • All-in-one solution (no separate DB, broker, dashboard)
  • IoT-specific features (device provisioning, firmware updates)
  • Good for commercial IoT deployments

1284.6.3 Weaknesses

  • Steeper learning curve
  • Resource intensive
  • Less flexible for custom data sources

1284.6.4 Best For

Complete IoT platform deployments, commercial products, multi-tenant SaaS

1284.7 Node-RED Dashboard

Low-code, flow-based dashboard creation.

1284.7.1 Key Features

  • Drag-and-drop dashboard creation
  • Integrated with Node-RED flow editor
  • Widgets: gauges, charts, buttons, sliders, forms
  • Real-time updates via WebSocket
  • Rapid prototyping

1284.7.2 Strengths

  • Fastest time to first dashboard
  • No coding required for basic dashboards
  • Great for demos and quick projects
  • Excellent for Raspberry Pi and edge devices

1284.7.3 Weaknesses

  • Limited customization without coding
  • Not suitable for production-scale deployments
  • Basic UI compared to Grafana/ThingsBoard

1284.7.4 Best For

Prototypes, demos, home automation, education, edge dashboards

1284.8 Custom Development

Building dashboards from scratch using web frameworks.

1284.8.2 Strengths

  • Complete control over appearance and functionality
  • Can integrate deeply into existing applications
  • Custom interactions and workflows
  • Unique requirements possible

1284.8.3 Weaknesses

  • Significant development time
  • Ongoing maintenance burden
  • Need frontend development expertise
  • Building features that tools provide for free

1284.8.4 Best For

Embedded in products, unique UX requirements, existing app integration

1284.9 Building a Grafana Dashboard

A practical walkthrough of creating a production-ready IoT dashboard.

1284.9.1 Step 1: Connecting Data Sources

Grafana supports 100+ data sources. Most common for IoT:

InfluxDB Connection:

{
  "name": "IoT Sensors",
  "type": "influxdb",
  "url": "http://localhost:8086",
  "database": "sensor_data",
  "user": "grafana_reader",
  "secureJsonData": {
    "password": "your_password"
  }
}

MQTT Connection (via plugin):

{
  "name": "MQTT Broker",
  "type": "mqtt",
  "url": "mqtt://broker.example.com:1883",
  "topics": [
    "sensors/temperature/#",
    "sensors/humidity/#"
  ]
}

PostgreSQL Connection (for device metadata):

{
  "name": "Device DB",
  "type": "postgres",
  "host": "localhost:5432",
  "database": "iot_devices",
  "user": "grafana"
}

1284.9.2 Step 2: Panel Types

Each panel type serves specific visualization needs.

Time Series Panel: The default for time-based data.

  • Query: SELECT mean("temperature") FROM "sensors" WHERE $timeFilter GROUP BY time($__interval), "location"
  • Options: Multiple Y-axes, thresholds, fill opacity, line width
  • Use: Temperature trends across multiple rooms

Stat Panel: Single value with optional sparkline.

  • Query: SELECT last("occupancy") FROM "sensors" WHERE location='lobby'
  • Options: Color thresholds, unit formatting, trend direction
  • Use: Current building occupancy with change indicator

Gauge Panel: Visual indicator of current value vs. range.

  • Query: SELECT mean("battery") FROM "devices" WHERE $timeFilter
  • Options: Min/max, thresholds (green/yellow/red), angle
  • Use: Average battery level across device fleet

Table Panel: Tabular data with sorting and formatting.

  • Query: SELECT device_id, last(temperature), last(battery) FROM "sensors" GROUP BY device_id
  • Options: Column overrides, cell formatting, sorting
  • Use: Device inventory with current status

Geomap Panel: Geographic visualization.

  • Query: Must return latitude, longitude, and value
  • Options: Basemap selection, marker styles, heatmap layers
  • Use: Vehicle fleet locations with status colors

1284.9.3 Step 3: Variables and Templating

Variables make dashboards dynamic and reusable.

Location Variable (dropdown selector):

-- Query to populate variable
SELECT DISTINCT("location") FROM "sensors"

Use in panel query:

SELECT mean("temperature")
FROM "sensors"
WHERE location = '$location' AND $timeFilter

Time Range Variable:

-- Grafana provides $__timeFilter automatically
SELECT mean("value")
FROM "sensors"
WHERE $timeFilter
GROUP BY time($__interval)

Device Variable (multi-select):

-- Allow selecting multiple devices
SELECT DISTINCT("device_id") FROM "sensors"

Dashboard now adapts to user selections without creating separate dashboards for each location or device.

1284.9.4 Step 4: Alerting

Grafana alerting evaluates conditions and sends notifications.

Alert Rule Example (High Temperature):

name: High Temperature Alert
condition:
  - query: A
    reducer: last
    evaluator:
      type: gt
      params: [30]
interval: 60s
for: 5m
annotations:
  description: "Temperature in {{ $labels.location }} is {{ $value }}C"
notifications:
  - slack-channel
  - email-oncall

Notification Channels:

  • Email
  • Slack
  • PagerDuty
  • Webhook (custom integrations)
  • Microsoft Teams
  • Telegram

Alert States:

  • OK: Condition is false
  • Pending: Condition true but not for duration (“for” period)
  • Alerting: Condition true for duration, notifications sent
  • No Data: Query returns no data
  • Error: Query failed

Grafana dashboard architecture showing data sources connected through queries to panels with alerting and templating components

Flowchart diagram
Figure 1284.2: Grafana dashboard architecture and components

1284.10 Tool Selection Decision Guide

Use this framework to select the right tool:

1284.10.1 Start with Requirements

  1. What data sources do you have?
    • Time-series databases -> Grafana
    • Need complete IoT platform -> ThingsBoard
    • Simple prototype -> Node-RED
  2. Who are the users?
    • Technical operations -> Grafana
    • Business stakeholders -> Custom or ThingsBoard
    • Quick demo -> Node-RED
  3. What’s your timeline?
    • Need it today -> Node-RED
    • Have a week -> Grafana
    • Building a product -> ThingsBoard or Custom
  4. What’s your budget?
    • Zero budget -> All have free tiers
    • Enterprise features needed -> Grafana Enterprise, ThingsBoard PE
    • Custom development -> Factor in ongoing maintenance

1284.10.2 Migration Path

Most IoT projects follow this progression:

  1. Prototype (Week 1): Node-RED Dashboard for proof-of-concept
  2. Development (Month 1-3): Grafana for operational monitoring
  3. Production (Month 3+): Grafana + custom panels, or ThingsBoard for full platform
  4. Scale (Year 1+): Custom development for unique requirements, Grafana for monitoring

1284.11 Best Practices for Tool Usage

1284.11.1 Grafana Best Practices

  • Use template variables for reusable dashboards
  • Create hierarchical dashboards: Overview -> Category -> Detail
  • Use folders to organize by team or function
  • Set up alert rules with appropriate “for” durations to avoid flapping
  • Use dashboard playlists for NOC displays

1284.11.2 ThingsBoard Best Practices

  • Design rule chains carefully - they can become complex
  • Use dashboard states for multi-screen workflows
  • Leverage entity views for multi-tenant deployments
  • Plan your data model (devices, attributes, telemetry) early

1284.11.3 Node-RED Best Practices

  • Keep flows simple and modular
  • Use link nodes to connect flows without spaghetti
  • Back up flows regularly (export to JSON)
  • Don’t use for production-scale deployments

1284.12 Summary

Selecting the right visualization tool depends on your specific requirements:

  1. Grafana: Best for time-series monitoring with quick setup and extensive plugin ecosystem
  2. ThingsBoard: Best for complete IoT platforms with device management and multi-tenancy
  3. Node-RED: Best for rapid prototyping and edge device dashboards
  4. Custom development: Best for unique requirements that off-the-shelf tools cannot meet

Start simple (Node-RED or Grafana), then migrate to more complex solutions as requirements grow. The best tool is the one that solves your problem with minimal complexity.

1284.13 What’s Next

Put these tools into practice with hands-on labs: