How to display grand totals as progress bars in the JavaScript Pivot Table?

Introduction

Rendering additional UI components, like a progress bar, into a pivot table can significantly enhance data visualization by providing visual insights. This article will guide you on how to display the grand total values as progress bars in the JavaScript Pivot Table.

Steps to insert a progress bar in the pivot table

Step 1: Create the HTML element

First, you need to define an HTML element that will be used to insert the progress bar into the grand total cells. This can be achieved by using the cellTemplate property. The property is triggered during the rendering of each cell in the pivot table and enables you to add a custom HTML element to the cells.

Here is an example of how to define an HTML element by using the cellTemplate property:

[index.js]

    window.getCellContent = function (e) {
        var template;
        if (e && e.targetCell.className.indexOf('e-valuescontent') > -1 && e.cellInfo.isGrandSum && e.cellInfo.columnHeaders === "" 
             && (e.cellInfo.rowHeaders === "" || e.cellInfo.rowHeaders !== "")) {
            // Insert a DOM element into the grand total column cells here.
            template = '<div id="ProgressBar"></div>';
        }
        else {
            template = '';
        }
        return template;
    };
    var pivotObj = new ej.pivotview.PivotView({
        cellTemplate: '${getCellContent(data)}',
    });

In the above code example, we checked if the current cell belongs to the value cell by utilizing the e.valuescontent CSS selector. Following this, we verified whether the cell is a grand total cell using the e.cellInfo.isGrandSum property and the e.cellInfo.columnHeaders CSS selector. If a cell meets all these conditions, we create a custom HTML element (in this case, a div with an id as ‘ProgressBar’). This element can be further customized to include a progress bar element within the pivot table. For other cells, the template remains an empty string, indicating that no DOM element should be added.

Step 2: Insert the progress bar into the DOM element

After creating the required HTML element, you will need to use the queryCellInfo event within the gridSettings. This event is triggered for each cell in the pivot table, allowing for the rendering of the progress bar within the previously created HTML element (i.e., ProgressBar).

Here is an example of how to insert the progress bar within the created DOM element:

[index.js]

var pivotObj = new ej.pivotview.PivotView({
        gridSettings: { columnWidth: 140,
            queryCellInfo: function(args) {
                var colIndex = Number(args.cell.getAttribute('data-colindex'));
                if (args.data[colIndex] && args.data[colIndex].axis == 'value' && args.data[colIndex].isGrandSum) {
                    // Here, we retrieve the previously inserted DOM element
                    var progressBar = args.cell.querySelector('#ProgressBar');
                    if(progressBar) {
                        // Here, we remove the cell value
                        args.cell.querySelector('.e-cellvalue').textContent = "";
                        // Here, we calculate the progress bar width based on the cell value
                        var width = args.data[colIndex].value/100
                        progressBar.innerHTML = width < 100 ? width + '%' : '100%';
                        // Adjust the progress bar width based on calculated value
                        progressBar.style.width = width < 100 ? width + '%' : '100%';
                        // Here, we set the height of the progress bar
                        progressBar.style.height = '13px';
                        // Here, we apply padding for aesthetics look
                        progressBar.style.padding = '10px';
                        // Here, we apply the background color for the progress bar based on the percentage value
                        progressBar.style.background = width > 45 ? '#00b300' : '#df2222';
                        // Here, we set the text align 
                        progressBar.style.textAlign = 'left';
                        // Here, we apply the font color for text
                        progressBar.style.color = 'White';
                        // Here, we apply the font size for text
                        progressBar.style.fontSize = '11px';
                       
                    } 
                }        
            }
        }
});

Here’s a breakdown of how the code works:

1. Within the queryCellInfo event, we use the isGrandSum property to check whether the current cell belongs to the grand total. If it does, we retrieve the previously created HTML element by targeting the ProgressBar id.
2. Following this, we clear the current cell value by setting the .e-cellvalue element’s text content to an empty string.
3. Afterwards, the progress bar’s width is calculated based on the cell value relative to a predetermined total value, in this case 100. If the calculated width is less than 100, we assign it to the progress bar; otherwise, we set the progress bar width to 100%.
4. Finally, we set the height of the progress bar to 13px and the padding to 10px. Furthermore, the background color is set to green if the calculated width exceeds 45%; otherwise, it’s set to red. Additionally, we aligned the text to the left, changed the font color to white, and set the font size to 11 pixels.

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 display grand totals as progress bars in the JavaScript Pivot Table.

You can also refer to our JavaScript 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!