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

Сегодня посмотрим, как сделать сами картинки не стационарными, а меняющимися в зависимости от значений данных. Это позволит реализовать широкий круг визуальных решений, например, создать вот такую красоту:Инфографика в QlikViewТо, что мы обычно показываем лишь в таблице, тут отображается  овальными столбиками. Свой цвет закреплен за каждым из шести типов. Сами типы тоже можно выбирать фильтрами в любых комбинациях и при выборке все столбцы остаются овальными при любом изменении значений.

Итак, приступаем.

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

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

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

Подготовительная работа

  1. Создадим обычный Combo Chart (Chart – Combo Chart).
  2. В качестве единственного дименшена укажем расчетный и введем:
         =_types

Это означает, что мы строим график по независимой размерности, которая никак не связана  с остальными таблицами, но содержит все уникальные значения  другой размерности типов – “type”.

  1. На странице Выражения (Expressions) вписываем формулу расчета:
    =SUM(IF(type=_types,data)) 

и в поле «Метка» (Label) назовем его “val”.
Свойства диаграммы QlikViewПолучили стандартное начало:

Инфографика в QlikView

  1. Делаем косметические настройки:

На вкладке Общие (General): 

  • Отключаем галочку «Показать заголовок диаграммы» (“Show Title in Chart”),
  • Включаем галочку «Только чтение» (“Read Only”). Свойства диаграммы QlikView

На вкладке Измерения (Dimensions):

  • Отключаем у дименшена галочки Метка (“Label”) и Показать легенду (“Show Legend”)
  • Включаем галочки «Показать все значения» (“Show All Values”) и «Скрыть значения, когда Null» (“Suppress When Value Is Null”):Свойства диаграммы QlikView

На вкладке Оси (Axes):  Скрываем ось Х, включив галочку «Скрыть ось» (“Hide Axis”):Свойства диаграммы QlikView

 На вкладке Представление (Presentation): 

  • Отключаем галочку «Скрыть нулевые значения» (“Suppress Zero-Values”),
  • Параметры полоски (Кластерное расстояние) (“Cluster Distance”) уменьшим до 1.Свойства диаграммы QlikView

В итоге получим:Инфографика в QlikView

  1. Для раскраски каждого типа или столбца в свой цвет сделаем следующее:
  • Зададим в скрипте переменные:  

  • Теперь сопоставим цвет для каждого типа. Для этого на вкладке Выражения (“Expressions”), раскроем {+} и в Цвет фона (“Background Color”) впишем выражение:

Свойства диаграммы QlikView

  • На вкладке Заголовок (“Caption”) отключим заголовокСвойства диаграммы QlikView
  • На вкладке Макет (“Layout”) отключим границыСвойства диаграммы QlikView

И получим следующее:Инфографика в QlikView

  1. Теперь сделаем надписи внутри баров, но не посередине, а на самом верху.
  • Сначала заведем такую переменную:

  • На вкладке Выражения (“Expressions”) добавим второе выражение:
  • Для нашего нового, второго, выражения (выбрать его) выставляем в «Показать опции» (“Display Options”):
    • галочку у Символ (“Symbol”),
    • галочку у Невидимый (“Invisible”)
    • галочку у Значения на точках графика (“Values on Data Points”).
  • У выражения раскроем {+} и впишем в «Цвет текста» (“Text Color”) константу RGB(0,0,0)
  • На вкладке Представление (Presentation) выключим галочку Показать легенду (“Show Legend”).

НА ЗАМЕТКУ! Обращаю внимание, что когда высота столбика слишком мала, подобрав в нашем условии специальный коэффициент 0.12,  мы не выводим черные надписи внутри такого маленького бара. Вместо этого будем выводить эту надпись уже поверх маленького бара. Для этого сделаем следующие изменения:

  • На вкладке Выражения (Expressions) в первом выражении (val) раскроем {+} и в «Цвет текста» (“Text Color”) впишем следующее выражение:

  • Для этого же, первого, выражения (val) тоже включим галочку «Значения на точках графика» (“Values on Data Points”).

Получим такой пример:Инфографика в QlikView

  1. Теперь сделаем фон графика прозрачным. На вкладке Цвета (Colors) двигаем ползунок Прозрачность (“Transparency”) до 100%. Это позволит подложить под график отдельный простой объект Текст (“Text”) с любым фоном, тенью и размером. Вот, что получается:Инфографика в QlikView

Готовим овальные картинки для диаграммы

Теперь, когда мы определились с фоном, а точнее с его цветом, можно приступать к изготовлению “овальных” картинок.

  1. Откройте любой графический редактор (например, Photoshop) и задайте размер канвы близкий к максимальному прямоугольнику, который у нас сейчас рисуется на графике. Иными словами выберите высоту и ширину картинки, на которой будет рисоваться “овал”.
  2. Сделайте заливку фона сплошным цветом, таким же, как и фон подложки под нашим графиком. В нашем примере это RGB(44,44,44).
  3. Теперь выберите цвет, близкий к цвету фона, но слегка ярче. Этим цветом мы будем рисовать овалы.
  4. Нарисуем первый овал максимальным, на весь прямоугольник. То, что нарисовали – выделим по цвету и удалим – получится, что наш нарисованный овал станет прозрачным.
  5. Сохраним в файл формата PNG (именно в этом формате прозрачный цвет сохраняется, а не заменяется белым при сохранении рисунка). Если вы задумали нарисовать 100 градаций высоты овального прямоугольника, тогда самый максимальный назовите “oval_100.png”.
  6. Далее начинается рутинная работа. Слегка сдвиньте нарисованный овал вниз (например, на 2 пикселя) и получившийся новый овал сохраните уже как “oval_99.png”.
  7. Проделайте данную процедуру до тех пор, пока овал ещё виден.
  8. На последних картинках, когда размер овала переходит в круг и меньше, мы предусмотрим режим, когда метка будет писаться не внутри овала, а над ним. Для этого случая надо пространство над овалом выделить и тоже сделать прозрачным, иначе выводимые над баром метки будут закрываться фоном картинки.

Вот, что выйдет:Инфографика в QlikView

  1. Все сохраненные PNG-файлы выложим в отдельный каталог.

Выводим овалы на диаграмму QlikView

  1. Теперь мы можем в скрипте загрузить все картинки в память QlikView:

Как видим, мы создали отдельную скрытую таблицу “_PNG”, в которой к каждому значению поля “_Ind” привязали свою картинку (от 1 до 100).

  1. Перейдем к созданию и размещению поверх наших гистограмм созданных картинок. Создаем объект Текст (Text) и на вкладке Общие (General) прописываем:
    • Вместо текста введем формулу:
    • Ниже, в Представление (“Presentation”) выберем Рисунок (“Image”),
    • В параметре «Растянуть рисунок» (“Image Stretch”) выберем «Не растягивать» (“No Stretch”).
    • Фон (“Background”) сделаем прозрачным (ползунок Прозрачность (Transparency) на 100%).Свойства текстового объекта QlikView

Таким образом, мы вывели картинки для группы Type F. Совместим этот объект с крайним правым прямоугольником, который показывает значение группы Type F (уровень Слой (“Layer”) у картинки надо поднять выше, чем у графика).

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

  1. Точно так же создадим ещё 5 текстовых объектов (по количеству столбцов) для оставшихся групп и разместим каждый над своей группой. Итак, овальные гистограммы готовы!Инфографика QlikView

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