Data Visualization

​

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.

​

Creating Charts

Add charts to visualize any topic with numeric values:

​

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

​

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:

Color Settings

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.

Interpolation Settings

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

Time Range Settings

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

Y-Axis Range Settings

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

Chart Size

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

​

Reset Data

Clear historical data and start fresh: 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

​

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

​

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

​

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

Chart shows 'No Data'

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

Chart not updating

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

Chart shows incorrect values

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

Chart performance issues

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

​

Related Features

• Topic Visualization - Navigate and select topics to chart
• Message Inspection - View exact numeric values
• Search & Filter - Find chartable numeric topics quickly