Time series#

Визуализация Time series - это стандартный способ отображения изменений набора значений данных с течением времени. Каждой точке данных соответствует временная метка, и этот временной ряд отображается в виде графика. Визуализация может отображать ряды в виде линий, точек или столбцов и достаточно универсальна для отображения практически любого типа данных временных рядов.

Визуализация временных рядов отображает график x-y с временной динамикой по оси x и величиной значений по оси y. Эта визуализация идеально подходит для отображения большого количества временных точек данных, которые было бы трудно отследить в таблице или списке.

Можно использовать визуализацию временных рядов, если вам нужно отслеживать:

• Изменения температуры в течение дня.

• Ежедневный прогресс на вашем счете.

• Расстояние, которое вы пробегаете трусцой каждый день в течение года.

Предусловия#

• Пользователь авторизован и имеет права на редактирование дашборда.

• В системе настроен источник данных, предоставляющий временные ряды.

• Данные содержат поле времени и одно или более числовых полей.

• Визуализация «Time series» доступна в списке типов панелей.

Правила эксплуатации#

• Используйте Time series для отображения динамики метрик во времени — не подходит для статических или категорийных данных.

• Применяйте Stack series только при необходимости показать суммарное значение — избегайте при сравнении трендов.

• Используйте Logarithmic или Symlog шкалу — при большом разбросе значений.

• Настройте Soft min/max — для стабильного отображения графика без резких скачков оси.

• Включайте Connect null values: Threshold — чтобы избежать ложных соединений при больших пропусках.

• Применяйте Gradient mode — для визуального выделения уровней значений.

• Используйте Tooltip mode: All — при сравнении нескольких рядов в один момент времени.

• Настройте Color scheme и Thresholds — для быстрой визуальной индикации критических значений.

• Применяйте Field overrides — для индивидуальной настройки стилей отдельных рядов.

• Избегайте избыточного количества рядов — чтобы не перегружать график и не затруднять анализ.

Последовательность выполнения#

1. Убедитесь, что плагин визуализации «Time series» установлен в продукте PVV.

2. Откройте дашборд визуализации в интерфейсе PVV.

3. Выберите тип визуализции «Time series».

4. Настройте параметры конфигурации

   

5. Нажмите кнопку «Save Dashboard», чтобы отобразить визуализацию панели.

Поддерживаемые форматы данных#

Для визуализации временных рядов требуются данные временных рядов - последовательность измерений, упорядоченных по времени и отформатированных в виде таблицы, где каждая строка таблицы представляет одно отдельное измерение в определенный момент времени. Узнайте больше о данных временных рядов.

Пример 1#

В следующем примере на диаграмме есть три числовых поля, представленных тремя линиями:

Если поле времени не определяется автоматически, вам может потребоваться преобразовать данные в формат времени с помощью преобразования данных.

Пример 2#

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

Query1

Query2

Пример 3#

Если вы хотите упростить сравнение событий между разными, но перекрывающимися временными рамками, вы можете сделать это, используя смещение по времени при запросе сравниваемого набора данных:

Query1

Query2

Когда вы добавляете смещение, результирующая визуализация создает впечатление, что наборы данных отображаются в одно и то же время, что облегчает их сравнение.

Параметры конфигурации#

В следующем разделе описываются параметры конфигурации, доступные в панели редактора панелей для этой визуализации. Эти параметры, насколько это возможно, упорядочены так, как они отображаются в Grafana.

Panel options#

В разделе Параметры панели на панели редактора панелей задайте основные параметры, такие как заголовок и описание панели, а также ссылки на панели. Дополнительные сведения смотри в разделе Настройка параметров панели.

Tooltip options#

Параметры всплывающей подсказки управляют наложением информации, которое появляется при наведении курсора мыши на точки данных в визуализации.

Tooltip mode#

При наведении курсора на визуализацию Grafana может отображать всплывающие подсказки. Выберите, как будут выглядеть всплывающие подсказки.

Single - Всплывающая подсказка при наведении курсора показывает только один ряд, на который вы наводите курсор в визуализации. All - Всплывающая подсказка при наведении курсора мыши отображает все серии в визуализации. Grafana выделяет серию, на которую вы наводите курсор, жирным шрифтом в списке серий во всплывающей подсказке. Hidden - не отображает всплывающую подсказку при работе с визуализацией.

