Вступление

В этом примере покажу, как можно оживить графики в QlikView. Начнем с самых простых линейных диаграмм.

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

Если раскрыть правую боковую панель: “Панель управления”, то на ней вы найдете список других видов анимаций с данным графиком. Попробуйте повыбирать и их тоже.

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

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

Рассмотрим пример динамики среднесуточной температуры за выбранный месяц. Для данного примера подойдет любой источник данных, в котором можно выделить три поля: Месяц, ДеньМесяца и некая мера “Среднесуточная”:

Создадим сначала обычный “List Box” по полю “Месяц” и выберем в нём на период построения один любой месяц.

Далее построим обычный линейный график без какой-либо анимации. Создаем Line Chart.

При создании на первой вкладке “General” сразу уберём галочку “Show Title in Chart” и нажимаем кнопку “Далее >”.

На вкладке Dimensions:
В качестве дименшина выбираем поле: ДеньМесяца, и переходим далее…

На вкладке Expressions:
добавляем одно выражение SUM(Среднесуточная)

И поменяем для него стиль отрисовки линии на “Smooth” (что в выпадающем списке, справа от галочки “Line”). Нажимаем “Готово”.

Пример (А)

На вкладке Axes:

В верхнем блоке “Expression Axes” чтобы включить отрисовку линии оси Y, увеличим параметр Width с нуля до 1, указав цвет оси.

Также в блоке “Expression Axes” нажмем на кнопку “Font” и выберем шрифт для оси Y: Arial полужирный 9, цвет зададим RGB(27,125,156) (тот же самый цвет скопируем и в первый цвет на вкладке “Colors”)

В блоке “Dimension Axis” включим галочку “Show Grid”.

На вкладке Presentation:

Увеличим толщину линии до 3 (поле ввода “Line Width”) и уберём галочки “Pop-up Labels” и “Highlight”.

На вкладке Caption отключим все специальные иконки: (“Print”, “Send to Excel”, “Allow Minimize” и “Allow Maximize”), а в поле “Title Text” пропишем формулу:

На вкладке Number в поле ввода “Symbol” впишем: °C
Получили пример (Б).

Пример (Б)

Теперь всё готово к оживлению нашего графика…

Добавляем анимацию.

Для оживления графика нам понадобится в скрипте создать вспомогательную таблицу:
animation:

Количество шагов анимации может быть абсолютно любым, но в нашем случае для одного из примера анимации (“БЕГУНОК”) мы будем рисовать линию по дням месяца, которых максимально может быть как раз 31.

Теперь перейдем на вкладку Dimensions и добавим второй дименшен, выбрав поле ID. Только переместим этот дименшен на первое место (используем кнопку “Promote”).
Предыдущий дименшен “ДеньМесяца” окажется вторым. Не уходя с вкладки, нажмем кнопку “Animate…”. В появившемся окне настроек включаем галку “Animate First Dimension”.

Далее время между отрисовками кадров (параметр “Time Between Values (ms)”) вписываем равным 50 и, следовательно, получается 20 кадров в секунду. Этот параметр 20 и вписываем в поле “Frame per Second”. Ставим галочку “Autoplay”, оставляя параметр “Play Once” не включенным.

Ну, а теперь мы можем использовать параметр “ID” в своих выражениях как угодно, зная, что во время анимации он будет меняться от 1 до 31.
Например, чтобы реализовать пример анимации “БЕГУНОК”, надо вместо выражения написать уже вот такое:

Пример (В)

Управление анимацией, что расположено под графиком, можно скрыть, наложив на неё сверху белую полоску “Text Object” или любой другой объект, а можно и оставить.

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

Анимация “ВОДОПАД” получается, если прописать формулу:

Анимация “ПЛАВЛЕНИЕ” получается, если прописать формулу:

Анимация “РАСПРЯМЛЕНИЕ” получается, если прописать формулу:

Анимация “СТРУНА” получается, если прописать формулу:

Ну, и анимация “ПАДЕНИЕ” получается, если прописать формулу:

Но, в отличии от предыдущих анимаций для этой надо ещё зафиксировать границы по оси Y, чтобы “падение” графика шло из-за границ области графика.

Для этого перейдем на вкладку Axes и включим “Static Min”, прописав для него формулу:

Если мы хотим показывать на графике ещё и сами значения, то для нашего выражения (на вкладке “Expression”) включим галочку “Values on Data Points”. Но чтобы при движении эти цифры не менялись, придется обернуть нашу формулу выражения дополнительно функцией DUAL, вот так:

Живые графики в QlikView: Приём “прореживания”

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

На этой же вкладки “Expression” раскроем (+) у нашего выражения и для “Text Color” пропишем вот такую формулу:

Пример (Г)

Приём управления фоном линейного графика

