Changing Fonts, Rows and Background Styling of Pivots

Comments

51 comments

  • Avatar
    Monica

    Is there a way to also change the font size on widgets other than a pivot? I want to change the size of the value labels on a bar graph. Thanks!

    0
    Comment actions Permalink
  • Avatar
    Mary

    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.

    0
    Comment actions Permalink
  • Avatar
    Eli

    Hi Mary,

    If you refer to widget's height, it can be change, just apply the following code in the widget script:

    widget.on('initialized', function(se, ev){
    var height = '646px';
    d.layout.columns[0].cells[0].subcells[0].elements[0].height =height ;
    })

    0
    Comment actions Permalink
  • Avatar
    Mary

    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.

     

    0
    Comment actions Permalink
  • Avatar
    Eli

    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.

    0
    Comment actions Permalink
  • Avatar
    Mary

    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. 

    0
    Comment actions Permalink
  • Avatar
    Simon

    Is there a way to use custom fonts in SiSense that aren't in the usual set included in a browser?

     

    0
    Comment actions Permalink
  • Avatar
    Andrea

    Is there a list of font colors available? I have been able to get basics (red, green, blue, etc..) to work, but would love to have access to a list of possibilities.

    0
    Comment actions Permalink
  • Avatar
    Tommy

    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

    0
    Comment actions Permalink
  • Avatar
    Andrea

    That's exactly what I was looking for, thanks. 

    ~Andrea

    0
    Comment actions Permalink
  • Avatar
    Cassandra

    Is there a way to edit the borders of a pivot table?

    0
    Comment actions Permalink
  • Avatar
    Alvaro Alonso

    Is it possible to style particular column's header and not the complete pivot header?

    0
    Comment actions Permalink
  • Avatar
    Joseph Peters

    Is there a way to format just the subtotal and grand total rows?

    1
    Comment actions Permalink
  • Avatar
    Joseph Peters

    I found how to format the subtotal rows if anyone is interested:

    $('td.p-total-row-head, td.p-total-row-val, td.p-grand-total-row-head', 'widget[type=pivot]')
    .css({'background-color':'lightblue','font-weight':'bold'})

    1
    Comment actions Permalink
  • Avatar
    Joseph Peters

    @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
    0
    Comment actions Permalink
  • Avatar
    David Hogeg

    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 

    0
    Comment actions Permalink
  • Avatar
    Alvaro Alonso

    Thank you David, Joseph

    0
    Comment actions Permalink
  • Avatar
    Andrew Block

    Thanks David and Joseph this works great!

    0
    Comment actions Permalink
  • Avatar
    Jangwon Park

    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!

    0
    Comment actions Permalink
  • Avatar
    Lee Hermon

    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
    })

    });

    1
    Comment actions Permalink
  • Avatar
    John Wright

    Is there a way to "auto size" the columns after a font change?

    0
    Comment actions Permalink
  • Avatar
    Yoni Lerner

    Hi John,

    Because this is a modification to our product, the auto size doesn't take into account the font change.

    You are able to do so, by modifying the script and adding a part that will auto size the layout and columns 

    0
    Comment actions Permalink
  • Avatar
    Brian Wilson (Edited )

    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.

    0
    Comment actions Permalink
  • Avatar
    Indy Leclercq

    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!

    0
    Comment actions Permalink
  • Avatar
    shani adani (Edited )

    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)

    })

    1
    Comment actions Permalink
  • Avatar
    Indy Leclercq (Edited )

    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

    0
    Comment actions Permalink
  • Avatar
    shani adani

    Indy, thanks for the correction, you are definitely right - I updated my comment with your fix 

    0
    Comment actions Permalink
  • Avatar
    Hemanth Kumar

    Is there a way to change the order of pivot table columns either manually or using JS?

    1
    Comment actions Permalink
  • Avatar
    Chris Bridges

    I agree with Hemanth. It would be great to be able to change the order of pivot table columns.

    0
    Comment actions Permalink
  • Avatar
    Jessica Orlando

    Is there a way to change the look of the lines in a pivot table? We have a customer who would like to make some of the lines bold, ideally between specific columns.

    1
    Comment actions Permalink

Please sign in to leave a comment.