Flexmonster Software License Agreement (“Agreement”) has been revised and is effective as of January 8, 2025.
The following modifications were made:
The modified version of Agreement is available here.
Downloading, installing, and/or continuing to use Flexmonster Software after January 8, 2025, constitutes Licensee’s acceptance of the terms and conditions of the modified version of Agreement. If Licensee does not agree to any of these terms and conditions, they must cease using Flexmonster Software and must not download, install, use, access, or continue to access Flexmonster Software. By continuing to use Flexmonster Software or renewing the license or maintenance after the effective date of these modifications to Agreement, Licensee accepts and agrees to be bound by the terms and conditions of the modified Agreement.
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 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.
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.
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.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.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.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);
}
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:
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.
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);
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
}
Learn more about formatting axes in the Google Charts documentation.