This tutorial will help you integrate Flexmonster with the Google Charts charting library.
This guide contains the following sections:
Flexmonster supports the following Google chart types:
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.
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.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="googlechartContainer"></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('googlechartContainer'));
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.
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:
options – Object. This object has the following properties:type (optional) – String. The chart type to prepare data for. Possible values: "area", "bar", "column", "line", "pie", "sankey". If the type is not specified, the data will be prepared the same way as for "sankey".slice (optional) – Object. Defines the slice from which the data should be returned (for JSON and CSV data sources only). If not defined, the API call will return data currently displayed in the pivot table. function createGoogleChart() {
if (googleChartsLoaded) {
pivot.googlecharts.getData(
{
slice: {
rows: [{uniqueName: "Country"}],
columns: [{uniqueName: "[Measures]"}],
measures: [{uniqueName: "Quantity"}]
}
},
drawChart,
drawChart
);
}
}
prepareDataFunction (optional) – An external function. If the Connector does not include the necessary type of chart or if you need to preprocess the data differently, use this function. prepareDataFunction takes two input parameters: rawData – the raw data (check out the structure of rawData in getData()); options – an object with options set in googlecharts.getData(). Check out the example on JSFiddle based on the data preprocessed with this external function. One more example illustrates how the data can be prepared to show the deepest drill-down level on Google Column Chart.callbackHandler – Function. Specifies what will happen once the data is ready. Additional options can be specified and then data can be passed directly to the charting library. Takes two input parameters – chartConfig and rawData (rawData is passed just in case you need it, for example for defining number formatting in the tooltip).updateHandler (optional) – Function. Takes two input parameters – chartConfig and rawData. Specifies what will happen once data in the pivot table is filtered/sorted/etc or a number format is changed.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.