Skip to main content

​
Overview

MQTT Explorer’s data visualization feature transforms numeric MQTT message data into beautiful, interactive charts. Monitor sensor readings, track device metrics, and analyze time-series data with a powerful charting engine built on industry-standard visualization libraries.
Charts automatically update in real-time as new messages arrive, providing live visualization of your MQTT data streams.

​
Creating Charts

Add charts to visualize any topic with numeric values:
1

Select a Topic

Click on a topic in the tree that contains numeric data
2

Open Chart Panel

The chart panel appears at the bottom of the screen
3

Add Topic to Chart

Click “Add to Chart” or the chart icon in the topic details
4

View Visualization

The chart appears showing historical data points

​
Supported Data Types

Numeric Values
  • Integer values: 42, -10, 1000
  • Floating-point values: 23.5, -0.001, 3.14159
  • Scientific notation: 1.23e-4, 5.67e8
JSON Paths
  • Extract numeric values from JSON: {"temperature": 23.5}
  • Specify dot-path to nested values: data.sensors[0].value
  • Chart multiple properties from same topic
Not Supported
  • Boolean values (true/false)
  • String values
  • Complex objects or arrays
For topics with JSON payloads, you can chart specific numeric fields by specifying a dot-path like temperature.sensor1 or metrics.cpu.usage.

​
Chart Interface

Each chart displays comprehensive information:

​
Chart Components

Header
  • Title: Topic path being charted
  • Dot Path: JSON path to the value (if applicable)
  • Settings Button: Access chart configuration
  • Actions: Pause, reset, move, and remove controls
Chart Area
  • Line Graph: Plots values over time
  • Data Points: Individual message values shown as dots
  • Axes: Time (X-axis) and Value (Y-axis)
  • Grid Lines: Visual reference for reading values
  • Tooltip: Hover to see exact values and timestamps
Interactive Elements
  • Hover over data points to see details
  • Smooth animations when new data arrives
  • Responsive sizing based on window width

​
Chart Settings

Customize each chart’s appearance and behavior:
Choose from a palette of predefined colors:
  • Red, Orange, Yellow
  • Green (multiple shades)
  • Blue (multiple shades)
  • Purple, Pink
  • Gray (multiple shades)
Theme Aware: Colors automatically adjust for light/dark mode to maintain visibility.
Control how data points are connected:Line Types
  • Linear: Straight lines between points (default)
  • Step: Horizontal lines with vertical transitions
  • Step Before: Transition before each point
  • Step After: Transition after each point
  • Basis: Smooth curved line (B-spline)
  • Cardinal: Smooth curve with tension control
  • Catmull-Rom: Smooth interpolation through points
  • Monotone: Smooth curve preserving monotonicity
  • Natural: Natural cubic spline
Best For
  • Linear: General purpose, most data types
  • Step: Digital signals, state changes
  • Smooth curves: Temperature, gradual changes
  • Monotone: Data that should never decrease then increase between points
Control how much historical data is shown:Preset Ranges
  • Last 1 minute
  • Last 5 minutes
  • Last 15 minutes
  • Last 30 minutes
  • Last 1 hour
  • Last 6 hours
  • Last 24 hours
  • All data (since connection)
Custom Range
  • Specify start and end times
  • Date/time picker interface
  • Zoom into specific time periods
Control the vertical scale:Auto Range (Default)
  • Automatically scales to fit all data
  • Adjusts as new data arrives
  • Optimal for varying values
Fixed Range
  • Set minimum and maximum Y values
  • Useful for percentage data (0-100)
  • Maintains consistent scale across time
  • Good for comparing multiple charts
Example: Set 0-100 for percentage values, 0-40 for temperature in Celsius
Adjust chart height:
  • Small (100px)
  • Medium (150px) - default
  • Large (200px)
  • Extra Large (300px)
Useful for focusing on specific metrics or viewing multiple charts at once.

​
Chart Actions

​
Pause/Resume

Freeze the chart to examine data: Pause
  • Click the pause button
  • Chart stops updating with new data
  • Frozen snapshot for detailed inspection
  • Useful during rapid data changes
Resume
  • Click play button
  • Chart resumes real-time updates
  • Previously paused data is preserved
Pause charts during debugging to capture and analyze specific time periods without data scrolling away.

​
Reset Data

Clear historical data and start fresh:
1

Click Reset

Click the reset/refresh icon in chart actions
2

Confirm

Confirm you want to clear historical data
3

Data Cleared

Chart clears and begins collecting new data points
Use Cases for Reset
  • After making device configuration changes
  • Before starting a specific test scenario
  • When chart becomes cluttered with old data
  • To measure performance from a fresh baseline

​
Move Up

Reorder charts in the panel:
  • Click the up arrow to move chart higher in the list
  • Organize charts by priority or workflow
  • Useful when monitoring multiple metrics

​
Remove Chart

Delete a chart from the panel:
  • Click the X or close button
  • Chart is removed immediately
  • Can be re-added anytime from the topic details
