GeoChart

Integration with Google Charts

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.flexmonster.com/lib/flexmonster.googlecharts.js"></script>

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

<div id="pivot-container"></div>

<div id="googlechart-container" style="height:250px;"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

#googlechart-container {
  margin-top: 20px;
}

JavaScript

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  toolbar: true,
  height: 400,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      rows: [{
        uniqueName: "Country"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price",
        aggregation: "sum"
      }]
    },
    options: {
      grid: {
        showHeaders: false
      }
    }
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
    pivotTableReportComplete = true;
    createGoogleChart();
  }
});

let pivotTableReportComplete = false;
let googleChartsLoaded = false;

google.charts.load("52", {
  packages: ["geochart"],
  mapsApiKey: "AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"
});
google.charts.setOnLoadCallback(onGoogleChartsLoaded);

function onGoogleChartsLoaded() {
  googleChartsLoaded = true;
  if (pivotTableReportComplete) {
    createGoogleChart();
  }
}

function createGoogleChart() {
  if (googleChartsLoaded) {

    pivot.googlecharts.getData({
        slice: {
          rows: [{
            uniqueName: "Country"
          }],
          columns: [{
            uniqueName: "[Measures]"
          }],
          measures: [{
            uniqueName: "Price",
            aggregation: "sum"
          }]
        },
        prepareDataFunction: function(data, options) {
          let output = {};
          let table = [];
          table.push([data.meta.r0Name, data.meta.v0Name])
          for (let i = 0; i < data.data.length; i++) {
            let record = data.data[i];
            if (record.r0 && record.v0) {
              table.push([record.r0, record.v0]);
            }
          }
          output.data = table
          return output;
        }
      },
     ...