Драйвер Flot

Fork me on GitHub

Описание

Flot является JavaScript библиотекой JQuery для построения графиков, с акцентом на простом использовании, привлекательном внешнем виде и интерактивных возможностях. Драйвер ioBroker с одноименным названием позволяет строить графики архивных данных (для доступа к историческим данным в системе должен быть установлен драйвер History, SQL History или History with InfluxDB). Он может быть использован как отдельное приложение для одновременного отображения нескольких графиков для анализа различных состояний системы во времени.

Информация

 

Актуальная версия
Необходимые условия history, web
Разработчик Bluefox
Ключевые слова
графики, представление данных, история
Github icon_link Ссылка
Платформа Javascript/Node.js
Лицензия MIT

Установка

Установка осуществляется на вкладке Драйвера странички администрирования системы. В группе драйверов Визуализация находим строчку с названием Flot Charts и нажимаем кнопку со значком плюса в этой строке справа. На экране появится всплывающее окно установки драйвера, в конце установки оно автоматически закроется. Если все прошло удачно, на вкладке Настройка драйверов появится строка flot.0 с установленным экземпляром драйвера. Обращаем ваше внимание на то, что драйвер Flot должен иметь доступ к историческим данным (БД), поэтому в системе должен быть установлен и настроен как минимум один драйвер из группы Хранилище (History, SQL History или History with InfluxDB).

Так же для работы flot необходим драйвер web, но он устанавливается обычно автоматически.

Настройка

Определенных настроек драйвер не требует. Он работает как отдельный WEB-сервис на порту драйвера web системы ioBroker (обычно 8082). Чтобы начать работу с драйвером, необходимо нажать на кнопку Открыть приложение на вкладке Настройка драйверов в строчке выбранного экземпляра.

Использование

Окно графиков Flot можно открыть кнопкой Открыть приложение или в строке браузер набрать адрес: http://IP-адрес:8082/flot/edit.html
Окно можно условно поделить на три зоны (сверху вниз): Настройки, URL странички для вывода графика и предварительный просмотр графиков.

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

Если необходимо изменить настройки графика, вставьте получившийся URL в строку пути браузера, заменив index.html на edit.html:

http://IP:8082/flot/index.html?params…. =>

http://IP:8082/flot/edit.html?params….

Входные данные. Настройка исходных данных для построения графика/графиков.

  • Можно добавить/удалить ряд данных,
  • Галочка Обновлять сразу позволяет применять настройку сразу после её изменения (если не установлена, ниже будет кнопка Обновить, которая обновляет превью графиков в соответствии с настройками),
  • ID – необходимо с помощью кнопки выбрать переменную для построения временного ряда (графика), в окне будут только те переменные, для которых настроено хранение истории,
  • Драйвер – можно выбрать из списка экземпляр драйвера, который привязан к конкретной БД, соответственно данные для построения будут запрошены из этой БД,
  • Сдвиг по оси Х (Сдвиг по оси Y) – можно указать промежуток времени, на который необходимо сдвинуть график вправо (глубже в архиве) или абсолютное значение для сдвига по оси Y,
  • Тип – режим вывода точек на график (в группе время есть настройка Объединение данных (по времени или количеству) – берется отрезок этих данных и отрисовывается только максимум, минимум, среднее, все значения или специальный алгоритм MinMax),
  • Тип графика – режим отрисовки (Линия, Область, Линия с точками и пр.),
  • Min, Max, Unit – интервал по оси Y (значений) и единицы измерений, если не указано, то интервал выбирается автоматически, юниты берутся из системы ioBroker,
  • Y Axis, X Axis – положение осей X и Y,
  • ØLØS – толщина линий и размер тени графика,
  • Имя – значение для отображения названия временного ряда в легенде (если она включена), если не указано, то берется значение из ioBroker (имя объекта),
  • Общая ось Y – объединение оси Y (значений) для двух и более временных рядов,
  • NULL как – интерпретация пустых записей значения переменной (не использовать, использовать значение 0 или брать предыдущее),
  • Настройки Сглаживание и После запятой – сглаживание пиков графика и округление значений временного ряда.

Время. Настройка временного интервала отображения данных графика.

  • Временной интервал тип – относительный (начальная точка привязана к текущему времени, интервал, и возможность обновлять автоматически) и постоянный (точное указание временных рамок),
  • Объединение данных – объединять значения по времени (в секундах) или определенное количество.

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

Для примера можно добавить несколько переменных для записи в БД (переменные работы хоста ioBroker – нагрузку ЦП, память и пр.). Для этого на вкладке Объекты в верхнем левом углу нажимаем кнопку Показать системные объекты, в таблице ищем группу system.host.имя_хоста, раскрываем список и настаиваем хранение истории для выбранных переменных (кнопка в строке крайняя справа):

  • ставим галочку активно в группе sql.o (предварительно должен быть настроен экземпляр этого драйвера на работу с БД),
  • остальные настройки можно оставить по-умолчанию,
  • нажимаем кнопку Сохранить.

Через некоторое время, когда в БД накопятся записи для отображения на графике, можно попробовать построить временные ряды:

Интеграция в систему

Для примера, рассмотрим интеграцию графиков в драйвер VIS системы визуализации ioBroker. Есть несколько вариантов, можно на рабочем поле разместить объект static-iFrame группы iframe. В настройках можно указать интервал обновления (в ms) и тогда график будет обновляться и отображать текущие данные (если временная шкала настроена относительно текущего времени).