Как создать график в реальном времени с помощью JavaScript и Pusher

1656679691 kak sozdat grafik v realnom vremeni s pomoshhyu javascript i

Рахат Кханна

1*OV9Z2nnWNUHlfeTqyZsotg

Мир сейчас нуждается во всем сверхскором. Ежедневно разными системами генерируется много потоков данных. Они служат для принятия решений во многих отраслях. Мониторинг и анализ в реальном времени сегодня стали очень важны. Потоки данных включают в себя мониторинг трафика веб-сайта в реальном времени, производительность сервера, обновление погоды и датчики IOT. Важно проанализировать и интерпретировать этот пакет данных, для чего отличным решением являются интерактивные диаграммы и графики.

В этой статье мы будем создавать сервер Node.js для предоставления API для предоставления исторических данных для метрики (в этом случае погоды в Лондоне). Он также предоставляет API для приема новых точек данных. Мы также создадим внешнее приложение с линейной диаграммой для отображения изменений температуры погоды в Лондоне в реальном времени. Программа, которую мы создаем, будет выглядеть примерно так:

0*FRqdiqdKGjkXyZJV

Регистрация на Pusher

Первым шагом, чтобы начать этот учебник, является регистрация на Pusher или вход с имеющимися учетными данными, если у вас уже есть аккаунт. После входа вам нужно будет создать новое приложение и выбрать Vanilla JavaScript для интерфейса вместе с Node.js для бэкенда. После этого вы перейдете на целевую страницу, содержащую код «начала работы» для интерфейса и сервера, который мы используем позже в учебнике.

API сервера Node.js для системы мониторинга и аналитики

Основными API для любой системы аналитики для любой метрики или сущности:

  1. API приема – API для приема новых точек данных для любой конкретной сущности. На нашем сервере для публикации в блоге мы создадим API для получения новых данных о температуре в определенное время для Лондона. Этот API может быть вызван любой глобальной погодной системой или любым датчиком IOT.
  2. API исторических данных – этот API будет возвращать все данные в диапазоне от даты. Для нашего сервера мы создадим обычный API. Он вернет некоторые статические исторические данные с ограниченными точками данных для значений температуры Лондона в любой день.

Node.js Express Server Skeleton

Мы создадим базовый экспресс сервер вместе с экземпляром сервера библиотеки Pusher. Мы создадим новую папку для нашего проекта и создадим новый файл server.js. Добавьте следующий код в этот файл:

API для получения исторических данных температуры

Теперь мы добавим несколько статических данных о температуре в Лондоне в определенное время в течение дня и сохраним их в любой переменной JavaScript. Мы также представим маршрут для возврата данных, когда кто-то вызывает их с помощью вызова GET HTTP.

API для точки данных о температуре

Теперь мы добавим код для API для получения температуры в определенное время. Мы раскроем GET HTTP API с температурой и временем как параметрами запроса. Мы проверим, не пустые ли параметры. Мы храним их, засовывая dataPoints массив нашей статической переменной JavaScript londonTempData. Пожалуйста, добавьте следующий код в server.js файл

В приведенном выше коде кроме сохранения в источнике данных мы также инициируем событие ‘новая температура’ на новом канале ‘london-temp-chart’. Для каждого уникального источника данных или диаграмм можно создать новый канал.

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

Создание программы Front-End с помощью Vanilla JavaScript и Chart.js

Теперь мы создадим внешнюю программу. Он отображает линейную диаграмму, которая будет представлять изменения температуры в Лондоне в разное время в течение дня. Ключевым подходом к отображению графиков в реальном времени:

  1. Нам нужно выполнить исходный вызов Ajax, чтобы получить исторические данные и отобразить график с имеющимися данными.
  2. Мы будем подписываться на какие-либо события для новых точек данных, хранящихся на определенном канале.

Базовый шаблон HTML

Мы создадим новую папку под названием общественность в корне нашего проекта, а затем создайте новый файл index.html в этой папке. Этот файл будет содержать основной HTML-код для воспроизведения простого заголовка и подзаголовка с названием программы вместе с несколькими значками. Мы также будем импортировать Проталкиватель JavaScript библиотеку с URL-адреса CDN.

Добавление библиотеки диаграмм

В приложениях JavaScript и HTML мы должны использовать SVG или Canvas для создания графических компонентов для представления математических графиков. Существует множество библиотек с открытым кодом, которые могут помочь вам отобразить различные типы диаграмм. К ним относятся столбчатые диаграммы, круговые диаграммы, линейные диаграммы и точечные диаграммы.

Для нашего проекта мы выберем Chart.js, поскольку он имеет достаточно простой API и воспроизводит надежные диаграммы с помощью HTML-тега Canvas. Вы можете выбрать любую библиотеку диаграмм, но учтите, что библиотека должна иметь средства для обновления диаграммы без ее полного воспроизведения. Chart.js предоставляет метод любой созданной диаграммы для ее обновления.

Добавьте следующий код в файл index.html в соответствующих местах

Добавление файла JavaScript и создание экземпляра клиентской библиотеки Pusher

Теперь мы создадим новый файл app.js в общедоступной папке, а также добавьте следующий код для создания экземпляра клиентской библиотеки Pusher.

В приведенном выше коде мы также добавили несколько служебных методов для вызова Ajax, а также показа или укрывания элементов из DOM API.

Добавление кода для получения исторических данных

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

Пожалуйста, добавьте такой код в файл app.js:

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

The данных ключ в каждом из элементов массива будет отображать разные точки на графике. Мы сделаем запрос ajax к /getTemperature api, чтобы получить все точки данных и поместить их в этот ключ. Тогда мы вызовем способ визуализации для отображения графика. Теперь мы можем выполнить команду node server.js а затем перейдите в браузер по такому URL, чтобы просмотреть начальную диаграмму, воспроизведенную с использованием данных.

http://localhost:9000/

Чтобы правильно стилизовать наше приложение, добавьте следующий CSS в новый файл style.css в общедоступной папке. Добавьте такой код в этот файл:

Получен код обновления графика для нового события

Теперь мы хотим подписаться на уникальный канал, на который наш сервер будет передавать обновления для этого графика. Для нашего проекта канал назван london-temp-chart и название события новая температура. Добавьте следующий код для обработки события, а затем обновите диаграмму в реальном времени:

Чтобы увидеть этот код в действии, необходимо обновить браузер, и вы увидите начальную диаграмму. Теперь мы должны ввести новую точку данных. Вам нужно будет вызвать приведенный ниже API, используя какой-то имитационный инструмент вызова API, или используя следующий URL-адрес с другими значениями в браузере.

http://localhost:9000/addTemperature?temperature=17&time=1500

Чтобы проверить код обновления диаграммы, вы можете использовать следующий временный код в своем app.js файл. Он посылает фиктивные запросы Ajax в указанный выше URL через определенный промежуток времени.

Вот хранилище GitHub для ссылки на полный код.

Вывод

Наконец-то наше приложение для аналитики в реальном времени готово. Мы увидим, что график погоды в Лондоне обновляется в режиме реального времени.

0*kZFwZkxqSkpUT3-K

Мы можем использовать код из этой публикации в блоге любой библиотеки диаграмм. Он также может визуализировать любой тип диаграммы, например гистограмма, точечная диаграмма или секторная диаграмма, для обновления в реальном времени.

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

Эта статья была первоначально опубликована в блоге Pusher.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *