javascripttabulator
Show total value instead of total percentage in Tabulator
I am currently working on showing data on a tabulator and I want to show data according to the percentage value So, I did that part but now while totaling the value using bottomCalc and it shows total percentage but instead of total percentage I want to show the original values but cant think of any logic to do it . Is there any way I can do it??
The total I want
As you can see in the image, there are radio buttons above from where I change the tabulator data.
And when I click on Radio button I get this
Here I am getting 100 in total as of in percentage but I want to show the values It is showing above picture as total value.
The Code I did for this is:
initTable = function (data, modified) {
if (!modified) window.initialTableData = data;
if (!modified) window.initialFilters = data[0].Query.Filters;
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") {
if (v != "District" && document.getElementById("RowWise").checked == false) {
cols.push({
title: v, bottomCalc: "sum", field: v, formatter: function (cell) {
var value = cell.getValue();
value = isNaN(value) ? value : numberWithCommas(value);
if (typeof (cell.getField) != 'undefined') {
if (checkKeyInFilters(cell.getField(), window.initialFilters)) {
return "<span class='field-color'>" + value + "</span>";
} else {
return "<span>" + value + "</span>";
}
}
}, headerMenu: headerMenu,
titleFormatter: function (cell) {
if (checkKeyInFilters(cell.getValue(), window.initialFilters)) {
$(cell.getElement()).addClass("field-color");
}
return cell.getValue();
}
//topCalc: (!checkKeyInFilters(v, data[0].Query.Filters) ? "sum" : undefined)
});
}
else {
cols.push({
title: v, field: v, formatter: function (cell) {
var value = cell.getValue();
value = isNaN(value) ? value : numberWithCommas(value);
if (typeof (cell.getField) != 'undefined') {
if (checkKeyInFilters(cell.getField(), window.initialFilters)) {
return "<span class='field-color'>" + value + "</span>";
} else {
return "<span>" + value + "</span>";
}
}
}, headerMenu: headerMenu,
titleFormatter: function (cell) {
if (checkKeyInFilters(cell.getValue(), window.initialFilters)) {
$(cell.getElement()).addClass("field-color");
}
return cell.getValue();
}
//topCalc: (!checkKeyInFilters(v, data[0].Query.Filters) ? "sum" : undefined)
});
}
}
return v;
}) : undefined;
//cols.push({ title: "Total", field:"Total" })
window.tableAnalyis = new Tabulator("#analysis-table", {
layout: "fitColumns",
responsiveLayout: "collapse",
data: data,
columns: cols,
});
}
And for the percentage Calculation I did
changeCalcType = function (type) {
if (!window.initialTableData) return;
window.toggleLoader(true, "Please wait..");
setTimeout(function () {
const data2 = window.initialTableData;
var C_Sum = {};
pdata = [];
var keys = Object.keys(data2[0]);
if (type == 'numberwise') {
pdata = window.initialTableData;
}
else if (type == 'rowwise') {
for (i = 0; i < data2.length; i++) {
for (j = 0; j < keys.length; j++) {
if (isNaN(data2[i][keys[j]]) == false && keys[j] != 'Total' && keys[j] != 'Pincode') {
if (C_Sum[i]) {
C_Sum[i] += data2[i][keys[j]];
} else {
C_Sum[i] = data2[i][keys[j]];
}
}
}
}
for (i = 0; i < data2.length; i++) {
let _dt = {};
for (j = 0; j < keys.length; j++) {
if (isNaN(data2[i][keys[j]]) == true || keys[j] == 'Total' || keys[j] == 'Pincode') {
_dt[keys[j]] = data2[i][keys[j]];
} else {
_dt[keys[j] + " (%)"] = Math.round((data2[i][keys[j]] / C_Sum[i]) * 100);
}
}
_dt["Total"] = C_Sum[i]
pdata.push(_dt);
}
}
else if (type == 'columnwise') {
let S_Sum = {}
for (i = 0; i < data2.length; i++) {
for (j = 0; j < keys.length; j++) {
if (isNaN(data2[i][keys[j]]) == false && keys[j] != 'Total' && keys[j] != 'Pincode') {
if (C_Sum[keys[j]]) {
C_Sum[keys[j]] += data2[i][keys[j]];
} else {
C_Sum[keys[j]] = data2[i][keys[j]];
}
}
}
}
for (i = 0; i < data2.length; i++) {
let _dt = {};
for (j = 0; j < keys.length; j++) {
if (isNaN(data2[i][keys[j]]) == true || keys[j] == 'Total' || keys[j] == 'Pincode') {
_dt[keys[j]] = data2[i][keys[j]];
} else {
_dt[keys[j] + " (%)"] = Math.round((data2[i][keys[j]] / C_Sum[keys[j]]) * 100);
}
}
pdata.push(_dt);
}
}
else if (type == 'totalwise') {
let S_Sum = {};
for (i = 0; i < data2.length; i++) {
for (j = 0; j < keys.length; j++) {
if (isNaN(data2[i][keys[j]]) == false && keys[j] != 'Total' && keys[j] != 'Pincode') {
if (C_Sum[keys[j]]) {
C_Sum[keys[j]] += data2[i][keys[j]];
} else {
C_Sum[keys[j]] = data2[i][keys[j]];
}
}
if (isNaN(data2[i][keys[j]]) == false && keys[j] != 'Total' && keys[j] != 'Pincode') {
if (S_Sum[i]) {
S_Sum[i] += data2[i][keys[j]];
} else {
S_Sum[i] = data2[i][keys[j]];
}
}
}
}
for (i = 0; i < data2.length; i++) {
let _dt = {};
for (j = 0; j < keys.length; j++) {
if (isNaN(data2[i][keys[j]]) == true || keys[j] == 'Total' || keys[j] == 'Pincode') {
_dt[keys[j]] = data2[i][keys[j]];
} else {
let _totvalue = Object.values(C_Sum).reduce((a, b) => a + b, 0);
_dt[keys[j] + " (%)"] = Math.round((data2[i][keys[j]] / _totvalue) * 100);
}
}
_dt["Total"] = S_Sum[i]
pdata.push(_dt);
}
}
initTable(pdata, true);
window.toggleLoader(false);
}, 100);
}
Please Help me get through it .
Solution
I finally got it, not through the tabulator inbuilt function, but adding extra row to the tabulator and getting the total value as a temporary solution
The code is somewhat like:
else if (type == 'columnwise') {
let data3 = window.initialTableData;
for (i = 0; i < data2.length; i++) {
for (j = 0; j < keys.length; j++) {
if (isNaN(data2[i][keys[j]]) == false && keys[j] != 'Total' && keys[j] != 'Pincode') {
if (C_Sum[keys[j]]) {
C_Sum[keys[j]] += data2[i][keys[j]];
} else {
C_Sum[keys[j]] = data2[i][keys[j]];
}
}
}
}
for (i = 0; i < (data2.length); i++) {
let _dt = {};
for (j = 0; j < keys.length; j++) {
if (isNaN(data2[i][keys[j]]) == true || keys[j] == 'Total' || keys[j] == 'Pincode') {
_dt[keys[j]] = data2[i][keys[j]];
} else {
_dt[keys[j] + " (%)"] = Math.round((data2[i][keys[j]] / C_Sum[keys[j]]) * 100);
}
}
pdata.push(_dt);
}
let isTotalColAdded = false;
let _dt = {};
for (j = 0; j < keys.length; j++) {
if (isNaN(data2[0][keys[j]]) == true || keys[j] == 'Total' || keys[j] == 'Pincode') {
_dt[keys[j]] = data2[0][keys[j]];
if (!isTotalColAdded) _dt[keys[j]] = "Total";
} else {
_dt[keys[j] + " (%)"] = C_Sum[keys[j]];
}
}
pdata.push(_dt);
}
- Converting huge JSON object to Blob by stringifying "directly into" an ArrayBuffer/Blob to avoid maximum string length error
- How to get date and time from server and use it as if it was the client's?
- Next.js not auto refreshing
- How to disable Visual Studio Code tips on hovering attributes of elements
- How to prevent tab changes in PrimeVue v3 TabView?
- Browser not refreshing image when image source URL is changed to URL of the image in the AWS S3 bucket
- How to properly generate a random password with the window.crypto property?
- Trigger Server Sent Event every 2 seconds in golang
- PrimeVue theme change
- Primevue calendar can you set the minute time every 30 minutes?
- Lodash _.hasIntersection?
- 'File name differs from already included file name only in casing' on relative path with same casing
- ReactJS How do you switch between pages in React?
- Disable other checkboxes with specific word when one checkbox with same is checked
- Detecting IME input before enter pressed in Javascript
- 2D smooth movement from scratch (javascript, pixelart)
- Reversing words in a string JS without using built in function
- Not able to get inside the for loop in React js
- Disable zoom on input focus in Android webpage
- How to count string occurrence in string?
- Javascript Loop over array of objects and get unique values
- How to compare two tsx elements in react + tsx
- how to block website from loading in iframe?
- Express gives the same response even with different input-values in MongoDB
- How do I import Bootstrap in SvelteKit, Recommended Way?
- Adding separator in list of items in reactjs
- React close modal on click outside
- How to set compilerOptions.isCustomElement for VueJS 3 in Laravel project
- How to embed a powerbi report within a flutter android application?
- Multiple arguments vs. options object