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.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Inject, PivotViewComponent, FieldList } from '@syncfusion/ej2-react-pivotview';
import { Chart, Category, Legend, Tooltip, ColumnSeries, LineSeries } from '@syncfusion/ej2-charts';
import { pivotData } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.dataSourceSettings = {
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
dataSource: pivotData,
expandAll: false,
filters: [],
drilledMembers: [{ name: 'Country', items: ['France'] }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
};
this.gridSettings = {
columnWidth: 120,
allowSelection: true,
selectionSettings: {
mode: 'Cell',
type: 'Multiple',
cellSelectionMode: 'Box',
}
};
this.onInit = true;
this.measureList = {};
}
frameChartSeries() {
let columnGroupObject = {};
for (let cell of this.selectedCells) {
if (cell.measure !== '') {
let columnSeries = (this.pivotObj.dataSourceSettings.values.length > 1 && this.measureList[cell.measure]) ?
(cell.columnHeaders.toString() + ' ~ ' + this.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) }];
}
}
}
let columnKeys = Object.keys(columnGroupObject);
let chartSeries = [];
for (let key of columnKeys) {
chartSeries.push({
dataSource: columnGroupObject[key],
xName: 'x',
yName: 'y',
type: 'Column',
name: key
});
}
return chartSeries;
}
chartUpdate() {
if (this.onInit) {
this.onInit = false;
Chart.Inject(ColumnSeries, LineSeries, Legend, Tooltip, Category);
this.chart = new Chart({
title: 'Sales Analysis',
legendSettings: {
visible: true
},
tooltip: {
enable: true
},
primaryYAxis: {
title: this.pivotObj.dataSourceSettings.values.map(function (args) { return args.caption || args.name; }).join(' ~ '),
},
primaryXAxis: {
valueType: 'Category',
title: this.pivotObj.dataSourceSettings.rows.map(function (args) { return args.caption || args.name; }).join(' ~ '),
labelIntersectAction: 'Rotate45'
},
series: this.chartSeries,
}, '#Chart');
}
else {
this.chart.series = this.chartSeries;
this.chart.primaryXAxis.title = this.pivotObj.dataSourceSettings.rows.map(function (args) { return args.caption || args.name; }).join(' ~ ');
this.chart.primaryYAxis.title = this.pivotObj.dataSourceSettings.values.map(function (args) { return args.caption || args.name; }).join(' ~ ');
this.chart.refresh();
}
}
dataBound() {
if (this.onInit) {
for (let value of this.pivotObj.dataSourceSettings.values) {
this.measureList[value.name] = value.caption || value.name;
}
this.pivotObj.grid.selectionModule.selectCellsByRange({ cellIndex: 1, rowIndex: 1 }, { cellIndex: 3, rowIndex: 3 });
}
}
cellSelected(args) {
this.selectedCells = args.selectedCellsInfo;
if (this.selectedCells && this.selectedCells.length > 0) {
this.chartSeries = this.frameChartSeries();
this.chartUpdate();
}
}
render() {
return <div className="control-section"><PivotViewComponent ref={d => this.pivotObj = d} id='PivotView' height={300} dataSourceSettings={this.dataSourceSettings} showFieldList={true} gridSettings={this.gridSettings}><Inject services={[FieldList]}/></PivotViewComponent><br /><div id="Chart"></div></div>;
}
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { IDataOptions, IDataSet, Inject, PivotViewComponent, FieldList } from '@syncfusion/ej2-react-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Chart, Category, Legend, Tooltip, ColumnSeries, LineSeries, SeriesModel } from '@syncfusion/ej2-charts';
import { pivotData } from './datasource';
class App extends React.Component<{}, {}>{
public dataSourceSettings: IDataOptions = {
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
dataSource: pivotData as IDataSet[],
expandAll: false,
filters: [],
drilledMembers: [{ name: 'Country', items: ['France'] }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
};
public gridSettings: GridSettings = {
columnWidth: 120,
allowSelection: true,
selectionSettings: {
mode: 'Cell',
type: 'Multiple',
cellSelectionMode: 'Box',
}
};
public onInit: boolean = true;
public measureList: { [key: string]: string } = {};
public chart: Chart;
public selectedCells: CellSelectedObject[];
public chartSeries: SeriesModel[];
public pivotObj: PivotViewComponent;
frameChartSeries(): SeriesModel[] {
let columnGroupObject: { [key: string]: { x: string, y: number }[] } = {};
for (let cell of this.selectedCells) {
if (cell.measure !== '') {
let columnSeries = (this.pivotObj.dataSourceSettings.values.length > 1 && this.measureList[cell.measure]) ?
(cell.columnHeaders.toString() + ' ~ ' + this.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) }];
}
}
}
let columnKeys: string[] = Object.keys(columnGroupObject);
let chartSeries: SeriesModel[] = [];
for (let key of columnKeys) {
chartSeries.push({
dataSource: columnGroupObject[key],
xName: 'x',
yName: 'y',
type: 'Column',
name: key
});
}
return chartSeries;
}
chartUpdate(): void {
if (this.onInit) {
this.onInit = false;
Chart.Inject(ColumnSeries, LineSeries, Legend, Tooltip, Category);
this.chart = new Chart({
title: 'Sales Analysis',
legendSettings: {
visible: true
},
tooltip: {
enable: true
},
primaryYAxis: {
title: this.pivotObj.dataSourceSettings.values.map(function (args) { return args.caption || args.name }).join(' ~ '),
},
primaryXAxis: {
valueType: 'Category',
title: this.pivotObj.dataSourceSettings.rows.map(function (args) { return args.caption || args.name }).join(' ~ '),
labelIntersectAction: 'Rotate45'
},
series: this.chartSeries,
}, '#Chart');
} else {
this.chart.series = this.chartSeries;
this.chart.primaryXAxis.title = this.pivotObj.dataSourceSettings.rows.map(function (args) { return args.caption || args.name }).join(' ~ ');
this.chart.primaryYAxis.title = this.pivotObj.dataSourceSettings.values.map(function (args) { return args.caption || args.name }).join(' ~ ');
this.chart.refresh();
}
}
dataBound(): void {
if(this.onInit) {
for (let value of this.pivotObj.dataSourceSettings.values) {
this.measureList[value.name] = value.caption || value.name;
}
this.pivotObj.grid.selectionModule.selectCellsByRange(
{ cellIndex: 1, rowIndex: 1 },
{ cellIndex: 3, rowIndex: 3 }
);
}
}
cellSelected(args: PivotCellSelectedEventArgs): void {
this.selectedCells = args.selectedCellsInfo;
if (this.selectedCells && this.selectedCells.length > 0) {
this.chartSeries = this.frameChartSeries();
this.chartUpdate();
}
}
render() {
return <div className="control-section"><PivotViewComponent ref={d => this.pivotObj = d!} id='PivotView' height={300} dataSourceSettings={this.dataSourceSettings} showFieldList={true} gridSettings={this.gridSettings}><Inject services={[FieldList]}/></PivotViewComponent><br/><div id="Chart"></div></div>
}
};
ReactDOM.render(<App />, document.getElementById('pivotview'));