Conditional Formatting of Grand Totals
I would like to conditionally format specific columns in the grand total. I would like the grand total cell to be coloured green if the value is greater than zero and red if the value is less than zero. Any help would be appreciated.
-
Official comment
Folks, sorry for the delay, here is the script and the explanation.
Please put this code into the widget script of the pivot:
widget.on("domready", function(w, args) {
// column 2 formatting, using the underlying value of a <td>, instead of the surface text of the <div>
// <td> has the value attribute with a full numeric, unformatted value of the number, i.e. 2823.05091742397
// here, I take that value, then set the formatting of the <td> based on whether the value is greater or less that zero
$('td.p-total-row-val[fidx=1]',element)
.each((index, item) => { // loop. For each of these <td> cells
var myItemNum = parseFloat($(item).attr("val")); // grab the "val" attribute of the cell, convert to number
if (myItemNum > 0) {
$(item).css({
"backgroundColor": "green",
"color": "#fff5f5",
'font-weight': 'bold'
});
}
else if (myItemNum < 0) {
$(item).css({
"backgroundColor": "red",
"color": "#fff5f5",
'font-weight': 'bold'
});
}
else {
$(item).parent().css("backgroundColor", "")
}
});
});
EXPLANATION:
$('td.p-total-row-val[fidx=1]',element)This is a jQuery, that returns all <td> elements (i.e. table cells) with the class name p-total-row-val (grand totals), in the 2nd column of the pivot (attribute fidx = 1).
, element - only look into the current widget (without it, this script would apply to all pivots in the dashboard).
.each((index, item) => { }That is a loop. It iterates through each of the grand totals (there really should only be one).
var myItemNum = parseFloat($(item).attr("val")); // grab the "val" attribute of the cell, convert to number
Take the <td> cell of the grand total, extract its val attribute (which contains the cell's underlying number, in a string format). Convert it to a number using parseFloat and assign it to var myItemNum.
Now, look at myItemNum, and, based on whether or not it is above or below zero, apply one or another css.
Hope this helps!
Comment actions
Please sign in to leave a comment.
Comments
5 comments