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

Сегодня посмотрим, как сделать сами картинки не стационарными, а меняющимися в зависимости от значений данных. Это позволит реализовать широкий круг визуальных решений, например, создать вот такую красоту:Инфографика в 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

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