Сводная таблица WebDataRocks с диаграммами Google: как использовать

Чтобы сделать акцент на визуальном представлении ваших данных, вы можете использовать любую из самых популярных библиотек диаграмм - Google Charts, Highcharts, FusionCharts или любую стороннюю библиотеку диаграмм, которую вы предпочитаете.

WebDataRocks поддерживает интеграцию со всеми из них.

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

Путь к успешной интеграции состоит из 5 шагов. Двигайтесь дальше, чтобы пройти их!

Предпосылки: желание анализировать бизнес-данные.

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

Шаг 1. Загрузите данные

Есть два способа сделать это:

1. Используйте простую функцию getJSONData (), которая возвращает массив объектов JSON.
2. Добавьте URL-адрес в файл CSV или JSON прямо в отчет. Просто укажите URL-адрес вашего файла в filename:

filename: "URL-to-your-CSV-or-JSON-file"

Оба случая отлично подойдут.

Шаг 2. Настройте срез и объедините данные.

Следующий шаг - выбрать, какие данные будут отображаться в строках и столбцах.

Например, поместите категорию в строки, страну в столбцы. Определите меры и примените к ним функцию агрегирования: мы выбрали функцию «среднее». По умолчанию все данные будут суммированы, если вы не примените другую функцию.

Шаг 3. Подключитесь к библиотеке графиков

• Добавьте загрузчик Google Charts, включив скрипт на веб-страницу:

<script src="https://www.gstatic.com/charts/loader.js"></script>

• Добавьте коннектор WebDataRocks для Google Charts:

<script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>

• Добавьте контейнер, в котором будет отображаться диаграмма:

<div id="googlechartContainer"></div>

• Добавьте обработчик событий в экземпляр сводной таблицы, написав следующий код в конфигурации сводной таблицы:

reportcomplete: function() {
	pivot.off("reportcomplete");
	pivotTableReportComplete = true;
	createGoogleChart();
}

Он запускается, когда сводная таблица готова отображать данные.

• Создайте флаги, чтобы знать, когда отчет завершен и диаграмма загружена:

var pivotTableReportComplete = false;
var googleChartsLoaded = false;

• Затем загрузите диаграмму из библиотеки google.charts:

google.charts.load('current', {'packages':['corechart']});

Шаг 4. Отобразите данные из сводной таблицы на диаграмме

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

Во-первых, установите функцию onGoogleChartsLoaded() как обратный вызов google.charts обработчику событий:

google.charts.setOnLoadCallback(onGoogleChartsLoaded);

Во-вторых, вам нужно определить функции createGoogleChart() и onGoogleChartsLoaded():

function createGoogleChart() {
	if (googleChartsLoaded) {
		pivot.googlecharts.getData({ type: "pie" }, // specify the chart type
			drawChart,
			drawChart
		);
	}
}
function onGoogleChartsLoaded() {
    googleChartsLoaded = true;
    if (pivotTableReportComplete) {
        createGoogleChart();
    }
}

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

function drawChart(_data) {
	var data = google.visualization.arrayToDataTable(_data.data);
	var options = {
		title: _data.options.title,
		height: 300,
                legend: { position: 'top' }
};
	var chart = new google.visualization.PieChart(document.getElementById('googlechartContainer'));
	chart.draw(data, options);
}

Шаг 5. Наслаждайтесь красочной диаграммой

Наконец, вы можете увидеть, как прекрасно выглядит сводная таблица в сочетании с Google Charts.

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

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

Вы можете ознакомиться с образцом с полным кодом на Codepen.io.

Для получения более подробной информации и дополнительных возможностей следуйте этому блогу: https://www.webdatarocks.com/blog/how-to-use-webdatarocks-pivot-table-with-google-charts/

Источник: www.webdatarocks.com