[#2] Стили и real-time chart | Визуализация данных на JavaScript
HTML-код
- Опубликовано: 14 мар 2023
- Продолжаем рассматривать тему визуализации данных на JavaScript и сегодня поработаем над стилями, а также реализуем функционал real-time chart.
Покажу вам, как сделать градиентную заливку для зоны графика, поработаем с настройкой ticks, будем выводить отметки по оси Х горизонтально, добавим стили для линии. В общем сделаем грфик визуально приятнее.
Реализуем функционал real-time, буду показывать на демонстрационных данных, но на реальных принцип тот, же.
Для того, чтобы закрепить знания, я подготовил для вас домашнее задании, в котором потренеруетесь в создании real-time на реальных данных.
*Дз в первом закрепленном комментарии.
Ссылка на раздел Animations, документации по Chart.js:
www.chartjs.org/docs/latest/c...
Ссылка на весь плейлист: • Визуализация данных на...
Код урока:
github.com/ateros-lab/data-vi...
#data #visualization #javascript #chartjs #js #chart #library #визуализация #данных #уроки #программирование #real #time #chart
![[#3] Как добавить zoom и scroll, на график с real-time | Визуализация данных на JavaScript](http://i.ytimg.com/vi/1yS_-njRSNI/mqdefault.jpg)
![[#3] Как добавить zoom и scroll, на график с real-time | Визуализация данных на JavaScript](/img/tr.png)
Домашнее задание:
Написать скрипт, который делает запрос на сервер с интервалом в 1 секунду и рисует график акций компании Apple в режиме реального времени (для получения текущего времени можно использовать функцию Date.now()). Стилизировать график, на свое усмотрение, только заливка зоны линии должна быть градиентом, а текст отметок времени по оси Х - повернуть горизонтально.
Для получения данных, делаем GET-запрос по адресу (извлекаем поле "last"):
api.marketdata.app/v1/stocks/quotes/AAPL/
*ссылка взята с сервиса Google Finance API
Красавчик !
Спасибо, стараюсь)
Спасибо большое за отличные видосы! Если можно снимите видео на svg пожалуйста.
Спасибо 🙏 Рад, что вам понравилось)
Возьму на заметку, что вам это интересно 😉
Спасибо, очень полезное видео, особенно когда хочешь очень быстро разобраться в документации.
Спасибо 🙏 Рад, что вам пригодились мои уроки 🔥👍
@@AterosDev единственное что не могу понять, можно ли сделать диаграмму одного размера, а бокс с legends другого(больше), и как ими управлять(поделить point на блоки например и растянуть их на всю ширину родительского блока)
Можно попробавать создать еще один график на одном включить отображение данных, а на другом только легенду. И там уже настраивать их по отдельности.
крассава!, respect!
Спасибо) 🙏🙏
Super полезно, спасибо
Super полезно, спасибо. Очень грамотно доносите материал
Спасибо большое 🙏🙏
Приятно осознавать, что мои уроки приносят пользу)
Несомненно приносят, я пытаюсь разобраться с ng2-charts, это адаптация chart к Angular. Там немного по другому, но благодаря вашим урокам я смог повторить real-time chart в нем. Спасибо огромное.@@AterosDev
Круто 🔥🔥👍 Рад, что у вас все получилось 🙏🙏
Продожай снимат пж