pivotUI js I am having issue with pivotUI js (chart creation JS).
i want to calculate duration field's total value as hours:min format. but pivotUI js default functions are not helpful for my requirements.
i want to create custom function for calculate that duration to hours and minutes format.
any suggestions ?
my code is like below.
var renderers = $.extend($.pivotUtilities.renderers, $.pivotUtilities.export_renderers, $.pivotUtilities.gchart_renderers, $.pivotUtilities.derivers);
var tpl = $.pivotUtilities.aggregatorTemplates;
$("#output").pivotUI(data.data, {
renderers: renderers,
rows: ["fieldOne", "fieldTwo", "fieldThree", "Duration"],
cols: [],
//hiddenAttributes: ["Total"],
aggregators: {
"Total Time": function () {
return tpl.sum()(["Duration"]);
}
},
aggregatorName: "Total Time"
});
after debugging at very deep level, finally i got solution by adding custom function for calculating duration on pivot.js file.
step 1: firstly define your custom variables on js, like wise other variables used in pivot.js (hourMinuteFormat,hourMinuteInt are custom variables). eg:
var PivotData, addSeparators, aggregatorTemplates, aggregators, dayNamesEn, derivers, getSort, locales, mthNamesEn, naturalSort, numberFormat, pivotTableRenderer, renderers, sortAs, usFmt, usFmtInt, usFmtPct, zeroPad, hourMinuteFormat, hourMinuteInt;
Step 2: create function which get duration and calculate total hours and total mins by logic as below.
hourMinuteFormat = function (opts) {
var defaults;
defaults = {
separator: ":"
};
opts = $.extend({}, defaults, opts);
return function (x) {
var totalh = Math.floor(x / 60);
if (totalh < 10)
{
totalh = "0" + totalh;
}
var totalm = x % 60;
if (totalm < 10)
{
totalm = "0" + totalm;
}
var result = totalh + opts.separator + totalm;
return result;
};
};
hourMinuteInt = hourMinuteFormat();
Step 3: After that need to create one more function which accept duration as "hh:mm" format and do further process to split it using ":" and store on different variables like hours,minutes.
HoursMinutes: function (formatter) {
if (formatter == null) {
formatter = hourMinuteInt;
}
return function (arg) {
var attr;
attr = arg[0];
return function (data, rowKey, colKey) {
return {
sum: 0,
push: function (record) {
if (record[attr]) {
var minute = parseInt((record[attr]).split(':')[1]);
var hour = parseInt((record[attr]).split(':')[0]) * 60;
return this.sum += minute + hour;
}
},
value: function () {
return this.sum;
},
format: formatter,
numInputs: attr != null ? 0 : 1
};
};
};
},
Step 4: find $.pivotUtilities
array where other default functions are defined there define your custom function Like below:
$.pivotUtilities = {
aggregatorTemplates: aggregatorTemplates,
aggregators: aggregators,
renderers: renderers,
derivers: derivers,
locales: locales,
naturalSort: naturalSort,
numberFormat: numberFormat,
sortAs: sortAs,
PivotData: PivotData,
hourMinuteFormat: hourMinuteFormat //custom function
};
Step 5: after that in your file where you want to calculate duration, you need to use function named HoursMinutes() as below.
var renderers = $.extend($.pivotUtilities.renderers, $.pivotUtilities.export_renderers, $.pivotUtilities.gchart_renderers, $.pivotUtilities.derivers);
var tpl = $.pivotUtilities.aggregatorTemplates;
$("#output").pivotUI(data.data, {
renderers: renderers,
rows: ["fieldOne", "fieldTwo", "fieldThree", "Duration"],
cols: [],
aggregators: {
"Total Time": function () {
return tpl.HoursMinutes()(["Duration"]);
}
},
aggregatorName: "Total Time"
});
i hope its understandable, if any one having query, then can ask me.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.