Changing Fonts, Rows And Background Styling Of Pivots

[intapiuser]

Changing the style properties of a pivot can be done via the dashboard script.

It is also possible to change the properties of the values only if needed.

1. Open dashboard script editor
2. paste the code below in the editor
3. All the pivots will be affected by these changes.

As we can see, we apply the changes on the headers and on the values, in order to apply only on the values we can remove '.p-head-content' and the changes will be applied only on the value columns

Code:

dashboard.on('refreshend', function(sender, ev){
    $('.p-head-content, .p-value', 'widget[type=pivot]')
    .css('color','red') // change font color
    .css('font-family','Times New Roman,Georgia,Serif')    // change font family
    .css('font-size','15px')        // change font size
    .css('font-style','italic');    // change font style
})

Before:

After:

 To edit an individual pivot, edit the Widget's script and use this similar code instead:

widget.on('ready', function(sender, ev){

 $('.p-head-content, .p-value',element)
 .css('color','red') // change font color
 .css('font-family','Times New Roman,Georgia,Serif') // change font family
 .css('font-size','15px') // change font size
 .css('font-style','italic') // change font style
 //.css('background-color', '#E7B5E7'); // background color of all the rows
});

To Change The Backgrounds Of The The Pivot:

dashboard.on('refreshend', function(sender, ev){

setTimeout(function(){


$('td.p-alternate', 'widget[type=pivot]') //change the color of the alternating gray rows
.css({'background-color':'red', 'font-family':'Times New Roman,Georgia,Serif', 'font-size':'15px','font-style':'italic'})  

// change the rest of the pivot, but excludes the alternating rows and background classes
$('td:not(.p-alternate, .phantom )', 'widget[type=pivot]')
.css({'background-color':'yellow', 'font-family':'Times New Roman,Georgia,Serif', 'font-size':'15px','font-style':'italic'}) 

// change the header classes (dimensions and measures)
$('td.p-dim-head, td.p-grand-total-head', 'widget[type=pivot]')
.css({'background-color':'#528AEE', 'font-family':'Times New Roman,Georgia,Serif', 'font-size':'15px','font-style':'italic'})

},250)   
 
})

The 250ms timer delays this script, so it will run after other JS code has finished loading, to avoid race conditions, try and change it to the minimum.