[#3] Как добавить zoom и scroll, на график с real-time | Визуализация данных на JavaScript

Сегодня реализуем функционал зума и скроллинга для графика, который отображается в режиме реального времени.
Покажу вам, как подключить и правильно настроить плагин chartjs-plugin-zoom. Поговорим о таких методах, как onPanStart, onZoomStart, onPanComplete и onZoomComplete, будем использовать их для настройки графика таким образом чтобы соеденить работу функционала realt-time, zoom и pan.
В конце, для более професионального отображения, добвим остптычные значения для шкалы "х", и переопределим метод интерполяции для шкалы "у".
Ссылка на весь плейлист: • Визуализация данных на...
Код урока:
github.com/ateros-lab/data-vi...
#data #visualization #javascript #chartjs #js #chart #library #визуализация #данных #уроки #программирование #real #time #chart

[@AterosDev]

Простыми словами, интерполяция - это нахождение промежуточных значений между двумя числами, по заданной формуле.
В нашем примере есть метод, следующего вида:
(
from, // стартовое значение
to, // конечное значение
factor // коэфициент умножения
) => {
// примем что:
// from = 2, to = 10, factor = 0.1
// тогда:
let result = from + (factor * (to - from));
return (result > to) ? to : result;
// РАЗБОР АЛГОРИТМА
// Для первой итерации:
// result = 2 + (0.1 * (10 - 2)) = 2.8;
// "result" (2.8) меньше, чем "to" (10), поэтому возвращаем result (2.8)
// для второй интерации (from = 2.8):
result = 2.8 + (0.1 * (10 - 2.8)) = 3.52;
// "result" (3.52) меньше, чем "to" (10), поэтому возвращаем result (3.52)
// и т. д.
// *в оригинале функция сложнее, но принцип тот же
}

[@antonvasyukov763]

Спасибо за труд! Твои видосы помогли понять как сделать визуализацию данных в проекте :)
Было бы круто, если бы ты сделал урок по созданию минималистичной CRM системы (авторизация/регистрация, создание клиента, заказа, этапы заказа) на react, express, mysql, serializes, jwt.
Подобных видео нет на ютуб, только блоги всякие. Понятно это очень похоже, но это будет топ контент

[@AterosDev]

Привет, спасибо большое 🙏
Это круто, значит уроки действительно полезны)
Спасибо за совет, добавил в заметки, возможно потом сделаю курс 😉

[@KumarPavan356]

Привет! А подскажи, хочу сделать 2 таких графика на сайте у себя, но чтоб они подтягивали данные с разных серверов. При попытки такого маневра один из графиков тупо не работает. Я так понимаю происходит конфликт в коде, а в чем конфликт, не понимаю. Возможно нужно заменить название переменных?

[@AterosDev]

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

[@user-in1yi3xj5v]

Привет. У меня такая проблема: я создаю линейный график с временной осью X, на одном чарте несколько датасетов. Их необходимо масштабировать. И в ситуациях, когда точка датасета уходит за предеты графика, эта линия вообще пропадает. Либо если я масштабирую область между двумя точками одного датасета, он пропадает. Как сделать апроксимацию этого участка, чтобы линия оставалась на графике? В библиотеке AMCharts, например, сохраняется линия тренда, даже если точки датасета ушли за пределы графика.

[@AterosDev]

Привет. Посмотри начало следующего урока, я там показавал как устанавливать лимиты для зума (сразу после заставки).