Conditional Formatting Of Grand Totals

[intapiuser]

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.