<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div id="pivot-container"></div>
<div style="width: 600px;">
  <canvas id="chart-container"></canvas>
</div>

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

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: function() {
    pivot.off("reportcomplete");
    createChart();
  },
});

let chart;

function createChart() {
  pivot.getData({},
    drawChart,
    updateChart
  );
};

function drawChart(rawData) {
  let chartData = prepareData(rawData);

  const config = {
    type: 'polarArea',
    data: {
      labels: chartData.labels,
      datasets: [{
        data: chartData.values,
      }],
    },
  }

  chart = new Chart(
    document.getElementById('chart-container'),
    config,
  );
}

function updateChart(rawData) {
  chart.destroy();
  drawChart(rawData);
};

function prepareData(rawData) {
  let labels = rawData.data.filter(rec => rec.r0 && rec.v0).map(rec => rec.r0);
  let values = rawData.data.filter(rec => rec.r0 && rec.v0).map(rec => rec.v0);

  return {
    labels: labels,
    values: values
  };
};