Is it possible to associate more then one chart with a Pivot Table?
Thanks for your response. Hopefully images here will help. In the first image there are three visualizations of some data pulled from an OLAP (Analysis Services) cube. The second image shows the specific data.
The first image includes a one line grid for the totals of the data. This can be ignored for this question.
The first image also includes a treemap showing, for each row in the pivot table, a visualizations of the data where the size of each block is the % of total of the 'Actual' column values from the Pivot table. The color of each block is the % achieved column values from the Pivot table where each color is determined according to a set of thresholds (e.g. >95% green, <90% red).
The image also shows a bar chart visualization of the data where the bar length values are determined by the values of the actual column and the point rectangles the values of the Goal column.
Hope this helps.
Hi Bill,
Thanks for the patience. We have prepared a custom sample by rendering the Chart and TreeMap component based on your requirement. Take a look at the code example below. Using the enginePopulated event, we rendered the chart with the grand totals and the tree map with the remaining pivot table values.
Code Snippet:
|
enginePopulated: function (args) { let pivotValues = args.pivotValues; // Frame the data source for the chart with the pivot table grand total values. let chartDataSource = {}; for (let value of pivotObj.dataSourceSettings.values) { measureList[value.name] = value.caption || value.name; } for (let cCnt = 0; cCnt < pivotValues.length; cCnt++) { if (pivotValues[cCnt] != null) { for (let cellIndex of Object.keys(pivotValues[cCnt])) { let cell = pivotValues[cCnt][Number(cellIndex)]; if (cell.isGrandSum && (cell.axis == 'row' || cell.axis == 'value')) { if (cell.rowHeaders) { let columnSeries = pivotObj.dataSourceSettings.values.length > 1 ? cell.columnHeaders.toString() + ' ~ ' + measureList[cell.actualText] : cell.columnHeaders.toString(); if (chartDataSource[columnSeries]) { chartDataSource[columnSeries].push({ x: cell.rowHeaders.toString(), y: Number(cell.value), }); } else { chartDataSource[columnSeries] = [ { x: cell.rowHeaders.toString(), y: Number(cell.value) }, ]; } } } } } } let columnKeys = Object.keys(chartDataSource); let chartSeries = []; for (let key of columnKeys) { // Frame the chart series with the datasource here. chartSeries.push({ dataSource: chartDataSource[key], xName: 'x', yName: 'y', type: 'Column', name: key, }); } // Frame the data source for the treemap with the pivot table values. var treeData = []; for (var i = 0; i < pivotValues.length; i++) { for (var j = 0;pivotValues[i] != null && j < pivotValues[i].length;j++) { if (pivotValues[i][j] != null && pivotValues[i][j].axis == 'value' && !pivotValues[i][j].isGrandSum ) { treeData.push({ RowHeader: pivotValues[i][j].rowHeaders, ColumnHeader: pivotValues[i][j].columnHeaders, Value: pivotValues[i][j].value, }) } } } // Render the chart component with the framed data source. 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' ); } // If we perform any action in table, chart renders with that updated data here. 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(); } // Render the treemap component with the framed data source. treemap = new ej.treemap.TreeMap({ tooltipSettings: { visible: true, textStyle: { fontFamily : 'Segeo UI' } }, titleSettings: { text: 'Car Sales by Country - 2017', textStyle: { size: '15px', fontFamily: 'Segeo UI' } }, rangeColorValuePath: 'Sales', dataSource: treeData, legendSettings: { visible: true, position: 'Top', shape: 'Rectangle', textStyle: { fontFamily : 'Segeo UI' } }, palette: ['#C33764', '#AB3566', '#993367', '#853169'], weightValuePath: 'Value', leafItemSettings: { labelPath: 'RowHeader', border: { color: 'white', width: 0.5 }, labelStyle:{ fontFamily : 'Segeo UI' } }, levels: [ { groupPath: 'ColumnHeader', border: { color: 'white', width: 0.5 }, headerStyle: { fontFamily: 'Segoe UI' } } ] },'#default-container'); } |
Output screenshot:
Meanwhile, we have prepared a sample for your reference. Please find it from below link.
Sample: https://stackblitz.com/edit/y1paai-cwhcxr?file=index.js,index.html
Please let us know if you have concerns.
Regards,
Angelin Faith Sheeba
