Google Charts is a powerful web service that provides an opportunity to visualize the data with charts. Read this tutorial to learn how to integrate WebDataRocks reporting tool with Google Charts.
WebDataRocks supports the following chart types:
If you need a chart that is not on the list, you can define prepareDataFunction()
which implements a custom logic of data processing and passes the data to
To start a new visualization project with WebDataRocks Pivot Table and Google Charts, follow these steps.
After you finish embedding the pivot table into your project, load the data and set the parameters of a basic report:
var pivot = new WebDataRocks({ container: "#wdr-component", toolbar: true, report: { dataSource: { filename: "https://cdn.webdatarocks.com/data/data.csv" } } });
Define which data should be displayed within the rows, columns, and measures. The data from the grid is passed then to Google Charts.
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>
<div id="googlechartContainer"></div>
reportcomplete: function() { pivot.off("reportcomplete"); pivotTableReportComplete = true; createGoogleChart(); }This event is fired when the data from the report and the localization file are loaded successfully and the grid is rendered.
var pivotTableReportComplete = false; var googleChartsLoaded = false;
google.charts
library:
google.charts.load('current', {'packages':['corechart']});
To display the data from the report in the chart, add the functions for drawing and creating the chart.
onGoogleChartsLoaded()
function as a callback to the google.charts
event handler:
google.charts.setOnLoadCallback(onGoogleChartsLoaded);
createGoogleChart()
and onGoogleChartsLoaded()
functions:
function createGoogleChart() { if (googleChartsLoaded) { // specify the chart type pivot.googlecharts.getData({ type: "pie" }, 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); }
To learn more about charts customization, please refer to the Google Chart Documentation.
Finally, see how the pivot table looks in combination with Google Charts.
To understand what a real-time interaction is, try experimenting: filter the data, change the measures and the aggregation functions – the results are reflected in the chart at once.