Построение графика погоды. chart js примеры видеоурок

Рассмотрим построение графика погоды. Строить график будем с помощью chart js. Построение двух графиков будет осуществлено при помощи chart js примеров. Этот видеоурок про построение графиков по значениям взятым из базы данных MySQL. Рассказ про chart js на русском языке, описание, возможности использования, типы и другое.

Сегодня, по просьбе одного из моих давних подписчиков, мы снова вернёмся к теме Локального сервера.
Подключим датчик температуры DHT11, сохраним полученную с него информация о температуре и влажности в базу данных MySQL, и выведем её в таблицу, и в виде двух графиков.

В качестве дополнительных функций выведем минимум и максимум. И по запросу отправим письмо на электронною почту.
Но эти функции будут доступны только спонсорам.

Сначала, по традиции посмотрим фрагмент видео, а потом рассмотрим, как это сделать самому.
В этом примере я вывел значения на главную страницу, но также можно было бы вывести на отдельную страницу, например страницу Температура.
Для графика я буду выводить последние 50 значений. Температура и влажность выводятся на разных графиках. Можно, конечно, было бы вывести и на одном, но я подумал, что это будет не так информативно, да и с определением минимума и максимума будут проблемы. А ещё я хотел показать как выводить несколько графиков на страницу.
А ещё я снизу построил таблицу, где показаны эти же значения в виде таблицы с указанием времени измерения. Только 50 значений это очень много, поэтому я вывел последние 30 значений.

В основном это урок про построение графиков. Для этого мы будем использовать JavaScript, а точнее набор этих скриптов предоставленный chart.js
Вот их сайт где можно посмотреть примеры графиков. Я быстро покажу все примеры графиков, очень быстро и не останавливаясь. Вы сами потом можете зайти на их сайт и посмотреть более внимательно.

Здесь есть очень много анимированных графиков, огромный арсенал настроек, всплывающие подсказки, наложение графиков, различные диаграммы.
Про все графики я сегодня конечно не расскажу. Это будет просто ознакомительное видео, и если вы захотите, то я сниму отдельное видео только про графики.

Вернёмся к нашему уроку.
Уровень подготовки, чтобы повторить этот пример минимален. Но у вас уже должен быть установлен WEB Server и база данных.  Если вы не знаете как установить у себя на компьютере локальный сервер, то посмотрите вот эти видео. Ну вроде вступление закончилось, пора переходить к реализации проекта.

Для начала нам надо подключить датчик температуры к плате ESP8266. Я не буду на этом останавливаться, так как я уже снимал подобное видео. Просто покажу схему подключения датчика к ESP. А кому что-то не понятно, то посмотрите вот это видео.

Теперь нам надо отправить эти данные на сервер и положить в базу данных. Для этого мы воспользуемся обычные GET запросом. Использовать POST нет смысла, так как значений мало и они никакие не секретные. Мы делали это вот в этом видео.

Это видео продолжения вот этого урока. Там есть всё, и подключение датчика температуры и рассказ про GET запросы, соединение с базой и вывод из неё на страницу, сортировка и количество значений. Создание базы и заполнение полей. Если вы его не смотрели, то обязательно посмотрите, а иначе вы ничего не поймёте.
Это видео в основном про графики.

Сначала посмотрим на скетч.
Если вы никогда ещё не подключали такой датчик, то вам надо будет установить эти библиотеки. Это можно сделать из менеджера библиотек. Если не знаете как это сделать, то посмотрите видео по ссылке что я давал ранее.

• Это пароль от вашей WIFI сети.
• Сюда надо вбить IP адрес вашего компьютера на котором установлен сервер. Узнать его можно из командной строки написав там ipconfig.
• У меня вот такой адрес. Вам надо будет поменять его на свой.
• Порт оставляем 80.
• Датчик температуры я подключил к контакту D4 платы ESP8266.
• А здесь указываем какой у вас датчик. У меня DHT11.

В SETUP стандартное подключение к WIFI сети.

Рассмотрим функцию loop.

• Сначала делаем задержку в 2 секунды, так как датчику нужно время. Например dht22 измеряет показания раз в 2 секунды.
• Дальше получаем значения от датчика и присваиваем их переменным. Влажность у нас будет сохраняться в переменную с точкой, а температура в целочисленную переменную, то есть целое число бес точки.
• Выводим значения в монитор порта для проверки, приходят ли значения.
• А это сама команда отправки GET запроса. Здесь формируется вот такая команда. /insert.php?temp=23&hum= 77.7 Где температура и влажность берутся с датчика.
• Ну и после передачи данных, клиент закрывает соединение и затем снова соединяется и передаёт данные.

Это видео является продолжением вот этого видео и чтобы не повторяться я просто сошлюсь на него. В нём я рассказывал как создать базу данных, таблицы и как импортировать и экспортировать эти данные в базу. Как нарисовать таблицу и делать сортировку, выводить разное количество записей в таблицу и многое другое.
Чтобы не тратить время тех кто уже смотрел это видео, я продолжу дальше, а тех кто не видел, советую сейчас прерваться и посмотреть его, а то без этого вы не поймёте что будет дальше.

Теперь для работы вам надо скачать архив, который вы можете найти на моём сайте, ссылка будет в описании. Разархивировать его и скопировать в главную директорию сервера.
Должно получиться вот так.

