Пошаговое руководство для творческой визуализации данных бизнес-аналитики в вашем приложении.
Когда вы думаете об анализе данных, вероятно, первое, что приходит на ум, - данные электронной таблицы. Но анализ данных - это больше, чем просто цифры и сухой текст. При правильном подходе и сочетании с визуальными компонентами аналитика способна полностью изменить способ ведения бизнеса и вывести его на новый уровень развития.
Независимо от того, в какой отрасли вы работаете, я глубоко уверен, что визуализация данных относится к высшим навыкам, необходимым на рынке труда. Вот почему сегодня я хочу описать, как максимально раскрыть потенциал вашей презентации с помощью поворота и построения диаграмм.
В конце концов, следуя этим рекомендациям, вы узнаете, как создать интерактивную панель управления со сводной таблицей и диаграммами. В нашем случае интерактивность просто означает, что все изменения, примененные к отчету, мгновенно отразятся на диаграммах.
Этот метод визуализации данных помогает создавать эффективные отчеты и принимать обоснованные решения. Звучит интригующе? Давайте двигаться дальше.
Что следует помнить перед началом работы
Позвольте дать вам несколько советов по визуализации:
- Выберите инструмент для обобщения ваших данных.
- Выберите правильную диаграмму и используйте естественные цветовые узоры.
- Знайте свою область и аудиторию, чтобы передавать важную информацию.
Весь процесс довольно прост, и вам нужно знать только основы JavaScript, чтобы начать работу. Я предоставлю вам код в демонстрации. Если вы хотите сразу же получить результаты, посмотрите демонстрацию CodePen в конце статьи.
Инструменты для аналитики
Мы будем использовать следующие инструменты, обеспечивающие обобщение и визуализацию данных:
- Сводная таблица Flexmonster - компонент сводной таблицы, который обогащен как основными, так и расширенными функциями отчетности - агрегированием, фильтрацией, сортировкой, встроенным экспортом и настройкой. Написанный на JavaScript, его можно легко встроить в приложение.
- Google Charts - веб-сервис, который оказался одним из самых популярных инструментов для создания диаграмм. Простота использования благодаря понятному API. Имеется достаточный список доступных типов диаграмм, которые можно настроить в соответствии с любыми требованиями к дизайну.
Давайте начнем!
Шаг 1: подготовьте данные
В этом руководстве мы пишем функцию, которая возвращает массив объектов JSON.
Вот пример моего набора маркетинговых данных:
На этом этапе я рекомендую вам выбрать свои собственные данные.
Шаг 2. Определите отчет в таблице.
Я следовал инструкциям в Руководстве по быстрому запуску Flexmonster, которое показалось мне удобным для новичков. Результат - компонент встроен в мой проект.
Теперь пора ответить, что вы хотите видеть в сетке и на диаграмме.
В этом отчете я хотел классифицировать сеансы на моем веб-сайте по трафику и посмотреть, сколько сеансов было за определенный период времени. Кроме того, я хотел проверить процент времени, проведенного пользователями на сайте.
Подготовим фрагмент для отчета.
Поместите поля в столбцы, строки, меры и определите функцию агрегирования для показателей.
Шаг 3: подключитесь к Google Charts
Во-первых, добавьте загрузчик Google Charts, включив его скрипты на веб-страницу. Во-вторых, добавляем коннектор Flexmonster:
Добавьте следующий фрагмент кода, чтобы загрузить пакеты и установить обратный вызов, чтобы знать, когда загружаются диаграммы:
Шаг 4: отправьте данные на диаграмму
Теперь отобразите данные из сетки на диаграмме с помощью метода flexmonster.googlecharts.getData (). Он выполняет предварительную обработку данных для определенного типа диаграммы. Передайте этому методу функции обратного вызова, которые запускаются, когда данные загружаются в таблицу или обновляются.
Определите функции, отвечающие за создание и отрисовку диаграммы. Не забудьте выбрать его тип:
Теперь, когда вы настроили все основные функции, давайте перейдем к расширенной настройке.
Бонус
Если вы хотите выделить наиболее важные данные и впечатлить своих коллег или друзей оригинальностью отчета, попробуйте использовать функцию «Условное форматирование». Позвольте мне показать вам, что у меня есть:
Я установил «условия» для экземпляра сводной таблицы. Чтобы не размещать много кода, вы можете увидеть подробности в демонстрации в конце руководства.
Теперь цвета на диаграмме соответствуют цветам ячеек, и аналитическая панель готова к использованию.
Выводы
Подведем итог тому, чего мы достигли с помощью этого простого урока:
- Сводная таблица встроена в наше веб-приложение. В нем собраны данные, которые мы хотим проанализировать.
- Диаграмма отображает содержимое таблицы и реагирует на любые изменения в отчете. Попробуйте изменить данные в отчете динамически: перетащите и отпустите поля, отфильтруйте записи и посмотрите, как изменится диаграмма.
Надеюсь, вам понравились результаты, которых вы достигли с помощью этого урока. Жду ваших отзывов.
Полезные ссылки
- Сводная таблица и графики Flexmonster: демонстрация
- Галерея Google Charts
- Демо CodePen с полным кодом.
