Integration with Google Charts

This tutorial will help you integrate Flexmonster with the Google Charts charting library.

Watch the tutorial in the video format: Pivot table with Google Charts.

This guide contains the following sections:

• Supported chart types
• Adding Google Charts
• Flexmonster Connector for Google Charts

Supported chart types

Flexmonster supports the following Google chart types:

• AreaChart (demo)
• BarChart (demo)
• ColumnChart (demo)
• DonutChart (demo)
• GeoChart (demo)
• LineChart (demo)
• PieChart (demo)
• Sankey (demo)

If the chart type that you want to use is not on the list, it is possible to use prepareDataFunction to preprocess the data to fit your preferences.

More ready-to-use examples of integration with Google Charts you can find on the Examples page.

Adding Google Charts

Step 1. Add the component using data from a CSV file to your HTML page. Replace XXXX-XXXX-XXXX-XXXX-XXXX with your license key. If you don't have a license key, contact our team and request a special trial key.

<div id="pivotContainer">The component will appear here</div>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<script>
  let pivot = new Flexmonster({
    container: "pivotContainer",
    componentFolder: "https://cdn.flexmonster.com/",
    toolbar: true,
    report: {
      dataSource: {
        filename: "data/data.csv"
      },
      slice: {
        rows: [
          { uniqueName: "Country" }
        ],
        columns: [
          { uniqueName: "[Measures]" }
        ],
        measures: [
          { uniqueName: "Price" }
        ]
      }
    },
    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
  });
</script>

Step 2. Add Google Charts:

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

Step 3. Add Flexmonster Connector for Google Charts:

<script
 src="https://cdn.flexmonster.com/lib/flexmonster.googlecharts.js">
</script>

Step 4. Add a container for the chart:

<div id="chartContainer"></div>

Step 5. Add a reportComplete event handler to know when the pivot table is ready to be a data provider:

reportcomplete: function() {
  pivot.off("reportcomplete");
  pivotTableReportComplete = true;
  createGoogleChart();
}

Step 6. Add a function to create the chart. This function uses the Connector for Google Charts from flexmonster.googlecharts.js. The Connector extends the Flexmonster API with the following call: googlecharts.getData(options, callbackHandler, updateHandler).

let pivotTableReportComplete = false;
let googleChartsLoaded = false;

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

function onGoogleChartsLoaded() {
  googleChartsLoaded = true;
  if (pivotTableReportComplete) {
    createGoogleChart();
  }
}

function createGoogleChart() {
  if (googleChartsLoaded) {
    pivot.googlecharts.getData({ type: "column" },
      drawChart,
      drawChart
    );
  }
}

function drawChart(chartConfig) {
  let data = google.visualization.arrayToDataTable(chartConfig.data);

  let options = {
    title: chartConfig.options.title,
    height: 300
  };

  let chart = new google.visualization
    .ColumnChart(document.getElementById("chartContainer"));
  chart.draw(data, options);
}

You will see a column chart that displays the same data that is shown in the pivot pivot table instance and it will react to updates. Check out a live example on JSFiddle.

You can also watch our video tutorial that covers the integration process:

Flexmonster Connector for Google Charts

flexmonster.googlecharts.js is a connector between our component and Google Charts. The googlecharts.getData() method requests data from the pivot table and preprocesses it to the appropriate format for the required type of chart.

googlecharts.getData(options:Object, callbackHandler:Function, updateHandler:Function) has the following parameters:

function createGoogleChart() {
  if (googleChartsLoaded) {
    pivot.googlecharts.getData(
      {
        slice: {
          rows: [{uniqueName: "Country"}],
          columns: [{uniqueName: "[Measures]"}],
          measures: [{uniqueName: "Quantity"}]
        }
      },
      drawChart, 
      drawChart
    );
  }
}

The Connector has several functions for defining number formatting for Google Charts. All these functions take the pivot table FormatObject and return the formatting string in Google Charts format.

• googlecharts.getNumberFormat(format) – Object. Takes the pivot table FormatObject and returns a format object for number formatting in Google Charts. This object can be used to format columns in DataTable.
• googlecharts.getNumberFormatPattern(format) – Object. Takes the pivot table FormatObject and returns a Google Charts format pattern. This pattern can be used to format axes.

These functions can be used in callbackHandler and updateHandler to define a number formatting for axes and tooltips. Try it on JSFiddle.