Documentation menu
JS React Angular Vue
JS React Angular Vue

Integration with Google Charts

Read this tutorial to learn how to integrate the WebDataRocks reporting tool with Google Charts.

Supported chart types

WebDataRocks supports the following chart types:

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

If you need a chart that is not on the list, you can implement a custom logic of data processing in the options.prepareDataFunction parameter of googlecharts.getData().

To start a new visualization project with WebDataRocks Pivot Table and Google Charts, follow the steps below.

Step 1. Add WebDataRocks to your project

Step 1.1. Complete the Quick start guide. Your code of the web page with WebDatarocks should look similar to the following:

<html>
  <head>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
  </head>

  <body>
    <div id="pivot-container"></div> 
    <script>
      const pivot = new WebDataRocks({
        container: "#pivot-container",
        toolbar: true,
      });
    </script>
  </body>
</html>

Step 1.2. Create a report for WebDataRocks — connect to the data source and define which fields should be displayed in rows, columns, and measures:

const pivot = new WebDataRocks({
  container: "#pivot-container",
  toolbar: true,
  report: {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  },
});

The fields you’ve specified in the report will be shown on the chart.

Step 2. Add Google Charts

Step 2.1. Include the script for Google Charts into your web page: 

<script src="https://www.gstatic.com/charts/loader.js"></script>

Step 2.2. Create a flag variable to know when the Google Charts library is ready to be used:

let googleChartsLoaded = false;

Step 2.3. Load the Google Visualization API and the corechart package:

google.charts.load('current', {'packages':['corechart']});

Step 2.4. Set a callback to run when the Google Visualization API is loaded. In the callback handler, set the googleChartsLoaded flag to true:

google.charts.setOnLoadCallback(onGoogleChartsLoaded);

function onGoogleChartsLoaded() {
  googleChartsLoaded = true;
}

Step 2.5. Create a <div> container for Google Charts with an id (e.g., googlechart-container):

<div id="googlechart-container"></div>

Step 3. Show the data from the pivot table on the chart

Step 3.1. Include the WebDataRocks Connector for Google Charts:

<script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>

The Connector provides the googlecharts.getData() method, which gets data from WebDataRocks and converts it to the format required for a specific chart type.

Step 3.2. If we call the googlecharts.getData() method before WebDataRocks is fully loaded, it will return an empty result. To know when WebDataRocks is ready to provide data for the chart, handle the reportcomplete event:

const pivot = new WebDataRocks({
  container: "#pivot-container",
  toolbar: true,
  report: {
    // ...
  },
  reportcomplete: onReportComplete,
});

let googleChartsLoaded = false;
// Add a flag variable to keep the state of the report
let pivotTableReportComplete = false;

// ...

function onReportComplete() {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks
  pivot.off("reportcomplete");
  pivotTableReportComplete = true;
}

Now we know when the data is loaded and the report is ready.

Step 3.3. Let’s start creating a chart. A function to create a chart should be called only when the following conditions are met: 

  • The Google Charts library is loaded (the googleChartsLoaded flag is true).
  • The WebDataRocks report is ready (the pivotTableReportComplete flag is true).  

Since we don’t know which will happen first, we have to handle both cases. Modify onGoogleChartsLoaded() and onReportComplete() functions as follows:

function onGoogleChartsLoaded() {
  googleChartsLoaded = true;
  // Handle the case when the report is complete before Google Charts is loaded 
  if (pivotTableReportComplete) {
    createChart();
  }
}

function onReportComplete() {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks
  pivot.off("reportComplete");
  pivotTableReportComplete = true;
  // Handle the case when Google Charts is loaded before the report is complete
  if (googleChartsLoaded) {
    createChart();
  }
}

Step 3.4. Now it’s time to implement the createChart() function. It will use the googlecharts.getData() method from the Connector:

function createChart() {
  pivot.googlecharts.getData(
    {
      type: "column",
    },
    // Function called when data for the chart is ready
    drawColumnChart,
    // Function called on report changes (filtering, sorting, etc.)
    drawColumnChart,
  );
}

Step 3.5. Finally, implement the drawColumnChart() function:

function drawColumnChart(chartConfig) {
  let data = google.visualization.arrayToDataTable(chartConfig.data);
  const columnChartContainer = document.getElementById("googlechart-container");
  const chart = new google.visualization.ColumnChart(columnChartContainer);
  chart.draw(data);
}

Notice the id of the columnChartContainer — it must match the id of a <div> created in step 2.5 (in our case, it is googlechart-container).

Step 4. See the result

Open your web page in the browser to see how the pivot table looks in combination with Google Charts.

To see what a real-time interaction is, try experimenting: filter the data, change the measures and the aggregation functions — the results are reflected on the chart at once.

To learn more about chart customization, please refer to the Google Charts Documentation.

Check out the full code

After completing this tutorial, the full code of the web page should look as follows:

<html>
  <head>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />

    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>
  </head>

  <body>
    <div id="pivot-container"></div>
    <div id="googlechart-container"></div>
    <script>
      const pivot = new WebDataRocks({
        container: "#pivot-container",
        toolbar: true,
        report: {
          dataSource: {
            filename: "https://cdn.webdatarocks.com/data/data.csv",
          },
          slice: {
            rows: [
              {
                uniqueName: "Country",
              },
            ],
            columns: [
              {
                uniqueName: "Measures",
              },
            ],
            measures: [
              {
                uniqueName: "Price",
                aggregation: "sum",
              },
            ],
          },
        },
        reportcomplete: onReportComplete,
      });

      let googleChartsLoaded = false;
      // Add a flag variable to keep the state of the report
      let pivotTableReportComplete = false;

      google.charts.load("current", { packages: ["corechart"] });
      google.charts.setOnLoadCallback(onGoogleChartsLoaded);

      function onGoogleChartsLoaded() {
        googleChartsLoaded = true;
        // Handle the case when the report is complete before Google Charts is loaded
        if (pivotTableReportComplete) {
          createChart();
        }
      }

      function onReportComplete() {
        // Unsubscribing from reportcomplete
        // We need it only to track the initialization of WebDataRocks
        pivot.off("reportComplete");
        pivotTableReportComplete = true;
        // Handle the case when Google Charts is loaded before the report is complete
        if (googleChartsLoaded) {
          createChart();
        }
      }

      function createChart() {
        pivot.googlecharts.getData(
          {
            type: "column",
          },
          // Function called when data for the chart is ready
          drawColumnChart,
          // Function called on report changes (filtering, sorting, etc.)
          drawColumnChart,
        );
      }

      function drawColumnChart(chartConfig) {
        let data = google.visualization.arrayToDataTable(chartConfig.data);
        const columnChartContainer = document.getElementById("googlechart-container");
        const chart = new google.visualization.ColumnChart(columnChartContainer);
        chart.draw(data);
      }
    </script>
  </body>
</html>

Live example

Interact with the following sample where WebDataRocks Pivot Table is integrated with Google Charts to see how they work together:

See also