Changing Fonts, Rows and Background Styling of Pivots
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.
- Open dashboard script editor
- paste the code below in the editor
- 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.
The result:
Looks like this Pivot is about to fight Real Madrid! :)
-
On a similar note, is there a way to change the size of the entire widget? For instance, I have built a dashboard that only contains one gauge. I'd like this gauge to be oversized and take up the entire screen. Is is possible to change the dimensions of the widget to do this? Thank you.
-
That script doesn't seem to change anything in the widget. What I want is for the widget to be perhaps 150% larger than the 'usual' size. When I expand the widget in my browser to take up the entire screen, I'd like the gauge to continue growing larger so that eventually the colored gauge takes up my entire screen.
-
Hi Mary,
Im not sure what are you trying to achieve, what do you mean 'entire screen'?
What about the panels (filters and dashboards) on the sides, do you want to keep them?
you can set - var height = '1000px'; instead of 646px - and it will set the height of the widget.
Can you please elaborate what are you trying to achieve?
Thanks.
-
After creating my gauge, I expanded the size of my widget by dragging the bottom edge downwards, all the way to the bottom of the dashboard. This caused the gauge to grow in size. Now the gauge is larger, but there is still a lot of white space around the gauge, but within the widget. What I desire is to have the gauge grow in size to fill up much of the white space on left, right, top, bottom still within the widget. Not covering the menu on the right or filters on the left.
The code you sent did not make any visible changes to my widget when pasted into the script of the widget. I tried larger numbers in the script you sent and didn't see a change on my dashboard.
-
Hi Andrea,
A full list of color values are listed here: http://www.w3schools.com/cssref/css_colornames.asp
Additionally, you can specify the hexidecimal color value, if you'd like to use your own custom colors. This page can help you determine the hexidecimal value for a color: http://www.w3schools.com/tags/ref_colorpicker.asp
-
@Alvaro, I found that you can change the format of almost anything if you find the label for that item. You can do this in Chrome by opening the Chrome Console (F12), right clicking the element and choosing 'Inspect'. If you hover your mouse over a line of the code the corresponding element will highlight. All values which affect that element will appear in the highlight. Attached is a screenshot of an example which shows a pivot column header. That specific column header is 'pivot_C1'.
Pivot element screenshot.png -
Hi Alvaro,
To change a single header's style use the following script:
widget.on('ready', function(se, ev){
var columnIndex = 0; //The index of the column to change (starting with 0 for the first column)
$('thead .p-dim-head[fidx='+columnIndex+'] .wrapper',element)
.css({
'color': 'red', // change font color
'font-family': 'Serif', // change font family
'background-color': '#FFB6C1'
})
});David
-
Hi,
Is there a way to change the background color for only certain cells or a range of cells in the body of the pivot table? (not the row or column headers). I got to change the background color of the entire body, but cannot seem to figure out how to specify only a subset of the body. Thank you in advance!
-
Hi Jangwon,
Please try the following:
widget.on('ready', function(se, ev){var rowIndex = 0; //The index of the row to change (starting with 0)
var columnIndex = 0; //The index of the column to change (starting with 0)
$($('tbody')[0].rows[rowIndex].cells[columnIndex]).css({
'color': 'red', // change font color
'font-family': 'Serif', // change font family
'background-color': '#FFB6C1'//change background color
})});
-
I'm running into an error with the dashboard version of the script:
dashboard.on('refreshend', function(sender, ev){
$('.p-head-content, .p-value', 'widget[type=pivot]')
.css('font-size','10px') // change font size
})When I manipulate the dashboard (such as opening or closing the dashboard pane), the font of the pivot table refreshes to normal size.
------EDIT
FYI, Changing event from 'refreshend' to 'widgetready' fixed it.
-
Hi there,
Is there anyway to format the subtotal and Grand Total rows differently? I've tried using the table row labels in the script but there doesn't seem to be a way to distinguish between these two types of row. This would be useful because the last subtotal row and the grand total row are directly adjacent, and different formatting would just make things easier to read.
Thanks!
-
Hi Indy,
Using the below script you can modify the grand total and sub total:
dashboard.on('widgetready', 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'})// change the Grand total classes (dimensions and measures)
$('tr:has( td.p-grand-total-row-head)', 'widget[type=pivot]').find("td")
.css({'background-color':'white', 'font-family':'Times New Roman,Georgia,Serif', 'font-size':'15px','font-style':'italic'})// change the Sub total classes (dimensions and measures)
$('tr:has(td.p-total-row-val)', 'widget[type=pivot]').find("td")
.css({'background-color':'white', 'font-family':'Times New Roman,Georgia,Serif', 'font-size':'15px','font-style':'italic'})},250)
})
-
Hi Shani,
Thanks for your response. The provided script initially did not format the grand total row as required, however this was due to a small error.
Reproducing the relevant part of the script here,
// change the Grand total classes (dimensions and measures)
$('tr:has( td.p-grand-total-row-head)', 'widget[type=pivot]').find("td") <--- error here
.css({'color':'white', 'font-family':'Times New Roman,Georgia,Serif', 'font-size':'15px','font-style':'italic'})The line for the grand total must say .find("td"), NOT .find("tr")
Thank you for your help
Indy
Please sign in to leave a comment.
Comments
54 comments