JavaScript Pivot Table with Google Charts

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 350,
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    dataSource: {
      type: "json",
      filename: "https://cdn.flexmonster.com/data/demos/googlecharts-demo-data.json",
    },
    slice: {
      rows: [
        {
          uniqueName: "Date.Month",
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Income",
          formula: 'sum("Sales") * sum("Unit Price")',
          individual: true,
          caption: "Income",
          format: "currency",
        },
        {
          uniqueName: "Sales",
          active: false,
          format: "currency",
        },
        {
          uniqueName: "Expenses",
          format: "currency",
        },
        {
          uniqueName: "Profit",
          formula: 'sum("Income") - sum("Expenses")',
          individual: true,
          сaption: "Profit",
          format: "currency",
        },
      ],
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 2,
      },
      {
        name: "currency",
        currencySymbol: "$",
      },
    ],
    options: {
      grid: {
        showHeaders: false,
      },
      showAggregationLabels: false,
    },
  },
  reportcomplete: function () {
    pivot.off("reportcomplete");
    pivotTableReportComplete = true;
    createColumnChart();
    createPieChart();
  },
});

const colors = [
  "#4cbf8b",
  "#e8734c",
  "#ffcd4c",
  "#9875e3",
  "#4c9eff",
  "#8acfc3",
  "#cd97e6",
  "#f1d34c",
  "#65d2e7",
];

let pivotTableReportComplete = false;
let googleChartsLoaded = false;

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

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

function createColumnChart() {
  if (googleChartsLoaded) {
    pivot.googlecharts.getData(
      {
        type: "column",
      },
      drawColumnChart,
      drawColumnChart
    );
  }
}

function drawColumnChart(_data) {
  let data = google.visualization.arrayToDataTable(_data.data);
  let formatter = new google.visualization.NumberFormat({
    fractionDigits: 2,
    prefix: "$",
  });

  for (let i = 0; i < data.getNumberOfColumns(); i++) {
    if (data.getColumnType(i) === "number") {
      formatter.format(data, i);
    }
  }

  let options = {
    fontName: "SERIF TYPEFACE",
    chartArea: {
      height: "100%",
    },
    height: 300,
    colors: colors,
  };

  const columnChartContainer = document.getElementById("googlechart-column-container");

  let chart = new google.charts.Bar(columnChartContainer);

  chart.draw(data, options);
}

function createPieChart() {
  if (googleChartsLoaded) {
    pivot.googlecharts.getData(
      {
        type: "pie",
        slice: {
          rows: [
            {
              uniqueName: "Country",
              filter: {
                measure: {
                  uniqueName: "Sales",
                },
                query: {
                  top: 5,
                },
              },
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Sales",
            },
          ],
        },
      },
      drawPieChart,
      drawPieChart
    );
  }
}

function drawPieChart(_data) {
  let data = google.visualization.arrayToDataTable(_data.data);
  let options = {
    legend: {
      position: "bottom",
    },
    height: 300,
    pieSliceText: "none", // Remove text from pie slices
    pieHole: 0.35,
    chartArea: {
      height: "85%",
      top: 0,
    },
    pieSliceBorderColor: "none",
    colors: colors,
  };

  const pieChartContainer = document.getElementById("googlechart-pie-container");

  let chart = new google.visualization.PieChart(pieChartContainer);

  chart.draw(data, options);
}

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

<div class="demo-box">
  <div class="demo-title">Income, Expenses, and Profit</div>
  <div id="googlechart-column-container"></div>
</div>

<div class="demo-box">
  <div class="demo-title">Top 5 Countries by Sales</div>
  <div id="googlechart-pie-container"></div>
</div>

.demo-box {
  background-color: #fafafa;
  position: relative;
  padding: 20px 20px 20px 20px;
  border: 1px solid #e9e9e9;
  margin-bottom: 20px;
}

.demo-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #555;
}

#pivot-container {
  margin-bottom: 20px;
}

/** For the background color of Google Charts 
 * (for material design charts, it can't be changed via options, only via CSS)
 */ 
#googlechart-column-container > div > div > svg > g:nth-child(2) > rect:nth-child(1) {
  fill: #fafafa !important;
}

#googlechart-pie-container > div > div:nth-child(1) > div > svg > rect {
  fill: #fafafa !important;
}

/* For text on xAxis of the column chart */
#googlechart-column-container > div > div > svg > g:nth-child(6) > text:nth-child(10) {
  color: #555;
  fill: rgb(117, 117, 117);
  font-family: Roboto;
  font-size: 12px;
}

#googlechart-pie-container > div > div:nth-child(n) > div > svg > g:nth-child(n) > g:nth-child(n) > g > text {
  color: #555;
  fill: rgb(117, 117, 117);
  font-family: Roboto;
  font-size: 12px;
}