Removing a chart also clears its historical data. You’ll need to collect new data if you re-add the chart.

​
Multiple Charts

Chart multiple topics simultaneously: Benefits
  • Compare related metrics side-by-side
  • Identify correlations between sensors
  • Monitor system state holistically
  • Track multi-device behaviors
Best Practices
  • Use consistent color schemes for related topics
  • Set similar Y-axis ranges for comparable data
  • Order charts logically (by location, device, or metric type)
  • Use chart titles and dot-paths to distinguish topics

Temperature Monitoring

Chart temperature sensors from multiple rooms to compare thermal zones

Device Health

Monitor CPU, memory, and network metrics for IoT devices

Power Consumption

Track power usage across multiple circuits or devices

Environmental Sensors

Compare humidity, pressure, and air quality readings

​
Chart Performance

Optimized for real-time data: High-Performance Rendering
  • Built on Visx (Airbnb’s visualization library)
  • Smooth 60fps updates
  • Efficient rendering with React hooks
  • Throttled updates for high-frequency topics
Data Management
  • Circular buffer stores up to 500 data points per chart
  • Automatic data compaction for long-running sessions
  • Configurable capacity (default: 500 messages)
  • Memory-efficient storage
Update Throttling
  • Updates throttled to max every 300ms
  • Prevents UI lag with high-frequency sensors
  • Batches multiple messages for smooth visualization
For extremely high-frequency topics (>10 msg/sec), consider using MQTT topic aggregation or sampling before visualizing.

​
Tooltip Details

Hover over any data point to see: Time Information
  • Full timestamp (date and time)
  • Time-first format for easy reading
Value Information
  • Formatted value (with appropriate decimals)
  • Raw unformatted value
  • Unit label (if available)
Visual Feedback
  • Highlighted data point (larger circle)
  • Emphasized color
  • Tooltip follows cursor

​
Export Chart Data

While direct export is not yet available, you can: Current Options
  • Screenshot the chart for reports
  • Copy individual values from message history
  • Use browser dev tools to access data
Planned Features
  • Export to CSV
  • Export to JSON
  • Copy chart image
  • Share chart configuration

​
Common Chart Patterns

​
Temperature Sensors

Settings Recommendation
  • Interpolation: Monotone or Natural (smooth curves)
  • Time Range: Last 1-6 hours
  • Y-Axis: Fixed range (e.g., 15-30°C for indoor)
  • Color: Blue or red based on preference

​
Digital Signals

Settings Recommendation
  • Interpolation: Step or Step After
  • Time Range: Last 5-15 minutes
  • Y-Axis: Fixed 0-1 or 0-100
  • Color: Green (on) or red (off)

​
Power/Energy Monitoring

Settings Recommendation
  • Interpolation: Linear
  • Time Range: Last 24 hours
  • Y-Axis: Auto or fixed based on max load
  • Color: Yellow or orange

​
Network/Performance Metrics

Settings Recommendation
  • Interpolation: Basis (smooth)
  • Time Range: Last 15-60 minutes
  • Y-Axis: Fixed (0-100 for percentages)
  • Color: Multiple colors for multiple metrics

​
Accessibility

  • Keyboard Navigation: Focus and navigate charts with Tab
  • ARIA Labels: Chart elements labeled for screen readers
  • High Contrast: Theme-aware colors maintain visibility
  • Tooltips: Accessible data point information

​
Troubleshooting

Causes:
  • Topic has no numeric values
  • No messages received since chart was added
  • Value is nested in JSON without dot-path specified
  • Data type is not numeric
Solutions:
  • Verify topic contains numbers
  • Wait for new messages
  • Specify correct dot-path for JSON values
  • Check message format in Details tab
Causes:
  • Chart is paused
  • Connection lost to broker
  • Topic stopped publishing
Solutions:
  • Click resume/play button
  • Check connection status
  • Verify device is still sending messages
Causes:
  • Wrong dot-path for JSON extraction
  • Value includes units (e.g., “23°C”)
  • Scientific notation not recognized
Solutions:
  • Verify dot-path in chart settings
  • Publish numeric values only (no units)
  • Check message payload format
Causes:
  • Too many charts active
  • Extremely high message rate (>100/sec)
  • Large time range with thousands of points
Solutions:
  • Remove unused charts
  • Reduce message frequency at source
  • Use shorter time ranges
  • Limit to 5-10 active charts

​
Best Practices

Use Descriptive Colors

Choose colors that make sense (blue for cold, red for hot, green for OK status)

Set Appropriate Time Ranges

Match time range to data frequency (minutes for fast sensors, hours for slow ones)

Limit Active Charts

Keep 3-7 charts visible for best performance and readability

Pause for Analysis

Pause charts when you need to study specific data patterns

Reset After Changes

Clear data after device configuration changes to establish new baseline

Document Settings

Keep notes on useful chart configurations for your specific setup