Line Chart

Line Chart - это график изменений переменных, где точки - изменения переменных соединены линией.

документация обновлена 01.01.2024

Описание​

Line Chart - это график изменений переменных, где точки - изменения переменных соединены линией. На графике могут отображаться изменения нескольких значений. В отличии от элемента Linear Trend, Line Chart имеет функции управления жестами.

На графике отображаются значения из базы данных сервера iRidi . Некоторые параметры Line Chart доступны для изменения в скрипте.

i3 pro не хранит собственную базу данных, поэтому на графиках отображается информация, полученная с сервера iRidi.

Настройка графиков​

1. Настройка сохранения истории изменений в канале обратной связи в базе данных сервера iRidi

2. Настройка отображения истории на графике: создание графических элементов линейных графиков в интерфейсе i3 pro и назначение им отдельных каналов обратной связи, по которым будет отображаться история.

1. Сохранить историю канала обратной связи в базе данных сервера iRidi​

В базу данных может быть записан канал обратной связи с драйвером или виртуальный канал обратной связи.

Чтобы сохранить историю изменения, настройте сохранение переменной в базу данных сервера. Настройка производится в серверном проекте. Когда переменная сохранена в базу, график ее изменения можно запросить из приложения i3 pro. График объединит исторические и актуальные данные в зависимости от настроек графического элемента Line Chart.

Настройка отображения графика производится в проекте для панели управления.

Создайте переменную, которую нужно отображать на графике. Настройте сохранение переменной в базу данных в проекте iRidi Server.

Параметры сохранения данных в базе данных:

• Persist – сохраните последнее значение, записанное в переменной, и воспроизведите его после перезапуска сервера до инициализации драйверов. С помощью этого параметра значения загружаются без резких "падений", но факт перезапуска или выключения сервера не фиксируется на графике.
• Store In DB – включите сохранение переменной в базе данных, выберите формат данных
  • Нет – сохранение в базе данных отключено
  • Подписанный 32-разрядный – сохранить как целое число со знаком
  • 64-битный формат с плавающей запятой – сохранить как число с плавающей запятой
  • Строка UTF8 – сохранить как строку
• Load On Start – записывает последнее значение переменной из базы данных в канал обратной связи при запуске сервера
• DB Save Strategy – стратегия сохранения данных: выберите тип события, которое сохраняется в базе данных:
  • 'Deadband '– сохранение при изменении переменной на значение, отличающееся от предыдущего на установленное значение или более.
    • Deadband(значение) – минимальное изменение переменной, которая записана в базе данных. В Deadband: 0 любое значение записывается в базу данных, и ничего не записывается, если значение соответствует одному и тому же числу. Но, если данные записаны в виде строки, они сохраняются каждый раз, поскольку строки не сравниваются.
  • 'Interval ' – периодическое сохранение. Данные записываются с заданным интервалом времени.
    • Interval (Значение) – выберите интервал от 5 секунд до 1 часа или введите его вручную (Пользовательский) в ms
    • *Значение интервала'' - значение интервала (минимум 1);
    • Единицы измерения интервала - единицы измерения;

• Forward value to - перенаправление значения из одного тега в другой (подробнее здесь);

Сохранение с интервалом удобно для переменных, которые плавно меняют значения и совершенно неактивны, например, для температуры и влажности воздуха.

Сохранение "при изменении" подходит для переменных, для которых важно не пропустить момент их изменения. Например, включение/выключение света, изменение скорости вращения вентилятора могут быть сохранены в базе данных.

2. Отобразить историю на графике​

1. Создайте панельный проект из серверного или синхронизируйте уже существующий.

2. Создать Line Chart графический элемент в интерфейсе i3 pro и назначить ему канал обратной связи с сервером, история которого должна отображаться:

Простые настройки​

Открываются двойным кликом по элементу настройки внешнего вида графика и каждой кривой:

• Название – название кривой
• Tag – серверная переменная, из которой график получает данные для построения кривой
• Тип линии – тип кривой
  • Сплошная – точки кривой соединены линиями, это сплошная линия
  • Пунктирная – точки кривой соединены линиями, это пунктирная линия
  • Квадратная – кривая строится поэтапно от точки к точке, линия сплошная
• Толщина линии – толщина линии или точки
• Цвет – цвет линии
• Цвет заливки - цвет заливки области под линией графика
• Цвет фона - цвет области графика
• Цвет текста - цвет текста данных, расположенного на осях
• Цвет сетки - Цвет сетки
• Диапазон – диапазон значений на оси времени
• Автоматическое масштабирование – Авто-масштабирование выставляется от нижнего до верхнего значения кривой на промежутке
• Мин... Макс (при выключенном автоматическом масштабировании) – фиксированный диапазон отображения данных
• Расширенные настройки - переключатель режимов окна настроек

