Is it possible to have a chart in a column for each pivot data row showing the trend of the values of the current row?

Question

Hi,I would like to ask if it is possible to show a (line) chart in the (last) column of each row of the Pivot Table, that shows the trend of the values of the current row?I suppose that a method like "columnTemplate" or something similar is needed, as provided in other components, but I didn't find anything similar for the PivotTable...Thanks.

AngelinFaithSheeba PaulvannanRajadurai · Answer

Hi Laurin,We are facing
difficulties on achieving your requirement in sample level. However, we are
currently preparing a sample to fulfil your requirements. We will update the
details within two business days (May 23, 2022).Regards,Angelin
Faith Sheeba

AngelinFaithSheeba PaulvannanRajadurai · Answer

Hi Laurin,Using queryCellInfo and dataBound events, you
can create and add Sparkline chart component to the last column of the Pivot Table.
Please refer the below code example.Code
example:

queryCellInfo(args) {
      var colIndex = Number(args.cell.getAttribute('aria-colindex'));
      if (
        args.data[colIndex].isGrandSum &&
        args.data[colIndex].columnHeaders == ''
      ) {
        args.cell.innerText = '';
       
  //Here
  created a div element in the grand total cell to render chart component.
        var div = document.createElement('div'); 
        div.id = 'chart' + args.data[colIndex].rowIndex;
        args.cell.appendChild(div);
   
        var data = [];
   
        for (var i = 1; i < Object.keys(args.data).length - 1; i++) {
          var object = {
            x: i,
            xval: args.data[i].columnHeaders,
            yval: args.data[i].actualValue,
          };
          data.push(object);
        }
        obj[args.data[colIndex].rowIndex] = data; //The column value of each row stored as an object
  that used to render the chart component.
      }
    }
   
    dataBound() {
      // Here the
  Sparkline chart series created based on the above
  stored data
      var keys = Object.keys(obj);
      for (var i = 0; i < Object.keys(obj).length; i++) {
        let winloss = new SparklineComponent({
          height: '30px',
          lineWidth: 1,
          type: 'Line', // You can
  change chart type here
          valueType: 'Category',
          dataSource: obj[keys[i]],
          xName: 'xval',
          yName: 'yval',
          tooltipSettings: {
            format: '${xval}: ${yval}',
            trackLineSettings: {
              color: 'red',
              width: 1,
            },
            visible: true,
          },
        });
        winloss.appendTo('#chart' + keys[i]);
      }
    }

Meanwhile, we have prepared a sample for your reference.
Please find it from below link.Sample: ​https://stackblitz.com/edit/react-rhevwb-jk4hm4?file=index.jsPlease let us know if you have any concerns.Regards,Angelin Faith Sheeba.

Laurin S · Answer

Thanks, the provided solution works.However, I have three other questions regarding this topic:Suppose I have a hierarchical rows ("Country" -> "Product"). When the child rows ("Products") are collapsed, I don't want to show the sum of all products per country in the chart of the "country row", but for each product a separate line. How can I do that?﻿﻿Screenshot: in collapsed state, for product "Mountain Bike" the chart line is green, for product "Road Bike" the line is red, ... In addition, again when collapsing the products, how can I keep the "country row" empty, in other words, I don't want to show any values in the various columns (results of aggregation/sum).

Screenshot: the "red" values should not be visible How can I disable the collapse button, so that the user is not able to collapse the "product" rows?Screenshot: disable this button I've attached a demo code for better understanding.Thanks.Attachment: reactrhevwbjy6fk3_aba810e9.zip

AngelinFaithSheeba PaulvannanRajadurai · Answer

Hi Laurin,Please find the response below:

Query

Comments

Suppose I have a hierarchical rows ("Country" ->
  "Product"). When the child rows ("Products") are
  collapsed, I don't want to show the sum of all products per country in the
  chart of the "country row", but for each product a separate line.
  How can I do that?﻿﻿
  Screenshot: in collapsed state, for product
  "Mountain Bike" the chart line is green, for product "Road
  Bike" the line is red, ...

we are
  currently preparing a sample to fulfil your requirements. We will update the
  details within two business days (July 11, 2022).

