How to create a Chart based on Pivot Table grand total values?

This article explains how to create a Chart based on the Pivot Table grand total values.

Create a Chart based on Pivot Table grand total values

When working with pivot tables, you might want to visualize the grand total values on a chart. This can be achieved by using the enginePopulated event. This event is triggered after the pivot engine has been populated and allows you to render the Chart component based on the pivotValues.

Here is a code example that shows how to create a Chart based on Pivot Table grand total values.

[index.html]

   <div id="PivotView" style="height: 100%"></div>
   <div id="Chart"></div>

[index.js]

var chart = null;
var pivotObj = new ej.pivotview.PivotView({
  enginePopulated: function (args) {
    var data = [];
    for (var i = 1; i < args.pivotValues.length - 1; i++) {
      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 && args.pivotValues[i][j].rowHeaders !== '' &&
          args.pivotValues[i][j].columnHeaders == '') {
          // Here we have framed the data to render chart component based on pivotValues
          var object = {
            x: args.pivotValues[i][j].rowHeaders,
            y: parseFloat(args.pivotValues[i][j].formattedText),
            text: args.pivotValues[i][j].rowHeaders +':' + args.pivotValues[i][j].formattedText,
          };
        }
      }
      data.push(object);
    }
    // Here we have create the AccumulationChart
    if (chart == null) {
      chart = new ej.charts.AccumulationChart({
        series: [
          {
            dataSource: data,
            xName: 'x',
            yName: 'y',
            startAngle: 0,
            endAngle: 360,
            dataLabel: {
              visible: true,
              position: 'Outside',
              name: 'text',
              font: {
                fontWeight: '100',
              },
            },
            innerRadius: '0%'
          },
        ],
        enableAnimation: false,
      });
      chart.appendTo('#Chart');
    } else {
      chart.series = [
        {
          dataSource: data,
          xName: 'x',
          yName: 'y',
          startAngle: 0,
          endAngle: 360,
          dataLabel: {
            visible: true,
            position: 'Outside',
            name: 'text',
            font: {
              fontWeight: '600',
            },
          },
          innerRadius: '0%',
        },
      ];
      // Here we have called refresh method to render the component again with updated data.
      chart.refresh();
    }
  }
});
pivotObj.appendTo('#PivotView');

In the above code, we iterate through the pivotValues to find the grand total values. Then, we create an object for each grand total value with properties x, y, and text. These objects are pushed into a data array, which is then used as the data source for the chart component. Following this, we create an AccumulationChart using the ej.charts.AccumulationChart class, and it is appended to a container with the ID #Chart. If the chart already exists, we simply update its series with the new data and called the refresh method to render the component again.

The following screenshot portrays the results of the code snippet mentioned above.

Screenshot

For a practical demonstration, refer to the sample of stackblitz.

Conclusion:
I hope you enjoyed learning how to create a Chart based on the Pivot Table grand total values.

You can also refer to our Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!