# 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, но он устанавливается обычно автоматически. 

![](img/Flot-setting1.jpg)

## Настройка

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

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

Окно графиков Flot можно открыть кнопкой **Открыть приложение** или в строке браузер набрать адрес: `http://IP-адрес:8082/flot/edit.html` 

Окно можно условно поделить на три зоны (сверху вниз): 
Настройки, URL странички для вывода графика и предварительный просмотр графиков.

![](img/Flot-setting6.jpg)

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

```http://IP:8082/flot/**index**.html?params.... => http://IP:8082/flot/**edit**.html?params....```

## Входные данные

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

![](img/Flot-setting7.jpg)

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

## Время

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

![](img/Flot-setting8.jpg)

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

## Опции

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

![](img/Flot-setting9.jpg)

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

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

![](img/Flot-setting3.jpg)

![](img/Flot-setting4.jpg)

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

![](img/Flot-use2.jpg)

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

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

![](img/Flot-use1.jpg)