Уже середина лета, а это значит, что каждой компании пора подвести итоги и проанализировать полугодовой прогресс. Но как лучше подать информацию? Это подводит нас к теме визуализации данных.

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

Здесь вы найдете пошаговое руководство по созданию интерактивной веб-панели с помощью JavaScript.

Какой дизайн выбрать?

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

Возьмем, к примеру, мой набор данных. Для этого урока я создал список покупок iPhone в разных магазинах какой-то выдуманной компании в Калифорнии.

Во-первых, я хочу изучить данные по каждому городу каждый месяц отдельно. Лучше всего для этой задачи подходят сводные таблицы, поскольку они позволяют суммировать, сортировать, группировать и подсчитывать большие объемы данных. Но видеть общие тенденции или сравнивать графики разных метрик гораздо удобнее. Я решил использовать диаграммы с областями и гистограммы для сравнения и круговую диаграмму, чтобы посмотреть состав и процентное соотношение.

Инструменты визуализации

При использовании JavaScript для визуализации данных вам часто необходимо включать определенные внешние библиотеки. Для создания интерактивной сводной таблицы я решил использовать WebDataRocks, совершенно бесплатный инструмент для создания веб-отчетов. Он также хорошо интегрируется с FusionCharts, который я буду использовать для остальных визуализаций.

Если вы не считаете эти инструменты лучшими вариантами для себя, не стесняйтесь искать те, которые лучше соответствуют вашим потребностям. Для этого я рекомендую ознакомиться со статьей Тейта Гэлбрейта Красивые библиотеки визуализации данных JavaScript или с этим Полным списком инструментов визуализации данных для JavaScript Юлии Никитиной.

Формат данных

Для этого руководства вам необходимо хранить данные в формате JSON или CSV. Есть два способа использовать его в качестве источника данных для информационной панели: указав URL-адрес файла, в котором он хранится, или, как я сделаю здесь, создав функцию, которая его возвращает:

function getJSONData() {
    return [
        {
            "month": "January",
            "model": "11 Pro Max",
            "city": "Los Angeles",
            "price": 1000
        },
        //...
    ]
}

Шаг 1. Определите макет страницы

Во-первых, определите структуру панели инструментов. Я хочу, чтобы у меня было 4 раздела: один для сводной таблицы, а остальные для диаграмм, поэтому я создал таблицу 2×2 в HTML.

<table style="width: 100%;height: 400px">
    <tr style="width: 50%; height: 400px">
        <td style>
            <div id="wdr-component"></div>
        </td>
        <td style>
            <div id="fusionChartArea"></div>
        </td>
        <td></td>
    </tr>
    <tr>
        <td style="width: 50%;">
            <div id="fusionChartPie" style="height:200px;"></div>
        </td>
        <td style="width: 50%;">
            <div id="fusionChartBar" style="height:200px;"></div>
        </td>
    </tr>
</table>

Шаг 2. Включите библиотеки.

Теперь нам нужно подключить инструменты визуализации данных. Для этого включите библиотеки WebDataRocks и FusionCharts в HTML-файл следующим образом:

<! -- WebDataRocks -->
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<! -- FusionCharts -->
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fusion.js"></script>
<! -- WebDataRocks connector for FusionCharts -->
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.fusioncharts.js"></script>

Шаг 3. Создайте сводную таблицу

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

var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: false,
    "height": 400,
});

Затем добавьте отчет, объект, который содержит информацию о данных: где они хранятся и как их агрегировать.

Здесь я устанавливаю строки для отображения разных городов и столбцов для отображения месяцев:

report: {
    "dataSource": {
        "dataSourceType": "json",
        "data": getJSONData()
    },
    "slice": {
         "rows": [{
             "uniqueName": "city"
         },
         {
        "uniqueName": "Measures"
        }],
        "columns": [{
            "uniqueName": "month"
        }],
        "measures": [{
            "uniqueName": "price",
            "aggregation": "sum"
        }]
    }
}

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

reportcomplete: function() {
    pivot.off("reportcomplete");
    createAreaChart();
    createBarChart();
    createPieChart();
}

Шаг 4. Создайте диаграммы

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

var chart = new FusionCharts({
    type: "bar2d",
    renderAt: "fusionchartBar",
    width: "100%",
    height: 400
});

Затем используйте метод fusioncharts.getData(), чтобы вывести данные из сводной таблицы на диаграмму. Вы также можете определить, какую информацию включать, настроив срез, как я сделал здесь:

pivot.fusioncharts.getData({
   type: chart.chartType(), "slice": {
       "rows": [
           {
               "uniqueName": "[Measures]"
           }
       ],
       "columns": [
           {
               "uniqueName": "model"
           }
       ],
       "measures": [
           {
               "uniqueName": "price",
               "aggregation": "sum"
           }
       ]
   }
}

Наконец, добавьте функцию, которая устанавливает атрибуты рендеринга, данных и диаграммы, полный список которых вы можете увидеть на сайте Fusioncharts.

function(data) {
       chart.setJSONData(data);
       chart.setChartAttribute("theme", "fusion");
       chart.setChartAttribute("caption", "Total Revenue for Each Model");
       chart.setChartAttribute("paletteColors", "#bc5cdb, #493999, #8790a8");
       chart.render();
   }

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

Наконец, добавьте все диаграммы в обработчик, и все готово.

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

Код для этого дашборда тоже выложен на GitHub, так что если остались вопросы, можете скачать и посмотреть.

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Больше контента в публикации Level Up Coding.
Подписывайтесь: Twitter, LinkedIn, Информационный бюллетень
Level Up меняет рекрутинг в сфере технологий ➡️ Присоединяйтесь к нашему коллективу талантов