• Файл index отвечает за вывод данных на страницу.
• Файл connect отвечает за связь с базой.
• А файл insert за получение данных с датчика и записи их в таблицу базы данных.
• Папка img будет содержать все картинки которые вы захотите разместить на сайте.
• В папке Chart хранятся все примеры графиков, которые можно посмотреть и установить а сайте. Аналогично Примерам в ARDUINO IDE.
• А в паке js находятся сам JavaScript для построения графиков.
   

Теперь займёмся базой. Вам надо будет импортировать в неё файл sql. Если у вас с предыдущих примеров уже есть такая база, то вам надо будет скопировать только таблицу, файл dht sql. Я специально оставил там немного данных, чтобы вы сразу могли видеть экран с данными без подключенного датчика. Если вы видите такой экран, то всё в порядке и можно переходить к следующему этапу.

Или просто экспортировать из архива. Ссылку на который можно, как всегда, найти в описании. В этом архив я положу таблицу уже с некоторыми данными, что бы вы могли просто посмотреть как будет строиться график, без подключения датчика температуры и без платы ESP.

Давайте научимся работать с графиками. Для этого загрузим один из примеров.
Заходим в папку CHART, открываем SAMPLES, и выбираем любой, наугад, например вот этот.
Открываем, и нам открываются сразу 4 графика. Ничего, много не мало. Лишнее потом уберём.
Теперь нам надо отредактировать код. Открываем какой-нибудь редактор, например notepad++ или кая я , Visual Sudio, и открываем там выбранный файл.

Для начала нам надо указать правильный путь к JavaScript. Теперь сохраняем наш файл в папку на сервере, туда где у вас лежит файл index. Файл может быть htm, Html или php. Я сохранил как GRAPH HTML.

Теперь заходим на сервер и набираем GRAPH HTML и видим всё те же 4 графика как и в примере. Теперь давайте удалим 3 лишних. Находим в коде класс контейнер и видим 4 4 графика с разными id. Удаляем лишние, сохраняемся и смотрим, что получилось. Видим, что остался всего 1 график. Идём дальше.

Давайте отредактируем названия на графике. Напишем месяцы по русски. И уменьшим их количество до четырёх. Теперь нам надо в массиве data оставить столько же данных. То есть тоже 4.

Сохраняем файл и видим, что у нас теперь 4 месяца, и данных тоже 4, но вот с кодировкой проблема, но это мы сейчас исправил. Установим кодировку UTF-8. Сохраняем и снова смотрим.

Теперь всё отображается правильно. Давайте изменим ширину графика. Сделаем его побольше.
Изменим название графика на что-нибудь более понятное, например Погода по месяцам.

Поменяем цвета графика. На этом примере мы только попробуем, а потом перейдём к нашему основному примеру и там более подробно будем знакомиться с изменениями.
Сначала зальём график чёрным цветом. Получилось как-то не очень. Теперь зальём свето-серым. Кажется так смотрится получше. Теперь изменим цвет линии. Сделаем её чёрной.

Сейчас я постараюсь уместить на одном экране и web страницу и пример с кодом, что бы не бегать туда-сюда.
На web странице я пока убрал фоновое изображение, а то оно будет мешать при очень маленькой ширине браузера.
Как видите графики полностью адаптивные и при изменении ширины у нас не возникает ни каких проблем.

Начнём изменения с ширины. Сделаем первый график побольше. Изменим с 600 до 800. Второй график тоже немного увеличим.

Теперь рассмотрим какие бывают типы графиков. Я не буду их называть, а то вдруг назову как-то не так. Просто я меняю, а вы смотрите. Теперь я снова верну график для показа в барах.
На втором графике типы меняются точно так же, но там график имеет гораздо меньше настроек.

Теперь снова поиграем с цветами, изменим цвет заливки баров и их окантовку-бордюр. Кстати можно для каждого бара устанавливать свой цвет.
Сначала сделаем бары чёрными. Просто это самый простой цвет в кодировке RGB.
Теперь бордюр сделаем цвета Циан, или цвета морской волны.

Для продолжения нам понадобится линейный график. Сейчас будем менять форму точек на графике. Этих точек достаточно много, это и звёздочки и кружки, квадраты и крестики, линии и другие фигуры.

Снова установим кружок, так как на нём проще смотреть размер и толщину обводки. Сначала изменим толщину, а теперь размер.

Ну думаю для первого раза хватит графиков. Если будет интерес, то пишите, тут ещё не початый край.
Если вы внимательно присмотритесь, то на графике влажность самые новые данные размещаются слева, а на графике температура справа. Это можно изменить всего одной командой.

И не стесняйтесь, ставьте лайки пишите комментарии, делитесь моими видео. Как будет развиваться канал, зависит только от вас.
Чем больше я увижу вашей активности, тем быстрее будут выходить новые уроки.
А ещё вы можете помочь в развитии канала став его спонсором. Все ваши вклады пойдут на закупки новых модулей. Вам же за это будут предоставлены дополнительные бонусы, и они довольно интересные.
Вы видите ссылки на видео, которые, я думаю будут вам интересны. Перейдя на любое из этих видео вы узнаете что-то новое, а ещё поможете мне. Ведь любой ваш просмотр - это знак YOUTUBE, что это кому-то интересно и что его надо показывать чаще.
Спасибо.
А пока на этом всё.