In addition, again when collapsing the products, how can I keep the
  "country row" empty, in other words, I don't want to show any
  values in the various columns (results of aggregation/sum).
  Screenshot: the
  "red" values should not be visible

Using showSubTotals property, you can hide the
  subtotals in the pivot table. Please refer the below code example:
  Code Example:

let dataSourceSettings = {
      showSubTotals: false,
    };

How can I disable the collapse button, so that the user is not able to
  collapse the "product" rows?
  Screenshot: disable this button

Kindly use the following CSS to hide the collapse/expand icon in
  the pivot table at your end sample.
   
  Code Example:
   
  Index.css

.e-pivotview .e-expand,
    .e-pivotview .e-collapse {
      display: none;
    }

Meanwhile, we have prepared a sample with above information
for your reference. Sample: https://stackblitz.com/edit/react-1gxtcm?file=index.js,index.cssPlease let
us know if you have any concerns.Regards,Angelin
Faith Sheeba

Laurin S · Answer

Thanks for the quick reply.

The provided solution of question 2 does not completely fulfill my requirements/problems:

I don't want to show the subtotals when the child-rows are collapsed.

The provided solution hides the sub-totals only when the child-rows are expanded, which is okay, but they should also not appear in collapsed mode.

AngelinFaithSheeba PaulvannanRajadurai · Answer

Hi Laurin,Please find the response below. Query Comments Suppose I have a hierarchical rows ("Country" -> "Product"). When the child rows ("Products") are collapsed, I don't want to show the sum of all products per country in the chart of the "country row", but for each product a separate line. How can I do that? Screenshot: in collapsed state, for product "Mountain Bike" the chart line is green, for product "Road Bike" the line is red, ... Kindly use the below code example to insert the chart at grand total as per your requirement. Code Example: enginePopulated(args) { //Store the data for parent and child field here. var childData = []; for (var i = args.pivotValues.length - 1; i >= 0; i--) { var data = []; if (args.pivotValues[i] && args.pivotValues[i][0] && !args.pivotValues[i][0].hasChild) { for ( var j = 0; args.pivotValues[i] != null && j < args.pivotValues[i].length; j++) { if (args.pivotValues[i][j] != null && args.pivotValues[i][j].axis == 'value' && !args.pivotValues[i][j].isGrandSum ) { var object = { x: args.pivotValues[i][j].columnHeaders, y: args.pivotValues[i][j].actualValue, }; data.push(object); } } if (args.pivotValues[i] && args.pivotValues[i][0]) { obj[args.pivotValues[i][0].rowIndex] = [{ type: 'Line', dataSource: data, xName: 'x', width: 1, yName: 'y', name: args.pivotValues[i][0].formattedText, }]; childData.push({ type: 'Line', dataSource: data, xName: 'x', width: 1, yName: 'y', name: args.pivotValues[i][0].formattedText, }); } } else { if (args.pivotValues[i] && args.pivotValues[i][0]) { obj[args.pivotValues[i][0].rowIndex] = childData; childData = []; } } } } dataBound() { //Create a chart component with the stored data. var keys = Object.keys(obj); var keys1 = Object.keys(parentData); for (var i = 1; i <= Object.keys(obj).length; i++) { let winloss = new Chart({ height: '100px', series: obj[keys[i - 1]], primaryXAxis: { valueType: 'Category', }, tooltip: { enable: true }, }); winloss.appendTo('#chart' + i); } } Output Screenshot: Meanwhile, we have prepared a sample with above information for your reference. Sample: https://stackblitz.com/edit/react-tgzaoi-9nziri?file=index.js In addition, again when collapsing the products, how can I keep the "country row" empty, in other words, I don't want to show any values in the various columns (results of aggregation/sum). Screenshot: the "red" values should not be visible Using aggregateCellInfo event, you can hide the parent subtotals in the pivot table. Please refer the below code example: Code Example: aggregateCellInfo(args) { if (args.row.level == 0) { // Parent field has level 0, next field level is 1 and so on... args.value = ''; } } Output Screenshot: Meanwhile, we have prepared a sample with above information for your reference. Sample: https://stackblitz.com/edit/react-gwhqsm?file=index.js Please let us know if you have any concerns.Regards,Angelin Faith Sheeba