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.
Step 1: Load the data
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" } } });
Step 2: Configure the slice and aggregate the data
Define which data should be displayed within the rows, columns, and measures. The data from the grid is passed then to Google Charts.
Step 3: Connect to the charting library
- At first, add the loader of Google Charts by including the script into the webpage:
<script src="https://www.gstatic.com/charts/loader.js"></script>
- Then add WebDataRocks Connector for Google Charts:
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>
- Add a container where the chart should be displayed:
<div id="googlechartContainer"></div>
- Next, add an event handler to the pivot instance:
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. - Create the flag variables to check whether the report is completed and the charting library is loaded:
var pivotTableReportComplete = false; var googleChartsLoaded = false;
- Then load the chart from the
google.charts
library:google.charts.load('current', {'packages':['corechart']});
Step 4: Show the data from the pivot table in the chart
To display the data from the report in the chart, add the functions for drawing and creating the chart.
- Set the
onGoogleChartsLoaded()
function as a callback to thegoogle.charts
event handler:google.charts.setOnLoadCallback(onGoogleChartsLoaded);
- Define the
createGoogleChart()
andonGoogleChartsLoaded()
functions:function createGoogleChart() { if (googleChartsLoaded) { // specify the chart type pivot.googlecharts.getData({ type: "pie" }, drawChart, drawChart ); } } function onGoogleChartsLoaded() { googleChartsLoaded = true; if (pivotTableReportComplete) { createGoogleChart(); } }
- Write a function which is called once the data is ready or updated. It is responsible for drawing and redrawing the chart. Also, choose here the type of the chart:
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.