Как создать дашборд за 5 шагов без навыков программирования

9 Ноябрь 2022
На платформе Insight можно создавать дашборды на любой вкус и цвет. От больших медиапанелей для координационных центров до мобильной аналитики. От операционных и аналитических дашбордов до интерактивных презентаций со строилайнами. Об аналитическом сторителлинге мы уже рассказывали в одной из недавних статей, а сегодня приглашаем заглянуть в самое сердце Insight — внутрь нашего конструктора дашбордов.
Делаем дашборд

Представьте героя: недавний выпускник ВУЗа Женя устраивается работать в российскую команду организаторов всемирно известных конференций TEDx. Ему необходимо спланировать график выступлений на следующий год, выбрать спикеров и утвердить темы. Для начала Женя решает изучить, какие выступления TEDx в других городах и странах набрали больше всего просмотров на YouTube. К задаче он подходит основательно и намерен не только проанализировать статистику, но еще и визуализировать данные.

Весьма кстати на Женином рабочем компьютере оказывается свежая версия BI- платформы Insight. С ней удобно решать такие задачи. Пройдем вместе по основным этапам создания несложного дашборда.

Шаг 1. Загрузка данных.
Первым делом разберемся с сырыми данными, изучим набор полей и сам контент, благодаря которому мы построим наглядную аналитику. Исходные данные формируются в датасеты и загружаются в папку, где будут храниться все данные будущего аналитического приложения.
Как создать дашборд за 5 шагов без навыков программирования
Как создать дашборд за 5 шагов без навыков программирования
Шаг 2. Создание проекта.
Данные загружены, и теперь можно приступать к созданию проекта. Для этого надо зайти в редактор, достаточно указать название в поле “заголовок”, нажать “сохранить” — и можно начинать работу. В левой части редактора отображаются страницы и шаблоны. Можно импортировать шаблон из существующего проекта или создать новый. В верхней части расположен менеджер файлов. С его помощью можно загрузить нужные шрифты или фоновую картинку.
Как создать дашборд за 5 шагов без навыков программирования
Шаг 3. Разметка.
Чтобы верстать дашборды и настраивать внешний вид их содержимого, используется специальное поле. Самое интересное находится справа от него. Там богатая библиотека виджетов (они же — компоненты платформы для визуализации), которая все время пополняется. Есть самые разные чарты, диаграммы, отображения карт, таблицы, всплывающие окна и многое другое. Уже сейчас в библиотеке больше полусотни виджетов, и их характеристики непрерывно улучшаются.
Как создать дашборд за 5 шагов без навыков программирования
Работа над новым дашбордом начинается с разметки (это, кстати, тоже виджет). Ее настройки задают расположение элементов на странице, а значит и визуализации на будущем дашборде. Нас часто спрашивают — можно ли управлять размещением виджетов вплоть до пикселей? На платформе Insight предусмотрена такая возможность. Если элементов будет много, один виджет “Разметка” можно разместить прямо внутри другого.
Как создать дашборд за 5 шагов без навыков программирования
Как создать дашборд за 5 шагов без навыков программирования
Шаг 4. Выбор виджетов и подключение данных.
В панели слева можно задать желаемое количество строк и колонок, размеры и отступы. После этого — выбрать необходимый виджет справа и перетащить в любое место размеченного макета. Для задачи с аналитикой по конференциям TEDx отлично подойдет популярный виджет “Комбинированная диаграмма”.
Как создать дашборд за 5 шагов без навыков программирования

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

Поскольку мы анализируем динамику просмотров конференций TEDx, нам интересно количество просмотров в разрезе даты публикации выступлений. Жмем “сохранить” — наша визуализация готова!

Как создать дашборд за 5 шагов без навыков программирования
Как создать дашборд за 5 шагов без навыков программирования
Как создать дашборд за 5 шагов без навыков программирования
Шаг 5. Отображение виджетов.
В Insight мы подумали за пользователя. Настроить любой виджет можно без знания программирования благодаря интуитивно понятному интерфейсу, подобно тому, как это делается в сервисе Tilda. Через боковое меню легко поменять тип отображения диаграммы, выбрать другой цвет для всех данных или только для значений определенной величины и делать многое другое. Пространство для творчества огромное. Например, вот сколько в Insight разных вариантов отображения комбинированных диаграмм.
Как создать дашборд за 5 шагов без навыков программирования
Как создать дашборд за 5 шагов без навыков программирования
Как создать дашборд за 5 шагов без навыков программирования
Как создать дашборд за 5 шагов без навыков программирования
Научиться работать с платформой можно всего за несколько дней. Для этого мы подготовили серию видеоуроков и написали детальный вики со скриншотами. В подробных инструкциях по работе с редактором и виджетами можно узнать все о принципах верстки, стилях и нюансах настройки для десятков компонентов. Создавать самые разнообразные по функциональности и виду дашборды сможет даже тот, кто раньше ничего подобного не делал.