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:

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

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 googlecharts.getData() as an input parameter.

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

  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 WebDataRocks Connector for Google Charts: 
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>
  3. Add a container where the chart should be displayed: 
    <div id="googlechartContainer"></div>
  4. 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.
  5. Create the flag variables to check whether the report is completed and the charting library is loaded: 
    var pivotTableReportComplete = false;
var googleChartsLoaded = false;
  6. 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.

  1. Set the onGoogleChartsLoaded() function as a callback to the google.charts event handler: 
    google.charts.setOnLoadCallback(onGoogleChartsLoaded);
  2. Define the 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();
    }
}
  3. 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.

Example

See also