Расширенные настройки​

Активация чек-бокса “Расширенные настройки” открывает подробные настройки, которые разделены по вкладкам:

1. Линии графика:

• Название – название кривой
• Tag – серверная переменная, из которой график получает данные для построения кривой
• Тип линии – тип кривой
  • Сплошная – точки кривой соединены линиями, это сплошная линия
  • Пунктирная – точки кривой соединены линиями, это пунктирная линия
  • Квадратная – кривая строится поэтапно от точки к точке, линия сплошная
• Толщина линии – толщина линии или точки
• Цвет – цвет линии
• Цвет заливки - цвет заливки области под линией графика

2. Область графика

• Цвет фона графика - цвет области графика
• Цвет фона под осями - цвет области под осями
• Показать рамку - активирует отображение рамки
• Толщина - толщина линии рамки
• Цвет - цвет рамки
• Настройки управления жестами
  • Листать график
  • Приближать\отдалять график
• Всплывающее окно значений:
  • Цвет фона - цвет области попапа значений
  • Цвет курсора - цвет курсора на области графика
  • Шрифт - настройка шрифта
  • Размер текста - размер шрифта
  • Стиль - стиль текста
  • Цвет - цвет текста

3. Линии сетки

• Цвет - настройка цвета линий сетки
• Толщина - настройка толщины линий сетки
• Основные линии сетки - основная сетка по количеству марок на оси Y
• Дополнительные линии сетки - дополнительная сетка
• Количество дополнительных линий

4. Горизонтальная ось

• Диапазон – диапазон значений на оси времени
• Положение – расположение временной оси: вверху или внизу графика
• Цвет – цвет линии оси
• Толщина - настройка толщины линий оси
• Показывать ось - активирует отображение оси, настройки Настройки имени оси и Настройки подписи времени и даты
• Настройки имени оси - настройки отображения и стиля названия оси
  • Показывать название оси - активирует отображение названия и его настоек
• Настройки подписи времени и даты - настройки отображения и стиля текста времени
  • Показывать время и дату - активирует отображение времени и даты на оси

5. Вертикальная ось:

• Автоматическое масштабирование – Авто-масштабирование выставляется от нижнего до верхнего значения кривой на промежутке
• Мин... Макс (при выключенном автоматическом масштабировании) – фиксированный диапазон отображения данных
• Положение - расположение оси данных: слева или справа от графика
• Количество марок - отметками на графике с заданным интервалом (целое число)
• Настройки названия оси - настройки отображения и стиля названия оси
  • Показывать название оси - активирует отображение названия и его настоек
• Настройки подписи значений на оси - настройки отображения и стиля текста данных
  • Показывать время и дату - активирует отображение времени и даты на оси

Настройка элемента через скрипт​

Обратная связь от режима Live графика:

function CheckForLive () {
   IR.GetPage("3 AI").GetItem("Item 10").Value = Trend.Live //.Live - динамический ли график ("живой"); И чтение и запись

Переключение масштабов оси времени:

Trend.SetScale(IR.TREND_SCALE_DAY), вместо DAY может быть MONTH, WEEK и все доступные для переключения масштабы.

function SetScaleHour() { 
    IR.Log(Trend.Range);
    Trend.Range = 0.045; //.Range - диапазон (в иридиум тайм);
    IR.Log(Trend.Range);
}

function SetScaleDay() {
    Trend.SetScaleType(IR.TREND_SCALE_DAY); //.SetScaleType(type) - Установить тип масштаба - (день)
    IR.Log(Trend.Range);
}

function SetScaleWeek() {
    Trend.SetScaleType(IR.TREND_SCALE_WEEK); //.SetScaleType(type) - Установить тип масштаба - (неделя)
    IR.Log(Trend.Range);
}

function SetScaleMonth() {
    Trend.SetScaleType(IR.TREND_SCALE_MONTH); //.SetScaleType(type) - Установить тип масштаба (месяц)
    IR.Log(Trend.Range);
}

Смещение просматриваемой области графика по оси ОХ относительно текущей позиции:

Trend.Shift(-1) в аргументе указывается на сколько масштабных единиц относительно текущей позиции делать смещение

function shift_back(){
  Trend.ShiftOnPixels(-1000, 100) //.ShiftOnPixels(count, speed) - Пролистнуть на кол-во пикселей. Если count положительный - вправо, если отрицательный - влево; speed - скорость листания в пикселях >=0; Если 0 - резкое перемещение, без плавного листания.
}

function shift_forward(){
  Trend.ShiftOnPixels(1000, 100) 
}

Возвращение в дефолтный вид диапазона, самую актуальную точку графика и Live режим: Trend.Reset()

function ResetTrend() {
    Trend.Reset(); //.Reset() - Сбросить к первоначальным настройкам (Заданным в студии)
}