How to show value and percentage difference between current and previous year in JavaScript Pivot Table?

This article explains how to show the value and percentage difference between the current and previous year in JavaScript Pivot Table.

Displaying value and percentage difference between the current and previous year in pivot table

In certain business scenarios, it might be essential to present data comparisons from different periods (for example, the current and previous year) in a pivot table. A clear presentation of such data comparisons enables decision-makers to gain insightful trends and patterns. By using the aggregateCellInfo event in the pivot table, it’s feasible to display both the value and the percentage difference between the current and previous year.

Here is a code snippet that guides how you can show the value and percentage difference between the current and previous year in pivot table.

[index.js]

var previousValue = 0;
var currentValue = 0;
var rowIndex = null;

var pivotObj = new ej.pivotview.PivotView({
  aggregateCellInfo: function (args) {
    var changed;
    var changedPercentage;

    if (rowIndex === null) {
      rowIndex = args.row.rowIndex;
    } else if (args.row.rowIndex !== rowIndex) {
      previousValue = 0;
      rowIndex = args.row.rowIndex;
    }
    if (args.fieldName === 'Sold') {
      if (previousValue === 0) {
        previousValue = args.value;
        currentValue = null;
      } else {
        currentValue = args.value;
      }
    }

    if (args.fieldName === 'Changed' && currentValue !== null) {
      changed = previousValue - currentValue;
      args.value = changed;
    }

    if (args.fieldName === 'Changed%' && currentValue !== null) {
      changedPercentage = (currentValue - previousValue)/previousValue;
      args.value = changedPercentage;
      previousValue = currentValue;
    }
    if (currentValue === null) {
      if (args.fieldName === 'Changed') {
        args.value = '';
      }
      if (args.fieldName === 'Changed%') {
        args.value = '';
        args.skipFormatting = true;
      }
    }
  }
});

In the above code, the function aggregateCellInfo is used to calculate the value and percentage difference for a specific field, in this case, Sold. The Changed field represents the difference between current and previous values, and the Changed% field represents this difference in percentage form.

Please note that these calculations happen only if the current value is not null. In cases where the current value is null, both the Changed field and Changed% fields are set as empty.

In this way, you can effectively display the value and percentage difference between the current and previous year in your pivot table.

The following screenshot, which portrays the results of the code snippet mentioned above,

Screenshot:

For a practical example of this code in action, you can refer to the following Sample in Stackblitz

Conclusion:
I hope you enjoyed learning how to show the value and percentage difference between the current and previous year in Pivot Table.

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 example to understand how to create and manipulate data.

For current customers, you can check out our components from 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!