WebDataRocks End User License Agreement (“Agreement”) has been revised and is effective as of April 18, 2024.
The following modifications have been made:
The modified version of WebDataRocks End User License Agreement is available here.
Downloading, installing, and/or continuing to use WebDataRocks after April 18, 2024, constitutes your acceptance of the terms and conditions of the modified version of WebDataRocks End User License Agreement. If you do not agree to any of these terms and conditions, do not download, install, use, or access (or continue to access) WebDataRocks.
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.