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

Supported chart types

Flexmonster supports the following Google chart types:

• AreaChart (demo)
• BarChart (demo)
• ColumnChart (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.

Adding Google Charts

1. Add the following pivot table using data from a CSV file to your HTML page.

   <div id="pivotContainer">The component will appear here</div>
   <script src="flexmonster/flexmonster.js"></script>
   
   <script>
   	var pivot = new Flexmonster({
   		container: "pivotСontainer",
   		toolbar: true,
   		report: {
   			dataSource: {
   				filename: "data.csv"
   			},
   			slice: {
   				rows: [
   					{ uniqueName: "Country" }
   				],
   				columns: [
   					{ uniqueName: "[Measures]" }
   				],
   				measures: [
   					{ uniqueName: "Price" }
   				]
   			}
   		},
   		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
   	});
   </script>
   

2. Add Google Charts.

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

3. Add our connector for Google Charts.

   <script src="flexmonster/lib/flexmonster.googlecharts.js"></script>
   

4. Add a container for the chart.

   <div id="googlechartContainer"></div>
   

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

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

   var pivotTableReportComplete = false;
   var 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(_data) {
   	var data = google.visualization.arrayToDataTable(_data.data);
   	var options = {
   		title: _data.options.title,
   		height: 300
   	};
   	var 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.

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:

• 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, CSV, and OCSV 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 data is ready. Additional options can be specified and then data can be passed directly to the charting library. Takes two input parameters – data 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 – data and rawData. Specifies what will happen once data in the pivot table is filtered/sorted/etc.

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

• googlecharts.getNumberFormat(format) – Object. Takes the pivot table format object 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 format object 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 in JSFiddle.