Вступление

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

Способ 1: Выбор значений из диапазона

Первый способ — это выбор значения в нужном диапазоне через равные промежутки. С этой задачей обычно хорошо справляется объект QlikView «Slider».

В нашем первом примере мы позволяем пользователю выбрать уровень сервиса из диапазона от 10 до 90% с шагом 5%, но при этом показываем полную шкалу выбора от 0 до 120%. К тому же мы визуально сразу показываем ту раскраску, которая будет применяться для получившихся диапазонов.

Рассмотрим, как это реализовано.

Исходные данные:

Создадим для нашего первого примера переменную:

Перейдем к построению

Создадим объект «Gauge Chart». При создании на первой вкладке «General» сразу уберём галочку «Show Title in Chart», следующий лист «Dimensions» пропускаем (нажимаем кнопку «Далее>»), а на следующей вкладке «Expressions» в появившемся окне редактора формул, просто набираем число 120 (это правая граница нашего диапазона, который будет разбит на три диапазона) и жмем кнопку «OК», после завершаем создание объекта кнопкой «Готово». В

итоге получим такую визуализацию как в примере (A):

Пример (А)

Теперь дорабатываем наш Chart: открываем его свойства и заходим на вкладку Presentation:

В поле ввода «Max» вписываем ту же самую правую границу 120. Добавляем ещё один сегмент (нажимаем на кнопку «Add…») и убираем галочки «Autowidth Segments» и «Pop-up Labels».

Теперь зададим цвета сегментов и зададим их границы. На той же вкладке выберем первый сегмент (Segment 1) и войдем в настройки цвета.

Переключим выбор на «Two Colors Gradient»; Основной цвет (Base Color) устанавливаем Calculated=RGB(255,107,98); Второй цвет (Second Color) — устанавливаем Calculated=RGB(255,197,193); Стиль закраски (Gradient Style) выбираем Vertical.

Выбираем второй сегмент (Segment 2) и аналогично первому настраиваем цвет — переключаем выбор на «Two Colors Gradient»; Основной цвет (Base Color) устанавливаем Calculated=RGB(222,241,255); Второй цвет (Second Color) — устанавливаем Calculated=RGB(117,197,255); Стиль закраски (Gradient Style) выбираем Vertical.

Так же для второго сегмента не забудем указать, с какой границы он начинается в поле ввода (Lower Bound) впишем:

Выбираем третий сегмент (Segment 3) и для него зададим однотонный цвет. Выбор оставим на Solid Color; Основной цвет (Base Color) пропишем Calculated=RGB(36,164,206). Границу, с которой начинается третий сегмент пропишем =100.

Отключаем индикатор (Indicator), установив его режим отображения (Mode) в значение: «No Indicator».

Количество основных рисок (Major Units) поставим 13, а выводить надписи поставим над каждой риской. Major Unit ставим = 1.

Шрифт надписей над рисками выберем: Arial, 8, Курсив.

На вкладке Style: переключаем вид объекта на «полоску» (вторая пиктограма сверху) и ориентацию построения на «горизонтально». Получили пример Б.

Пример (Б)

Итак, осталось немного:

на вкладке Caption убираем галочку «Show Caption».

на вкладке Layout: убираем галочку «Use Border».

Получился Пример В


Пример (В)

Построение главного элемента выбора

Теперь перейдем к построению объекта управления переменной. Создаем объект «Slider».

На вкладке «General» переключим объект управления слайдера на «Variables» и выберем из списка переменную: КритическийУровеньСервиса

На этой же вкладке зададим границы и шаг слайдера.

Min Value = 10; Max Value =90; включим Static Step =5.

Режим выбора (Mode) оставим Single Value. Нажмем OK.

На вкладке Presentation:

Переключим режим отрисовки рисок на «Use Custom Scale», количество рисок, которое надо нарисовать «Major Units» поставим =17, уберём отображение значений над рисками «Labels on Every» поставим =0, и уберём промежуточные риски «Minor Units per Major Unit» тоже поставим =0.

Отключаем галочку «Show Scroll Arrows».

Справа от цвета «Slider Background» передвигаем ползунок «Transparency» на 100%. Цвет метки текущего значения (Thumb Tack) сделаем черным и цвет фона (Scale Background) делаем прозрачным (тоже передвигаем ползунок «Transparency» на 100%).

Получили пример Г.

Пример (Г)

 

Осталось переместить слайдер чуть повыше (на вкладке «Layout» переключить «Layer» на «Top») и, меняя размеры и расположение слайдера, совместить его с нашим ранее созданным объектом «Gauge Chart». Вот и получился наш первый пример Д.