Values sort order#

Если вы установите для режима подсказки значение «All», отобразится параметр «Порядок сортировки значений». Этот параметр определяет порядок, в котором значения отображаются во всплывающей подсказке. Выберите один из следующих вариантов:

• None - Grafana автоматически сортирует значения, отображаемые во всплывающей подсказке.

• Ascending - значения во всплывающей подсказке перечисляются от наименьшего к наибольшему.

• Descending - значения во всплывающей подсказке перечисляются от наибольшего к наименьшему.

Hover proximity#

Задайте расстояние при наведении курсора (в пикселях), чтобы определить, насколько близко курсор должен находиться к точке данных, чтобы вызвать отображение всплывающей подсказки. На следующей записи экрана показан этот параметр в визуализации временных рядов:

Legend options#

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

Axis options#

Параметры в разделе Axis определяют способ отображения осей x и y. Некоторые параметры не вступают в силу, пока вы не нажмете кнопку за пределами редактируемого поля. Можно нажать Enter.

Placement#

Выберите расположение оси y. Выберите одно из следующих значений:

• Auto - Автоматическое назначение оси y ряду. Если имеется два или более ряда с разными единицами измерения, Grafana назначает левую ось первой единице измерения, а правую - последующим единицам измерения.

• Влево - Отобразить все оси y с левой стороны.

• Вправо - Отобразить все оси y с правой стороны.

• Скрытый - Скрыть все оси. Чтобы выборочно скрыть оси, добавьте переопределение поля, предназначенное для определенных полей.

Scale#

Установите шкалу значений по оси y. Выберите один из вариантов:

• Линейный - делит шкалу на равные части.

• Логарифмический - используйте логарифмическую шкалу. При выборе этой опции появится список, в котором можно выбрать двоичную (по основанию 2) или обычную (по основанию 10) логарифмическую шкалу.

• Symlog - Используйте симметричную логарифмическую шкалу. При выборе этого параметра отображается список, в котором можно выбрать двоичную (с основанием 2) или обычную (с основанием 10) логарифмическую шкалу. Параметр линейный порог позволяет задать порог, при достижении которого шкала изменяется с линейной на логарифмическую.

Soft min and soft max#

Установите параметр «Плавный минимум» или «плавный максимум», чтобы лучше контролировать пределы оси y. По умолчанию Grafana автоматически устанавливает диапазон для оси y на основе набора данных. Плавные настройки min и soft max могут предотвратить увеличение небольших изменений в данных, когда они в основном плоские. Напротив, жесткие значения min и max помогают избежать искажения полезных деталей в данных, отсекая периодические всплески после определенной точки. Чтобы задать жесткие ограничения по оси y, задайте стандартные параметры min/max. Дополнительные сведения см. в разделе Настройка стандартных параметров.

Graph styles options#

Параметры в разделе Стили графиков позволяют управлять общим видом дополнительных полей в визуализации, за исключением цвета.

Style#

Выберите, следует ли отображать данные временных рядов в виде линий, столбцов или точек. Можно использовать переопределения для объединения нескольких стилей на одном графике. Выберите один из следующих вариантов:

Line interpolation#

Выберите способ интерполяции последовательной линии на графике:

• Linear - точки соединяются прямыми линиями.

• Smooth - точки соединяются изогнутыми линиями, что сглаживает переходы между точками.

• Step before- Линия отображается в виде шагов между точками. Точки отображаются в конце шага.

• Step after - линия отображается в виде шагов между точками. Точки отображаются в начале шага.

Gradient mode#

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

• None - градиентная заливка отсутствует. Это настройка по умолчанию.

• Opacity - градиент непрозрачности, при котором непрозрачность заливки увеличивается по мере увеличения значений по оси y.

• Hue - тонкий градиент, основанный на оттенке основного цвета.

• Scheme - цветовой градиент, определяемый вашей цветовой схемой. Эта настройка используется для области заливки и линии. Дополнительные сведения о схеме смотри в разделе Режим градиента схемы.

На внешний вид градиента влияет настройка Fill opacity. На следующем рисунке показана Fill opacity, установленная на 50.

Scheme gradient mode

В режиме градиента Scheme линия или столбик получают градиентный цвет, определенный из выбранной цветовой схемы в Standard настройках визуализации.

