График погоды на Chart.js: температура и влажность из MySQL

Chart.js — мощная и бесплатная JavaScript-библиотека для построения красивых адаптивных графиков. В этом уроке мы подключим датчик DHT11 к ESP8266, сохраним температуру и влажность в базу MySQL, выведем данные в таблицу и построим два динамических графика: линейный для температуры и влажности за последние 50 измерений.

×

Возможности проекта

• Сбор данных с DHT11 через ESP8266
• Запись температуры и влажности в MySQL по GET-запросу
• Два отдельных графика Chart.js (температура и влажность)
• Таблица с последними 30 измерениями
• Адаптивный дизайн, анимация, подсказки
• Лёгкая настройка цветов, типов графиков и масштаба

Необходимые компоненты

• ESP8266 (NodeMCU или Wemos D1 mini)
• Датчик DHT11 или DHT22
• Локальный веб-сервер (XAMPP, OpenServer)
• MySQL база данных

Схема подключения DHT к ESP8266

• VCC → 3.3V
• GND → GND
• Data → D4 (GPIO2)
• Подтягивающий резистор 4.7–10 кОм от Data к VCC

Структура файлов на сервере

• index.php — главная страница с графиками и таблицей
• connect.php — подключение к MySQL
• insert.php — приём GET-запросов и запись в БД
• js/Chart.min.js — библиотека Chart.js

Создание базы и таблицы

CREATE DATABASE weather;
USE weather;
CREATE TABLE dht (
    id INT AUTO_INCREMENT PRIMARY KEY,
    temperature INT,
    humidity FLOAT,
    reading_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Пример insert.php

<?php
include 'connect.php';
if(isset($_GET['temp']) && isset($_GET['hum'])) {
    $temp = $_GET['temp'];
    $hum = $_GET['hum'];
    $sql = "INSERT INTO dht (temperature, humidity) VALUES ('$temp', '$hum')";
    mysqli_query($conn, $sql);
}
?>

Скетч ESP8266

#include <ESP8266WiFi.h>
#include <DHT.h>
#define DHTPIN D4
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);

const char* ssid = "yourSSID";
const char* password = "yourPASS";
const char* host = "192.168.1.100"; // IP вашего ПК

void loop() {
  delay(2000);
  float h = dht.readHumidity();
  int t = dht.readTemperature();
  
  WiFiClient client;
  if (client.connect(host, 80)) {
    String url = "/insert.php?temp=" + String(t) + "&hum=" + String(h);
    client.print(String("GET ") + url + " HTTP/1.1\r\n" + "Host: " + host + "\r\n" + "Connection: close\r\n\r\n");
  }
}

Построение графиков в index.php

Данные извлекаются из MySQL, передаются в JavaScript-массивы и рисуются двумя canvas-элементами Chart.js.

Заключение

Chart.js позволяет создавать профессиональные интерактивные графики погоды за минуты. Проект легко расширить: добавить прогноз, уведомления, экспорт данных или отображение на отдельной странице.

FAQ — График погоды на Chart.js