Пример (Д)

 

Способ 2: Выбор значений из диапазона

Рассмотрим второй пример и его реализацию.

Исходные данные для второго примера:

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

присвоив ей по умолчанию одно из значений списка.

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

Пример (Е)

Перейдем к построению

Выбор значения из возможного списка реализуем с помощью «Combo Chart». Создаем объект «Combo Chart». При создании на первой вкладке «General» сразу уберём галочку «Show Title in Chart», нажимаем кнопку «Далее>» и на следующей вкладке «Dimensions» выбираем поле:

_POSSIBLE_SELECT.

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

DUAL( Only({1}_POSSIBLE_SELECT), 1)

Для этого выражения убираем в разделе «Display Options» галочку с «Bar» и ставим у «Line». Так же отмечаем галочкой «Values on Data Points». После чего добавим второе выражение, ссылающееся на первое:

И для него уже уберём «Line», а поставим галочку «Symbol» (Dots).

Переключаемся на вкладку Presentation:

Выключим показ легенды, убрав галочку с «Show Legend». Толщину линии уменьшим, поставив «Line Width» = 1, а размер точек наоборот увеличим, подняв «Symbol Size» до 6. Уберём так же галочки «Pop-up Labels» и «Highlight». Получили пример Ж.

Пример (Ж)

Продолжаем…

На вкладке Axes:

Выберем первое выражение и включим галочку «Hide Axis» (скроем ось Y). Так же зайдем по кнопке в Font… и увеличим размер шрифта до 11. Скроем и ось X, убрав на вкладке «Dimensions» галочки «Label» и «Show Legend».

Теперь, чтобы наш график показывал выбранное значение переменной «ОграничениеРасчета», вернемся на вкладку «Expressions» и пропишем управление цветом закраски линии и точек.

У первого выражения нажмем слева от него на «+» и для «Background Color» зададим цвет линии: RGB(174,174,174)

Выберем второе выражение и тоже нажмем слева от него на «+», а в «Background Color» напишем такое условие:

Как видим, мы сделали, чтобы цвет выбранного значения менялся равномерно от синего до красного. Эту же формулу скопируем и в «Text Color» первого выражения, чтобы и цвет цифр так же менялся от выбранного значения. Если же нам надо, чтобы у выбранного значения не только загорался цвет, но и менялся шрифт, например, на жирный, тогда у первого выражения в «Text Format» надо прописать условие:

Можно также приподнять цифры над точками, заменив первое выражение на вот такое доработанное:

В этом выражении ещё и добавили вертикальную сноску, показывающую на выбранное значение (пример З).

Пример (З)

Продолжаем построение…
Чтобы при малой высоте нашего объекта цифры не обрезались сверху, переместим отрисовку линии чуть ниже центра. Для этого на вкладке «Axes» для первого выражения надо включить и прописать «Static Min» = 1, а в «Static Max» вписать где-то 2.3

Чтобы выбранная точка смотрелась крупнее остальных, добавим третье выражение на вкладке «Expressions»:

Для него тоже уберем «Line» и поставим галочку «Symbol», но на этот раз выберем (Circles) и пропишем «Background Color»:

А теперь сделаем сам выбор значения! Откроем меню «Settings\Document Properties…», перейдем на вкладку «Triggers» и в секции «Field Event Triggers» выберем наше поле _POSSIBLE_SELECT

Пропишем для него триггер на событие «OnSelect»: добавим первое действие: «External\Set Variable» и для переменной «ОграничениеРасчета» пропишем формулу Value:

Добавим второе действие в этот триггер «Selection\Clear Field» и впишем в него поле:

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

Получили пример И.

Пример (И)

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

Давайте посмотрим, как можно исправить этот недочет. Перейдем снова на вкладку Expressions: добавим четвёртое выражение, только вместо формулы напишем в нём просто константу 3.

Уберем в «Display Options» «Line» и поставим галочку «Bar».

Для выравнивания и точек и баров, перейдем на вкладку «Style» и переключимся на способ группировки: «Stacked». Ну, и, конечно же, саму закраску баров надо убрать, пропишем для этого в четвёртом выражении «Background Color»:

ARGB(0,0,0,0)

Осталось отключить заголовок (убрать галку с «Show Caption» на вкладке «Caption») и бордюр (убрать галку с «Use Borders» на вкладке «Layout»).

Вот и получился наш пример выбора. Пример К.

Пример (К)

На этом сегодня все, друзья! В скором времени выйдет новая статья третьей части Альманаха Визуализации. До новых встреч!