Google Charts is a powerful web service that provides an opportunity to visualize the data with charts. We’ve prepared a tutorial on how to integrate WebDataRocks reporting tool with Google Charts.

WebDataRocks supports the following chart types:

  1. Area Chart
  2. Bar Chart
  3. Column Chart
  4. Line Chart
  5. Pie Chart
  6. Sankey

To start a new visualization project with Pivot Table and Google Charts, follow 4 simple steps.

Step 1: Load the data

After embedding the pivot table into the project, load the data and set a basic report configuration:

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 will be displayed within the rows, columns, and measures. The data from the grid will be passed to Google Charts.

Step 3: Connect to the charting library

  1. 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>
  2. Then, add our connector for Google Charts:
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>
  3. Add a container where the chart will be displayed:
    <div id="googlechartContainer"></div>
  4. Next, add the event handler to the pivot instance by writing the following code in the configuration of the pivot table:
    reportcomplete: function() {
    	pivot.off("reportcomplete");
    	pivotTableReportComplete = true;
    	createGoogleChart();
    }
    

    It is fired when the pivot table is ready to display the data.

  5. Create flags to know when the report is completed and the chart is loaded:
    var pivotTableReportComplete = false;
    var googleChartsLoaded = false;
    
  6. Then load the chart from google.charts library:
    google.charts.load('current', {'packages':['corechart']});
    

Step 4: Show the data from the pivot table on the chart

To do it, add functions for drawing and creating the chart.

  1. Set the onGoogleChartsLoaded() function as a callback to google.charts eventhandler:
    google.charts.setOnLoadCallback(onGoogleChartsLoaded);
  2. Define a createGoogleChart() and onGoogleChartsLoaded() functions:
    function createGoogleChart() {
    	if (googleChartsLoaded) {
    		pivot.googlecharts.getData({ type: "pie" }, // specify the chart type
    			drawChart,
    			drawChart
    		);
    	}
    }
    function onGoogleChartsLoaded() {
        googleChartsLoaded = true;
        if (pivotTableReportComplete) {
            createGoogleChart();
        }
    }
    
  3. Write a function which will be called once the data is ready and updated. It is responsible for drawing and redrawing the chart. Also, the type of the chart can be chosen here:
    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);
    }
    

For further customization, please turn 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 to experiment – filter the data, change measures and aggregation functions and see the results reflected in the chart at once.

Example

Read more about googlecharts.getData() API call in the documentation.