JSFiddle - React, Tailwind, and code Playground

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="dashboard">
  <div id="donutChartContainer"></div>

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

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  toolbar: false,
  report: {
    dataSource: {
      filename: "data/retail-data.json"
    },
    options: {
      chart: {
        title: "FY 2018 VS FY 2019",
        showDataLabels: true
      },
      viewType: "charts"
    },
    slice: {
      reportFilters: [{
        uniqueName: "Country"
      }],
      rows: [{
          uniqueName: "Date.Month",
          sortOrder: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

        },
        {
          uniqueName: "Date.Year"
        }
      ],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price",
        aggregation: "sum"
      }]
    }
  },
  reportcomplete: function() {
    pivot.off("reportcomplete");
    pivotTableReportComplete = true;
    createGoogleChart();
    pivot.expandAllData();
  },
  reportchange: function() {
    syncFilters();
  }
});

let pivotTableReportComplete = false;
let googleChartsLoaded = false;

google.charts.load('current', {
  'packages': ['corechart', 'bar']
});
google.charts.setOnLoadCallback(onGoogleChartsLoaded);

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

//Set a different slice to show different data on a donut chart
let donutChartSlice = {
  reportFilters: [{
      uniqueName: "Country",
    },
    {
      uniqueName: "Date.Year"
    },
    {
      uniqueName: "Date.Month"
    }
  ],
  rows: [{
    uniqueName: "City"
  }, ],
  columns: [{
    uniqueName: "[Measures]"
  }],
  measures: [{
    uniqueName: "Price",
    aggregation: "sum"
  }]
};

function createGoogleChart() {
  if (googleChartsLoaded) {
    pivot.googlecharts.getData({
        type: "pie",
        slice:...