На следующем рисунке показана линейная диаграмма с выбранной цветовой схемой Green-Yellow-Red (by value):

Если для Color scheme задано значение From thresholds (by value), а для Gradient mode - значение Scheme, то цвет линии или штриха меняется по мере того, как он пересекает заданные пороговые значения:

Line style#

Выберите стиль сплошной, штриховой или пунктирно-точечной линии:

Solid - Отображать сплошную линию. Это настройка по умолчанию. Dash - Отображать пунктирную линию. При выборе этого параметра отображается список, в котором можно выбрать длину и интервал (length, gap) для штрихов линии. По умолчанию интервал между точками равен 10, 10. Точки - отображение пунктирных линий. При выборе этого параметра отображается список, в котором можно выбрать интервал между точками (длина = 0, разрыв). По умолчанию интервал между точками равен 0, 10.

Connect null values#

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

• Never - Точки данных временного ряда с пробелами в данных никогда не соединяются.

• Always - точки данных временных рядов с разрывами в данных всегда связаны.

• Threshold - укажите пороговое значение, при превышении которого разрывы в данных больше не связаны. Это может быть полезно, когда связанные промежутки в данных имеют известный размер и/или находятся в известном диапазоне, и промежутки за пределами этого диапазона больше не должны быть связаны.

Disconnect values#

Выберите, следует ли устанавливать пороговое значение, при превышении которого значения в данных должны быть отключены:

• Never - точки данных временных рядов в данных никогда не отключаются.

• Threshold - укажите пороговое значение, при превышении которого значения в данных будут отключены. Это может быть полезно, когда требуемые значения в данных имеют известный размер и/или находятся в известном диапазоне, и значения за пределами этого диапазона больше не должны быть подключены.

Чтобы изменить цвет, используйте поле «Стандартная цветовая схема».

Show points#

Укажите, следует ли отображать точки данных в виде линий или столбцов.

Выберите один из следующих вариантов:

• Auto - Функция автоматической графики определяет видимость точки на основе плотности данных. Если плотность низкая, то отображаются точки.

• Always - Точки отображаются всегда, независимо от плотности набора данных.

• Never - Не показывай свои очки.

Stack series#

Укажите, будет ли программа Grafana накладывать или отображать ряды друг на друга. Будьте осторожны при использовании наложения, поскольку это может привести к созданию вводящих в заблуждение графиков. Чтобы узнать больше о том, почему наложение может быть не лучшим подходом, обратитесь к разделу «Проблема с наложением». Выберите один из следующих вариантов:

• Off - Отключает наложение рядов. Когда он выключен, все ряды занимают одинаковое пространство в визуализации.

• Normal - Ряды располагаются друг над другом.

• 100% - Количество рядов в процентах, при котором все ряды складываются в 100%.

Stack series in groups

Параметр Stacking group доступен только в качестве переопределения. Дополнительные сведения о создании переопределения смотри в разделе Настройка переопределений полей.

1. Отредактируйте панель и нажмите Overrides.

2. Создайте переопределение поля для параметра Stack series.

3. В режиме stacking нажмите Normal.

4. Укажите группу укладки, в которой вы хотите, чтобы серия отображалась.

Параметр Stacking group name доступен только при создании переопределения.

Bar alignment#

Задайте положение столбца относительно точки данных. В приведенных ниже примерах для параметра Показывать точки задано значение Всегда, что позволяет легче увидеть разницу в этом параметре. Точки не меняются, но столбцы меняются в зависимости от точек. Выберите один из следующих вариантов:

• Before значком «Выравнивание перед линией» Линия рисуется перед точкой. Точка располагается в заднем углу линии.

• Значок Center Линия рисуется вокруг точки. Точка располагается в центре линии. Это значение используется по умолчанию.

• After выравнивания полосы по значку полоса рисуется после точки. Точка располагается в переднем углу полосы.

Standard options#

Стандартные параметры в панели редактора панелей позволяют изменять способ отображения данных полей в визуализациях. При установке стандартного параметра изменение применяется ко всем полям или рядам. Для более детального управления отображением полей обратитесь к разделу Настройка переопределений.

Data links and actions#

