Conditional Formatting Of Grand Totals
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:
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).
That is a loop. It iterates through each of the grand totals (there really should only be one).
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.
0 comments
