Calculate Row and Column Wise percentage in Tabulator

Question

This is my Tabulator

As I have placed two Radio buttons Which will calculate the Percentage. One will calculate the percentage row Wise and Other will calculate the percentage Column Wise. That means In row Wise the percentage of male and female will get added and the Corresponding percentage for male and female will be arrived on that. And In column wise the total of male will get added and then we will get the percentage of males in every district. I am not able to find any method in tabulator to do so .Please Help me get through it.

My code for Tabulator is

initTable = function (data) {
var headerMenu = function () {
    var menu = [];
    var columns = this.getColumns();
    for (let column of columns) {
        let icon = document.createElement("i");
        icon.classList.add("fa");
        icon.classList.add(column.isVisible() ? "fa-check-square" : "fa-square");
        let label = document.createElement("span");
        let title = document.createElement("span");
        title.textContent = " " + column.getDefinition().title;
        label.appendChild(icon);
        label.appendChild(title);
        menu.push({
            label: label,
            action: function (e) {
                e.stopPropagation();
                column.toggle();
                if (column.isVisible()) {
                    icon.classList.remove("fa-square");
                    icon.classList.add("fa-check-square");
                } else {
                    icon.classList.remove("fa-check-square");
                    icon.classList.add("fa-square");
                }
            }
        });
    }

    return menu;
};
if (data && Object.keys(data[0])) {
    let cols = [];
    Object.keys(data[0]) ? Object.keys(data[0]).map((v) => {
        if (v != "Geom" && v != "Query" && v != "Additional") {
            cols.push({
                title: v, field: v, formatter: function (cell) {
                    var value = cell.getValue();
                    if (checkKeyInFilters(cell.getField(), data[0].Query.Filters)) {
                        return "<span style='color:#53bfd4; font-weight:bold;'>" + value + "</span>";
                    } else {
                        return "<span>" + value + "</span>";
                    }
                }, headerMenu: headerMenu,
                //topCalc: (!checkKeyInFilters(v, data[0].Query.Filters) ? "sum" : undefined)
            });
        }
        return v;
    }) : undefined;
    window.tableAnalyis = new Tabulator("#analysis-table", {
        layout: "fitColumns",
        responsiveLayout: "collapse",
        data: data,
        columns: cols,
    });
}

}

Answer 1

Did it! All I had to do was to make a new function and calculate the percentage by getting the tabular data.

The Code is :

ChangeIntoPercentile = function (type) {
    const data2 = window.tableAnalyis.getData();
    var Male_Sum = 0;
    var Female_Sum = 0;
    R_Wise_Percentage = [];
    T_Wise_Percentage = [];
    C_Wise_Percentage = [];
    for (i = 0; i < data2.length; i++) {
        Male_Sum += data2[i].Male;
        Female_Sum += data2[i].Female;
    }
    if (type == 'rowwise') {
        for (i = 0; i < data2.length; i++) {

            R_Wise_Percentage.push({ "District": data2[i].District, "Male Percentage %": parseFloat((data2[i].Male / (data2[i].Male + data2[i].Female)) * 100).toFixed(2), "Female Percenatge %": parseFloat((data2[i].Female / (data2[i].Male + data2[i].Female)) * 100).toFixed(2) });

        }    
        let cols = [];
        Object.keys(R_Wise_Percentage[0]) ? Object.keys(R_Wise_Percentage[0]).map((v) => {
            if (v != "Geom" && v != "Query" && v != "Additional") {
                cols.push({
                    title: v, field: v,  headerMenu: headerMenu,
                    //topCalc: (!checkKeyInFilters(v, data[0].Query.Filters) ? "sum" : undefined)
                });
            }
            return v;
        }) : undefined

            window.tableAnalyis.setData = new Tabulator("#analysis-table", {
                layout: "fitColumns",
                responsiveLayout: "collapse",
                data: R_Wise_Percentage,
                columns: cols,
            });
        }   
    else if (type == 'columnwise') {       
        for (i = 0; i < data2.length; i++) {

            C_Wise_Percentage.push({ "District": data2[i].District, "Male Percentage %": parseFloat((data2[i].Male / Male_Sum) * 100).toFixed(2), "Female Percenatge %": parseFloat((data2[i].Female / Female_Sum) * 100).toFixed(2) });
        }
        let cols = [];
        Object.keys(C_Wise_Percentage[0]) ? Object.keys(C_Wise_Percentage[0]).map((v) => {
            if (v != "Geom" && v != "Query" && v != "Additional") {
                cols.push({
                    title: v, field: v, headerMenu: headerMenu,
                    //topCalc: (!checkKeyInFilters(v, data[0].Query.Filters) ? "sum" : undefined)
                });
            }
            return v;
        }) : undefined

        window.tableAnalyis.setData = new Tabulator("#analysis-table", {
            layout: "fitColumns",
            responsiveLayout: "collapse",
            data: C_Wise_Percentage,
            columns: cols,
        });
    }
    else if (type == 'totalwise') {

        Total_Pop = Male_Sum + Female_Sum
        for (i = 0; i < data2.length; i++) {

            T_Wise_Percentage.push({ "District": data2[i].District, "Male Percentage %": parseFloat((data2[i].Male / Total_Pop) * 100).toFixed(2), "Female Percenatge %": parseFloat((data2[i].Female / Total_Pop) * 100).toFixed(2) });
        }
        let cols = [];
        Object.keys(T_Wise_Percentage[0]) ? Object.keys(T_Wise_Percentage[0]).map((v) => {
            if (v != "Geom" && v != "Query" && v != "Additional") {
                cols.push({
                    title: v, field: v, headerMenu: headerMenu,
                    //topCalc: (!checkKeyInFilters(v, data[0].Query.Filters) ? "sum" : undefined)
                });
            }
            return v;
        }) : undefined

        window.tableAnalyis.setData = new Tabulator("#analysis-table", {
            layout: "fitColumns",
            responsiveLayout: "collapse",
            data: T_Wise_Percentage,
            columns: cols,
        });
    }

         

    }

And The HTML Code

 <input type="radio" id="RowWise" name="RowWise" value="RowWise" onchange ="ChangeIntoPercentile('rowwise')">
                <label for="RowWise">District Wise Male/Female Percentage</label><br>
                <input type="radio" id="ColumnWise" name="RowWise" value="ColumnWise" onchange ="ChangeIntoPercentile('columnwise')">
                <label for="ColumnWise">Get Column Wise Percentage for Male and Female</label><br>
                <input type="radio" id="TotalWise" name="RowWise" value="TotalWise" onchange ="ChangeIntoPercentile('totalwise')">
                <label for="TotalWise">Get Total Population Wise Percentage for Male and Female</label><br>