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.

Ready-to-use examples of integration with Google Charts can be found on the Examples page.

This guide demonstrates JavaScript-based integration. To integrate Flexmonster with Google Charts in a front-end framework, check out our Google Charts demo.

Flexmonster Connector for Google Charts

Flexmonster provides the Connector for amCharts that helps integrate with Google Charts. The Connector contains ready-to-use methods for passing data from Flexmonster to Google Charts in the required format.

The Connector for Google Charts is located in the lib/flexmonster.googlecharts.js file within the Flexmonster package. As the code is open-source, you can customize it with your own logic. Learn more in the Connector’s API reference.

Supported chart types

Flexmonster supports the following Google Charts types:

If the needed chart type is not in the list, see how to integrate with any chart type.

Integrating with Google Charts

The steps below describe how to create a Column Chart based on data from Flexmonster. For integration with other chart types, refer to the Google Charts documentation.

Step 1. Configure Flexmonster

Step 1.1. Embed Flexmonster into your webpage. Your code should look similar to the following:

import Flexmonster from "flexmonster";
import "flexmonster/flexmonster.css";

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true
});

Step 1.2. Configure the report: connect to your data source and define a slice. The fields you have specified in the slice will be shown on the chart.

See an example:

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: {
    dataSource: {
      filename: "https://cdn.flexmonster.com/data/data.csv"
    },
    slice: {
      rows: [
        { uniqueName: "Country" }
      ],
      columns: [
        { uniqueName: "Business Type" },
      ],
      measures: [
        { uniqueName: "Price" }
      ]
    }
  },
});

Step 1.3. Provide your license key in the licenseKey property:

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: {
    // Your report configs
  },
  // Replace "XXXX-XXXX-XXXX-XXXX-XXXX" with your licence key
  licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
});

If you don’t have a license key, contact our team and request a special trial key.

Step 2. Add Google Charts

Step 2.1. Include the Google Charts library in your project:

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

Step 2.2. Create a variable to track whether the Google Charts library is loaded:

let googleChartsLoaded = false;

Step 2.3. Load the Google Visualization API and the corechart package with the following line of code:

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

Step 2.4. Define a callback to ensure the chart is not created before the Google Visualization API is fully loaded. In this callback, set the googleChartsLoaded flag to true:

google.charts.setOnLoadCallback(onGoogleChartsLoaded);

function onGoogleChartsLoaded() {
  googleChartsLoaded = true;
}

Step 2.5. Add a container for the chart:

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

Step 3. Display the data on the chart

Step 3.1. Add the Connector for Google Charts to your project:

import "flexmonster/lib/flexmonster.googlecharts.js"

Step 3.2. If a chart is created before Flexmonster іs fully loaded, the chart may receive empty data. To ensure the component is ready to provide data, use the reportcomplete event:

const pivot = new Flexmonster({
  container: "pivotContainer",
  report: {
    // Your report configs
  },
  licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
  reportcomplete: onReportComplete,
});

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

// ...

function onReportComplete() {
  // Unsubscribe from the reportcomplete event
  // It is needed only to track the Flexmonster initialization
  pivot.off("reportcomplete");
  pivotTableReportComplete = true;
}

As a result, a chart will be created only when the data is loaded and the report is ready.

Step 3.3. Since we need to ensure that both Google Charts and Flexmonster are ready before creating a chart, handle the case when they might load in a different order. 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() {
  // Unsubscribe from the reportcomplete event
  // It is needed only to track the Flexmonster initialization
  pivot.off("reportComplete");
  pivotTableReportComplete = true;
  // Handle the case when Google Charts is loaded before the report is complete
  if (googleChartsLoaded) {
    createChart();
  }
}

Step 3.4. Implement the createChart() function from the previous step. This function will use the googlecharts.getData() method from the Connector. The googlecharts.getData() API call requests data from the component and preprocesses it to the format required by Google Charts:

function createChart() {
  if (googleChartsLoaded) {
    pivot.googlecharts.getData(
      { type: "column" },
      // Function called when data for the chart is ready
      drawChart,
      // Function called when the report is updated
      drawChart
    );
  }
}

Step 3.5. Create the drawChart() function. This function initializes the chart, configures it, and fills the chart with data provided by the googlecharts.getData() method:

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);
}

Step 4. See the result

Run your project to see a column chart that displays the same data as the pivot table and reacts to updates in the component Live example.

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

Integrating with any chart type

Flexmonster Connector for FusionCharts can prepare your data for a limited set of chart types.

To create a chart that is not on the list, you need to preprocess your data manually using the options.prepareDataFunction parameter of googlecharts.getData() Live example.

Using Flexmonster number formatting in Google Charts

Flexmonster Connector for Google Charts provides the googlecharts.getNumberFormat() API call, which converts the Flexmonster FormatObject to the Google Charts format object.

googlecharts.getNumberFormat() considers the following FormatObject properties and converts them to Google Charts equivalents:

• decimalSeparator (decimalSymbol in Google Charts)
• decimalPlaces (fractionDigits in Google Charts)
• thousandsSeparator (groupingSymbol in Google Charts)
• currencySymbol (prefix and suffix in Google Charts)

For more details on NumberFormat, check the Google Charts documentation.

See how to apply a number format to a field:

let formatter = new google.visualization.NumberFormat(pivot.googlecharts.getNumberFormat(rawData.meta.formats[0]));
formatter.format(data, 1);

Live example

To apply a Flexmonster number format to axes, use the googlecharts.getNumberFormatPattern(). This API call considers the same properties as googlecharts.getNumberFormat() and converts Flexmonster's number format to a Google Charts format pattern. Check out an example:

hAxis: {
  format: pivot.googlecharts.getNumberFormatPattern(rawData.meta.formats[0]),
  // Other configs
}

Live example

Learn more about formatting axes in the Google Charts documentation.

See also

• API reference of Flexmonster Connector for Google Charts
• More examples with Google Charts
• Supported data sources
• Customize Flexmonster