Рассмотрим пример, как можно задавать задний фон у линейного графика. Тут не идет речь о подстановке в качестве фона статической картинки, как умеет Qlik, а покажем, как можно сделать фон динамически зависимым от выбранных данных на графике.

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

Итак, продолжим работу с нашим примером Г, на котором мы остановились на предыдущем шаге. Для конструирования раскраски фона графика нам надо сначала переключить Chart на другой тип объекта.

На вкладке General переключим тип объекта на “Combo Chart”.

Перейдем на вкладку Expressions, чтобы на будущем фоне хорошо были видны узловые точки нашего графика, сделаем эти точки белого цвета. Для этого выберем существующее первое выражение и для него включим дополнительно ещё и галочку “Symbol” (выбрав тип точки “Circles”).

Нажмем теперь кнопку “Add” и добавим второе выражение, аналогично первому:

Для нового выражения выберем галочку “Symbol” (но с типом точки “Dots”), а галочку “Line” уберем (чтобы эти точки рисовались белым цветом просто пропишем для второго выражения “Background Color” формулу white() ).

Включим теперь галочку “Values on Data Points” для второго выражения и выключим её у первого. Перенесём так же и свойство “Text Color” из первого выражения во второе.

Сделаем теперь фон графика, используя возможность объекта “Combo Chart” выводить кроме линий ещё и прямоугольные гистограммы.

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

и выберем тип отрисовки для третьего выражения, на этот раз “Bar”(галочку “Line” выключим)

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

и тоже выберем для него тип отрисовки “Bar”. Галочку “Line” выключим.

Чтобы отображаемые гистограммы соединились один под другим, перейдем на вкладку Style и переключим стиль группировки на “Stacked”.

НА ЗАМЕТКУ! Если переключатель выбора стиля группировки “Stacked” не активен, то временно переключаемся на вкладку “General”, выбираем тип объекта “Bar Chart”, обратно переключаемся на вкладку “Style”, переключаем тип на “Stacked”, возвращаемся на вкладку “General” и возвращаем тип объекта на “Combo Chart”).

На вкладке Presentation выключаем галочку “Show Legend”, чтобы не показывать легенду на графике.

НА ЗАМЕТКУ! Если в какой-то момент у вас перестают отрисовываться на графике метки в узловых точках, то надо просто увеличить параметр “Max Values Shown”. В нашем случае увеличим параметр до 200).

При цветах по умолчанию (на вкладке “Colors”), получим пример (Д).

Пример (Д)

Соединим выводимые на заднем фоне графика гистограммы, чтобы между ними не оставалось пробелов. Для этого на этой же вкладке “Presentations” поставим
параметр “Bar Distance” и “Cluster Distance” равными нулю.

Теперь “восстановим” серую горизонтальную линию, которая рисовала ось X (созданные гистограммы стали перекрывать её)

Для этого в блоке “Reference Lines” создадим эту линию. Нажимаем кнопку “Add…” и в открывшейся форме у “Expression” вписываем 0, цвет меняем на серый, а стиль сплошная линия.

На вкладке Colors установим нужные цвета для положительной и отрицательной части графика.

Для третьего (сверху) цвета делаем вертикальную растяжку от цвета RGB(254,233,216) к цвету RGB(251,185,132). А для четвертого (сверху) цвета сделаем вертикальную растяжку от цвета RGB(216,234,252) к цвету RGB(132,188,244).

И последний штрих. Рассмотрим приём создания чередующейся вертикальной раскраски.
Этот простейший способ подходит, если дименшен представлен идущими подряд числами/датами или как у нас днями месяца.

НА ЗАМЕТКУ! Если дименшен произвольный или не числовой, тогда создается вспомогательное, скрытое выражение, которое задает последовательность ноль-один… на основе предыдущего своего же значения “Above”).

Итак, для нашего случая доработаем 3 и 4 выражение вот так…

Третье выражение:

Четвертое выражение:

Но теперь понадобится создать ещё 5 и 6 выражение.

Пятое выражение:

И шестое выражение:

Для обоих новых выражений, конечно же, ставим “Bar”, а цвета для них на вкладке “Colors” сначала скопируем из 3 и 4 цвета в 5 и 6, только потом для цвета 5 и 6 передвинем слегка ползунок прозрачности. Получился пример (Е).

Пример (Е)

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

Если в исходной таблице добавить уже готовые или рассчитанные колонки “Минимальная” и “Максимальная” температура за всю историю наблюдений, то тогда отличие от предыдущего решения – замена 3,4,5,6 выражения на вот такие…

Третье выражение:

Четвёртое выражение:

и “Background Color” для него:

Пятое выражение:

И шестое выражение:

Кроме того, надо подправить формулы принудительного определения максимума и минимума графика на вкладке “Axes”: параметр “Static Min” теперь:

Пример (Ж)

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

Пишите свои комментарии и соображения. Буду рад обратной связи!