106 lines
10 KiB
Markdown
106 lines
10 KiB
Markdown
# Flot - Графики
|
||
|
||
## Описание
|
||
|
||
[Flot](http://www.flotcharts.org/) является JavaScript библиотекой JQuery для построения графиков, с акцентом на
|
||
простом использовании, привлекательном внешнем виде и интерактивных возможностях. Драйвер yunkong2 с одноименным
|
||
названием позволяет строить графики архивных данных (для доступа к историческим данным в системе должен быть установлен
|
||
драйвер [History](http://www.yunkong2.net/?page_id=3636&lang=ru), [SQL History](http://www.yunkong2.net/?page_id=4044&lang=ru) или
|
||
History with InfluxDB). Он может быть использован как отдельное приложение для одновременного отображения нескольких графиков
|
||
для анализа различных состояний системы во времени.
|
||
|
||
## Установка
|
||
|
||
Установка осуществляется на вкладке **Драйвера** странички [администрирования](http://www.yunkong2.net/?page_id=3800&lang=ru) системы.
|
||
В группе драйверов **Визуализация** находим строчку с названием **Flot Charts** и нажимаем кнопку со значком плюса в этой строке справа.
|
||
На экране появится всплывающее окно установки драйвера, в конце установки оно автоматически закроется. Если все прошло удачно,
|
||
на вкладке **Настройка драйверов** появится строка **flot.0** с установленным экземпляром драйвера. Обращаем ваше внимание на то,
|
||
что драйвер **Flot** должен иметь доступ к историческим данным (БД), поэтому в системе должен быть установлен и настроен как минимум
|
||
один драйвер из группы **Хранилище** ([History](http://www.yunkong2.net/?page_id=3636&lang=ru),
|
||
[SQL History](http://www.yunkong2.net/?page_id=4044&lang=ru) или History with InfluxDB).
|
||
|
||
Так же для работы flot необходим драйвер web, но он устанавливается обычно автоматически.
|
||
|
||
|
||
|
||
## Настройка
|
||
|
||
Определенных настроек драйвер не требует. Он работает как отдельный WEB-сервис на порту драйвера web системы yunkong2 (обычно 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 (значений) и единицы измерений, если не указано, то интервал выбирается автоматически, юниты берутся из системы yunkong2,
|
||
* **Y Axis, X Axis** - положение осей X и Y,
|
||
* **ØL**, **ØS** - толщина линий и размер тени графика,
|
||
* **Имя** - значение для отображения названия временного ряда в легенде (если она включена), если не указано, то берется значение из yunkong2 (имя объекта),
|
||
* **Общая ось Y** - объединение оси Y (значений) для двух и более временных рядов,
|
||
* **NULL как** - интерпретация пустых записей значения переменной (не использовать, использовать значение 0 или брать предыдущее),
|
||
* Настройки **Сглаживание** и **После запятой** - сглаживание пиков графика и округление значений временного ряда.
|
||
|
||
## Время
|
||
|
||
Настройка временного интервала отображения данных графика.
|
||
|
||
|
||
|
||
* Временной интервал **тип** - относительный (начальная точка привязана к текущему времени, интервал, и возможность обновлять автоматически) и постоянный (точное указание временных рамок),
|
||
* Объединение данных - объединять значения по времени (в секундах) или определенное количество.
|
||
|
||
## Опции
|
||
|
||
Здесь можно настроить внешний вид графиков, сетки, осей и легенды и подписи. Все настройки интуитивно-понятны.
|
||
|
||
|
||
|
||
Для примера можно добавить несколько переменных для записи в БД (переменные работы хоста yunkong2 - нагрузку ЦП, память и пр.).
|
||
Для этого на вкладке **Объекты** в верхнем левом углу нажимаем кнопку **Показать системные объекты**,
|
||
в таблице ищем группу **system.host.имя_хоста**, раскрываем список и настаиваем хранение истории для выбранных
|
||
переменных (кнопка в строке крайняя справа):
|
||
|
||
* ставим галочку **активно** в группе **sql.o** (предварительно должен быть настроен экземпляр этого драйвера на работу с БД),
|
||
* остальные настройки можно оставить по-умолчанию,
|
||
* нажимаем кнопку **Сохранить**.
|
||
|
||
|
||
|
||
|
||
|
||
Через некоторое время, когда в БД накопятся записи для отображения на графике, можно попробовать построить временные ряды:
|
||
|
||
|
||
|
||
## Интеграция в систему
|
||
|
||
Для примера, рассмотрим интеграцию графиков в драйвер **VIS** системы визуализации yunkong2.
|
||
Есть несколько вариантов, можно на рабочем поле разместить объект static-iFrame группы iframe.
|
||
В настройках можно указать интервал обновления (в ms) и тогда график будет обновляться и отображать
|
||
текущие данные (если временная шкала настроена относительно текущего времени).
|
||
|
||
 |