<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<table><tr><td style="width: 450px;"><div id="pivot-container"></div></td>
<td><div id="googlechart-container" style="width:670px;height:550px;"></div></td></tr></table>

const pivot = new WebDataRocks({
  container: "#pivot-container",
  toolbar: true,
  report: {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv"
    },
    slice: {
      rows: [
        {
          uniqueName: "Country"
        }
      ],
      columns: [
        {
          uniqueName: "Measures"
        }
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum"
        },
      ]
    }
  },
  reportcomplete: onReportComplete
});

let googleChartsLoaded = false;
// Add a flag variable to keep the state of the report
let pivotTableReportComplete = false;

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

function onGoogleChartsLoaded() {
  googleChartsLoaded = true;
  // Handle the case when the report is complete before Google Charts are loaded
  if (pivotTableReportComplete) {
    createChart();
  }
}

function onReportComplete() {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks
  pivot.off("reportComplete");
  pivotTableReportComplete = true;
  // Handle the case when Google Charts are loaded before the report is complete
  if (googleChartsLoaded) {
    createChart();
  }
}

function createChart() {
  pivot.googlecharts.getData(
    {
      type: "column"
    },
    // Function called when data for the chart is ready
    drawColumnChart,
    // Function called on report changes (filtering, sorting, etc.)
    drawColumnChart
  );
}

function drawColumnChart(chartConfig) {
  let data = google.visualization.arrayToDataTable(chartConfig.data);
  const columnChartContainer = document.getElementById("googlechart-container");
  const chart = new google.visualization.ColumnChart(columnChartContainer);
  chart.draw(data);
}