← Back to Dashboard

ThingSpeak Data Observatory

A powerful, interactive dashboard for visualizing environmental and server data from multiple ThingSpeak channels. This dashboard provides advanced filtering, grouping, and visualization options not available in the standard ThingSpeak interface.

Overview

This single-page application connects to ThingSpeak channels and embeds their charts in a unified dashboard interface. Each channel has its own control panel with the following features:

Quick Presets Explained

Preset Use Case Settings
Default (600) General monitoring 600 data points, raw data, dynamic updates on
Last 2 Days (30m avg) Short-term trends 100 points, 30-minute averages, dynamic updates
All Data (Daily Avg) Long-term historical view 8000 points, daily averages, dynamic updates off

Control Panel Options

Select Field

Click any field button to display that specific data series on the chart. The active field is highlighted in blue.

Data Points

Grouping / Smoothing

Reduce noise and see trends more clearly by grouping data points:

Method Description
None (Raw) Display data exactly as recorded
Average Smooths out fluctuations by averaging
Median Best for ignoring outliers
Sum Useful for cumulative data

Minutes per Group: Set the time window for grouping. Examples:

Date Range (Optional)

Set specific start and end times to focus on a particular period. When a date range is set, the Results count is ignored.

Channels Configured

1. Meteo Station 1 (Channel #70336)

Environmental data from weather station 1:

2. Meteo Station 2 (Channel #165610)

Environmental data from weather station 2:

3. Server Data (Channel #293897)

Server infrastructure monitoring:

How It Works

Architecture

┌─────────────────────────────────────────────────────────┐ │ index.html │ │ ┌─────────────────────────────────────────────────┐ │ │ │ Dashboard Container │ │ │ │ ┌─────────────┐ ┌─────────────────────────┐ │ │ │ │ │ Controls │ │ ThingSpeak Chart │ │ │ │ │ │ Panel │──│ (Embedded iFrame) │ │ │ │ │ │ │ │ │ │ │ │ │ │ - Field Btns│ │ https://api.thingspeak │ │ │ │ │ │ - Presets │ │ .com/channels/XXX/ │ │ │ │ │ │ - Settings │ │ charts/1?... │ │ │ │ │ │ - Apply Btn │ │ │ │ │ │ │ └─────────────┘ └─────────────────────────┘ │ │ │ └─────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────┘

URL Building Logic

The dashboard constructs ThingSpeak chart URLs dynamically based on your settings:

https://api.thingspeak.com/channels/{channel_id}/charts/{field_id}?
    width=1600
    &height=950
    &results={number_of_points}
    &dynamic={true|false}
    &{average|median|sum}={minutes}
    &start={datetime}
    &end={datetime}
    &color=%233498db
    &bgcolor=%23ffffff

Configuration

To add or modify channels, edit the channels array in the JavaScript section:

const channels = [
    {
        id: 70336,
        name: "Meteo Station 1",
        fields: [
            { id: 1, name: "Temperature 1" },
            { id: 2, name: "Temperature 2" },
            { id: 4, name: "Humidity %" },
            { id: 5, name: "Pressure hPa" }
        ]
    },
    // Add more channels here...
];

Tips & Tricks

Finding Trends: Use the "All Data (Daily Avg)" preset to see long-term trends by removing short-term noise.

Comparing Days: Set a specific date range to compare conditions across different time periods.

Data Limits: ThingSpeak has a maximum of ~8000 points per request. For larger datasets, use daily or weekly grouping.

Technical Details

Component Technology
Frontend Vanilla JavaScript, HTML5, CSS3
Charts ThingSpeak Highcharts API
Data Source ThingSpeak IoT Platform
Responsive CSS Flexbox with media queries

Browser Compatibility

Troubleshooting

Issue Solution
Chart not loading Check your internet connection; ThingSpeak may be temporarily unavailable
No data points Verify the channel ID and field ID are correct
Old data displayed Enable "Dynamic" checkbox for auto-updates
Chart too small Increase Results count or widen your browser window

For more information about ThingSpeak, visit: thingspeak.com