Альманах визуализации, выпуск №2/2. Развлекаемся с гистограммами в QlikView: овальные столбцы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В итоге получим:

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

• Зададим в скрипте переменные:  

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

• На вкладке Заголовок («Caption») отключим заголовок
• На вкладке Макет («Layout») отключим границы

И получим следующее:

6. Теперь сделаем надписи внутри баров, но не посередине, а на самом верху.

• Сначала заведем такую переменную:

• На вкладке Выражения («Expressions») добавим второе выражение:
  
  =IF(val=0 or val/vMaxValue<0.12, ` `, DUAL(Num(val), val-vMaxValue/8.4))

  1	=IF(val=0 or val/vMaxValue<0.12, ` `, DUAL(Num(val), val-vMaxValue/8.4))

• Для нашего нового, второго, выражения (выбрать его) выставляем в «Показать опции» («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»).

Получим такой пример:

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

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

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

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

Вот, что выйдет:

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

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

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

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

2. Перейдем к созданию и размещению поверх наших гистограмм созданных картинок. Создаем объект Текст (Text) и на вкладке Общие (General) прописываем:
   • Вместо текста введем формулу:
     
     =`qmem://_Ind/` &Num(Floor( 100*SUM(IF(type=`Type F`,data)) / vMaxValue))

     1	=`qmem://_Ind/` &Num(Floor( 100*SUM(IF(type=`Type F`,data)) / vMaxValue))

   • Ниже, в Представление («Presentation») выберем Рисунок («Image»),
   • В параметре «Растянуть рисунок» («Image Stretch») выберем «Не растягивать» («No Stretch»).
   • Фон («Background») сделаем прозрачным (ползунок Прозрачность (Transparency) на 100%).

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

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

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

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