Интегрирование библиотек morris.js и raphael.js для создания графика построения кривых Безье по доходности криптовалюты с использованием Bitrix API

Приходилось ли Вам строить графики функций или графики по точкам на координатной плоскости, предварительно высчитав сами точки? Наверняка сталкивались со множеством проблем, основной из которых была как построить график, применив минимальное количество усилий и затратив минимальное количество времени?

В первую очередь, разумеется, нужно посмотреть, может быть кто-то сталкивался с такой проблемой? Первая ссылка ведёт на библиотеку D3.js, возможности которой достаточно обширны, есть очень различные примеры построения различных структур, которые и графиками-то уже назвать тяжело.

Пример использования библиотеки D3.js

Однако, данная библиотека оказалась относительно сложной в реализации для нашего примера, пришлось бы писать слишком много js-кода и тратить лишнее время, которого было не так уж и много.

Следующая, не менее интересная библиотека – Google Charts. Тоже, очень интересная библиотека для создания графиков, диаграмм и прочих наглядных материалов. Даже был пример графика, который нужно было построить – обычную кривую линию (ну или несколько кривых линий). Однако в последний момент при реализации возникала js-ошибка, думать над которой не хотелось, потому что времени на это было не так много.

Один из примеров использования Google chart

Решили попробовать библиотеку morris.js. Почему? Она оказалась очень проста, понятна и доступна в использовании, её очень просто подключить к своему проекту и она идеально решает поставленную задачу.

Как же её использовать? Разумеется, первым делом необходимо подключить соответствующие стили и скрипты:

В принципе, на этом всё, можно использовать. Алгоритм очень прост – в разметку нужно добавить блок с уникальным id, в котором отобразится сам график – в нашем примере мы сделали так:

Далее, добавляем скрипт, который отобразит наш график:

// Сюда вписываем id нашего элемента.

// Данные графика – каждый элемент массива data представляем собой точку.

// Название атрибута по оси Х в массиве точек data.

// Массив названий атрибутов по оси Y в массиве точек data (в этом примере получится одна кривая, однако количество кривых на графике не ограничено).

// Метки для точек - отображается при наведении.

После выполнения скрипта в блоке с id="graphic" отобразится следующая картина:

Применив Битрикс API для нашей задачи были рассчитана доходность криптовалюты - значения точек на графике для определённых дат и получилась следующее:

Интересно, что кастомизировать график очень просто – можно изменять практически всё – от цвета и размера линий, точек и текста до кривизны изгиба и добавления собственных callback-функций для событий наведения.