WebDataRocks and CanvasJS Integration

by ananyadeka

HTML

<link rel="stylesheet" href="https://cdn.webdatarocks.com/latest/webdatarocks.css">
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<center><h1>WebDataRocks and CanvasJS Integration</h1></center>
<div id="pivot-table" style="width: 100%; height: 400px;"></div>
<div id="chart-container" style="height: 400px; width: 100%;"></div>

JavaScript

var pivot = new WebDataRocks({
  container: "#pivot-table",
  toolbar: true,
  report: {
    dataSource: {
      data: [
        { Category: "Fruits", Sales: 100, Month: "January" },
        { Category: "Vegetables", Sales: 200, Month: "January" },
        { Category: "Fruits", Sales: 150, Month: "February" },
        { Category: "Vegetables", Sales: 250, Month: "February" }
      ]
    },
    slice: {
      rows: [{ uniqueName: "Category" }],
      columns: [{ uniqueName: "Measures" }],
      measures: [{ uniqueName: "Sales", aggregation: "sum" }]
    },
  },
  reportcomplete: function () {
    pivot.off("reportcomplete");
    updateChart();
  }
});

var chartData = [];
var chart = new CanvasJS.Chart("chart-container", {
  animationEnabled: true,
  theme: "light2",
  title: {
    text: "Sales by Category"
  },
  data: [
    {
      type: "column",
      dataPoints: chartData
    },
  ],
});

function updateChart() {
  pivot.getData({}, renderChart);
}

function renderChart(data) {
  if (data.data) {
    data.data.forEach((row) => {
      if (row.r0 && row.v0) {
        chartData.push({
          label: row.r0,
          y: row.v0
        })
      }
    })
  }
  chart.render();
}

pivot.on("datachanged", updateChart);