Chart based on pivot table selection in EJ2 JavaScript Pivotview control

2 May 20239 minutes to read

The cell selection support is enabled using the allowSelection property and its type and mode are configured using the selectionSettings property. The cellSelected event gets fired on every selection operation performed in the pivot table. This event returns the selected cell informations, like row header name, column header name, measure name, and value. Based on this information, the chart control will be plotted.

var onInit = true;
var measureList = {};
var chart;
var selectedCells;
var chartSeries;
var pivotObj = new ej.pivotview.PivotView({
  dataSourceSettings: {
    dataSource: pivotData,
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    filters: []
  },
  width: '100%',
  height: 290,
  dataBound: function () {
    if (onInit) {
      for (var i = 0; i < pivotObj.dataSourceSettings.values.length; i++) {
        var value = pivotObj.dataSourceSettings.values[i];
        measureList[value.name] = value.caption || value.name;
      }
      pivotObj.grid.selectionModule.selectCellsByRange({ cellIndex: 1, rowIndex: 1 }, { cellIndex: 3, rowIndex: 3 });
    }
  },
  gridSettings: {
    allowSelection: true,
    selectionSettings: { mode: 'Cell', type: 'Multiple', cellSelectionMode: 'Box' }
  },
  cellSelected: function (args) {
    selectedCells = args.selectedCellsInfo;
    if (selectedCells && selectedCells.length > 0) {
      chartSeries = frameChartSeries();
      chartUpdate();
    }
  }
});
pivotObj.appendTo('#PivotTable');

function frameChartSeries() {
  var columnGroupObject = {};
  for (var b = 0; b < selectedCells.length; b++) {
    var cell = selectedCells[b];
    if (cell.measure !== '') {
      var columnSeries = (pivotObj.dataSourceSettings.values.length > 1 && measureList[cell.measure]) ?
        (cell.columnHeaders.toString() + ' ~ ' + measureList[cell.measure]) : cell.columnHeaders.toString();
      if (columnGroupObject[columnSeries]) {
        columnGroupObject[columnSeries].push({ x: cell.rowHeaders == '' ? 'Grand Total' : cell.rowHeaders.toString(), y: Number(cell.value) });
      }
      else {
        columnGroupObject[columnSeries] = [{ x: cell.rowHeaders == '' ? 'Grand Total' : cell.rowHeaders.toString(), y: Number(cell.value) }];
      }
    }
  }
  var columnKeys = Object.keys(columnGroupObject);
  var chartSeries = [];
  for (var c = 0; c < columnKeys.length; c++) {
    var key = columnKeys[c];
    chartSeries.push({
      dataSource: columnGroupObject[key],
      xName: 'x',
      yName: 'y',
      type: 'Column',
      name: key
    });
  }
  return chartSeries;
}
function chartUpdate() {
  if (onInit) {
    onInit = false;
    chart = new ej.charts.Chart({
      title: 'Sales Analysis',
      legendSettings: {
        visible: true
      },
      tooltip: {
        enable: true
      },
      primaryYAxis: {
        title: pivotObj.dataSourceSettings.values.map(function (args) { return args.caption || args.name; }).join(' ~ '),
      },
      primaryXAxis: {
        valueType: 'Category',
        title: pivotObj.dataSourceSettings.rows.map(function (args) { return args.caption || args.name; }).join(' ~ '),
        labelIntersectAction: 'Rotate45'
      },
      series: chartSeries,
    }, '#Chart');
  }
  else {
    chart.series = chartSeries;
    chart.primaryXAxis.title = pivotObj.dataSourceSettings.rows.map(function (args) { return args.caption || args.name; }).join(' ~ ');
    chart.primaryYAxis.title = pivotObj.dataSourceSettings.values.map(function (args) { return args.caption || args.name; }).join(' ~ ');
    chart.refresh();
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Pivot Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Pivot Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-pivotview/styles/material.css" rel="stylesheet">


    <script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="PivotTable"></div>
        <br>
        <div id="Chart"></div>
    </div>


    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>