Ссылки на данные позволяют подключаться к другим панелям, информационным панелям и внешним ресурсам, а действия позволяют запускать простые вызовы API без проверки подлинности. В обоих случаях вы можете выполнять эти задачи, сохраняя контекст исходной панели.

Для каждого канала передачи данных установите следующие параметры:

Value mappings#

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

Для каждого отображения значений задайте следующие параметры:

• Condition - выберите, что будет отображаться в отображаемом тексте и (необязательно) цвете:

  • Value - Конкретные значения

  • Range - Числовые диапазоны

  • Regex - Регулярные выражения

  • Special - специальные значения, такие как Null, NaN (не число), или логические значения, такие как true и false

• Display text

• Color (Optional)

• Icon (только Canvas)

Thresholds#

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

Для каждого порогового значения задайте следующие параметры:

Field overrides#

Переопределения позволяют настраивать параметры визуализации для определенных полей или серий. Когда вы добавляете правило переопределения, оно нацелено на определенный набор полей и позволяет задать несколько вариантов отображения этого поля.

Выберите один из следующих вариантов переопределения:

Результат#

После настройки и сохранения панели с визуализацией Time series выполните следующие шаги для проверки корректности отображения данных:

1. Визуальная проверка графика
   Убедитесь, что:

   • Линии, столбцы или точки отображаются в соответствии с выбранным стилем (Style).

   • Данные корректно отображаются по временной оси (ось X) — временные метки соответствуют ожидаемому диапазону и часовому поясу.

   • Ось Y отображает правильные значения с учетом выбранной шкалы (линейной, логарифмической и т.д.).

2. Проверка данных и всплывающих подсказок

   • Наведите курсор на различные точки графика и убедитесь, что всплывающая подсказка (tooltip) отображается корректно.

   • При выборе режима Single — отображается только активный ряд.

   • При выборе режима All — отображаются все ряды, а подсвечивается тот, на который наведен курсор.

   • Проверьте, что порядок значений во всплывающей подсказке соответствует выбранному Values sort order (по возрастанию, убыванию или автоматически).

3. Проверка легенды

   • Легенда отображается в выбранном месте (снизу или справа).

   • Все ряды данных присутствуют в легенде с корректными названиями.

   • При включенных статистиках — в легенде отображаются нужные метрики (например, min, max, avg).

   • При наведении на элемент легенды соответствующий ряд подсвечивается на графике.

4. Проверка стилей и заливки

   • Если включена заливка (Fill opacity), убедитесь, что область под линией закрашена с нужной прозрачностью.

   • При использовании Gradient mode — проверьте, что градиент применяется корректно (по цвету и направлению).

   • Ширина линий, размер точек и стиль линии (сплошная, пунктирная) соответствуют заданным настройкам.

5. Проверка работы с пропущенными значениями

   • Если в данных есть null или пропущенные значения:

     • При включенной опции Connect null values — линия соединяется через пропущенные точки.

     • При выключенной — линия разрывается.

   • Убедитесь, что поведение соответствует ожиданиям.

6. Проверка стекирования и выравнивания

   • Если включено Stack series:

     • При режиме Normal — ряды отображаются друг над другом.

     • При режиме Percent — все значения нормализованы к 100%.

   • При использовании столбцов — проверьте выравнивание (Bar alignment) и ширину (Bar width factor).

7. Проверка порогов и цветовой индикации

   • Если заданы Thresholds:

     • На графике визуально отображаются уровни порогов (линии или цветовые зоны).

     • Цвета рядов изменяются в соответствии с пороговыми значениями (если настроено).

   • Убедитесь, что режим порогов (абсолютный или процентный) работает корректно.

8. Проверка взаимодействий

   • При наличии ссылок на данные — клик по графику или элементу легенды должен переходить по-заданному URL.

   • При наличии действий — убедитесь, что вызов API выполняется с правильными параметрами после подтверждения.

   • Проверьте, что при изменении временного диапазона на дашборде график обновляется корректно.

9. Адаптивность и отображение

   • Откройте дашборд на разных устройствах или при изменении размера окна — убедитесь, что график масштабируется и остается читаемым.

Если все элементы отображаются корректно и данные соответствуют ожиданиям — визуализация настроена успешно. В случае отклонений — вернитесь в режим редактирования и проверьте параметры источника данных, преобразований и настройки визуализации.