Пузырьки

График “Пузырьки” (Bubble Chart, Correlation) используется для визуализации трех измерений одновременно. Расположение пузырька определяется первыми двумя измерениями (measures), которые соответсвуют горизонтальной и вертикальной осям. Третье измерение соответствует размеру пузырька.

У каждого пузырька выводится подпись - название размерности (dimension). На графике присутствует возможность двигать график вверх-вниз и вправо-влево, а также приближать и отдалять. Ползунок в правой части графика позволяет отфильтровать отображение пузырьков исходя из третьего измерения, а именно: пузырьки, которые не входят в диапазон, становятся слабо видны. Кроме того есть возможность выставить range у обеих осей, таким образом настроить диапазон для оси x и y.

Фильтрация пузырьков с помощью ползунка и урезание осей с применением range представлено на картинке ниже:

  style: {
      measures: {
        avg_humidity: {
          range: [
            25,
            90,
          ],
          title: 'Влажность, %',         
        },
        avg_temperature_celsius: {
          range: [
            '5',
            '40',
          ],
          title: 'Cредняя Температура',         
        },
        min_temperature_celsius:          
          title: 'Минимальная температура',
        },
      },
    },

Дэш пузырьки с применением range и ползунка

Пример использования format:

  measures: {
        avg_humidity: {
          range: [
            25,
            90,
          ],
          title: 'Влажность',
          format: '[/100]#,00',
        },
  },

Блоки конструктора

Конструктор включает, помимо стандартных полей (расширенное руководство пользователя), возможность настройки опорной линии в блоке «Отображение», о чем подробнее будет написано ниже.

JSON-конфигурация

Ключи title (глава 1.2.1), description (глава 1.2.2), frame (глава 1.2.3), bgImage работают аналогично описанию в руководстве по конфигурации дэшлетов в соответствующих блоках.

Поле view_class для данного дэша имеет значение correlation.

Далее представлена таблица ключей, поддерживаемых дэшем “Пузырьки”.

dataSource

Опции koob, dimensions, measures, limit, sortBy, xAxis, yAxis и filters из секции dataSource подробно описаны в руководстве по конфигурации дэшлетов (глава 1.2.4).

В блоке style можно настроить стиль отображения измерений. Список ключей блока style:

Название ключа	Возможные значения	Описание
title	Строка, LPE-выражение	Указание заголовка для показателя, отображаемого в легенде и всплывающей подсказке.
format	Строка	Отображение значения в тултипе и в подписях на графике в соответствии с указанным форматом. Все варианты форматов описаны в руководстве по конфигурации дэшлетов.
range	Массив	Указание диапазона минимального и максимального значения для оси. В массиве можно указать меньший диапазон и таким образом урезать “лишние” значения. Если указывается формат вида `format: '[/100]##,0`, то в range для корректной работы используются значения без форматирования.

Правила указания данных стилей представлены в руководстве по конфигурации дэшлетов.

display

Особенности дэша: в этом блоке настраивается цвет пузырьков, опорные линии.

Название ключа	Возможные значения	Описание
color	Строка, LPE-выражение	Указание цвета для пузырька. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.), а так же с помощью lpe-выражения.
limit	Число	Указывает количество пузырьков (значений размерностей).
bgColor	Строка	Указание цвета фона дэша. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.)
headerStyle	Объект	Используется для указания стилей заголовка дэша (fontSize, background, color).
referenceLineX	Число	Указание расположения опорной линии на оси x.
referenceLineY	Число	Указание расположения опорной линии на оси y.
colorReferenceLineX	Строка	Указание цвета опорной линии x.
colorReferenceLineY	Строка	Указание цвета опорной линии y.

Примеры lpe-выражений для color:

//пример для measure (условие можно указывать для всех трех измерений):
color: 'lpe:if(avg_temperature_celsius>20, "green","blue")',
//пример для dimension
color: 'lpe:if(Country="Kuwait", "green","blue")',

forecast

При указании пустого объекта forecast в конфигурации дэша Пузырьки будет построена линейная аппроксимация (линия тренда), а также указан коэффициент корреляции.

 forecast: {},

Также, линию тренда можно отобразить открыв меню дэша -> Прогнозы и выбрать необходимые параметры для построения тренда.

Доступные для выбора функции для рассчета тренда:

POLYNOMIAL - полиномиальная;
LINEAR - линейная;
EXPONENTIAL - экспонинцеальная;
LOGARITHMIC - логарифмическая;
POWER - степенная;

После указания степени (целочисленное значение) и нажатия кнопки ОК отобразится тренд. В случае нажатия на кнопку Отмена отображение дэша останется без изменений. Для скрытия отображенного тренда необходимо еще раз перейти в меню дэша и нажать на Прогнозы

options

Описывает различные дополнительные настройки при отображении деша.

Пример указания:

"options": ["HasRadius","ShowDataLabels"],

Название ключа	Описание
!TopBarMenu	Скрыть меню визеля.
!TopBar	Скрыть заголовок дэша.
Hidden	Сокрытие дэша.
Transparent	Фон дэша соответствует фону подложки дэшборда.
Fixed	При включенной опции дэш закреплен на экране при скроллировании.
!Expanded	Сокрытие возможности разворачивания дэша на весь экран.
HasRadius	Показать ползунок скрытия/отображения данных.
ShowDataLabels	Показать названия для измерений.

Пузырьки

Блоки конструктора​

JSON-конфигурация​

dataSource​

display​

forecast​

options​