Need a special offer?Find out if your project fits.
+
All documentation
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • 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.

    Supported chart types

    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.

    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:

    Parameter/Type Description
    options
    Object
    Allows setting options for data preprocessing.
    options.type
    String
    optional 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".
    options.slice
    SliceObject
    optional 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.
    Here is an example of a slice:
    function createGoogleChart() {
    if (googleChartsLoaded) {
    pivot.googlecharts.getData(
    {
    slice: {
    rows: [{uniqueName: "Country"}],
    columns: [{uniqueName: "[Measures]"}],
    measures: [{uniqueName: "Quantity"}]
    }
    },
    drawChart,
    drawChart
    );
    }
    }
    options.prepareDataFunction
    Function
    optional 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 custom 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, to define number formatting in the tooltip).
    updateHandler
    Function
    optional 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.