Добрый день, коллеги! Сегодня хочу показать несколько интересных примеров встраивания мэшапов Qlik Sense, которые можно встретить на просторах сети. Надеюсь, они подадут вам новые интересные идеи.

Встроенная карта

Начну с примера из России. «Пыльца Club», социальный проект, призванный помочь в управлении симптомами пыльцевой аллергии, на этой неделе разместил у себя мэшапы Qlik Sense с данными о самочувствии пользователей мобильного приложения за последние 2 дня (аллерген – береза). Карта полностью интерактивна и охватывает уже не только Россию: https://pollen.club/traffic/.

Мэшапы в Qlik Sense

Смена тем и стилей

В этом примере вы видите, как просто можно поменять оформление дэшборда в мэшапе Qlik Sense.

Мэшапы в Qlik Sense

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

Чарты и объекты Qlik Sense в мэшапе, по большей части, передаются как объекты HTML5 <canvas>, поэтому цвета диаграмм настроены через переменные в кодах rgb().

Работа с элементами вне макета

В этом примере вы видите как элементы, размещенные вне макета, могут помочь в более тонкой настройке дэшборда.

Мэшапы в Qlik Sense

Интерактивные возможности для фильтрации данных сделаны с помощью листбоксов. Листбоксы в этом примере изначально скрыты от пользователя. Когда пользователю нужно добавить дополнительный фильтр, он может просто открыть панель фильтрации данных и активировать кнопку фильтры «Toggle filters». Кстати, стандартный зеленый и серый при выборке в листбоксах могут быть настроены с помощью CSS-стилей.

Всплывающие окна

Всплывающие окна легко реализовать с помощью twitter bootstrap, например, так:

Анимированная

В этом примере видно, как с помощью выделения «лассо» можно выделить данные на поп-ап карте с дальнейшим масштабированием.

До новых встреч! Прокомментируйте, кто уже активно работает с мэшапами Qlik Sense, какие у вас впечатления и планы.