Changing Indicator color and style (for versions before 6.6.1)

Comments

19 comments

  • Avatar
    Paul

    Arik, thanks his is great. I was able to just copy/paste our code and change colours/sized without even going into he Chrome developer mode.

    0
    Comment actions Permalink
  • Avatar
    Hila Kantor

    The following code enables to modify the widget's border: 

    widget.on('ready', function(se,ev){
    $('#prism-mainview').css('background-color','white');
    })
    0
    Comment actions Permalink
  • Avatar
    bob falcone

    I able to copied and paste your code and apply it to the widget level but whenever I apply a filter by clicking the pie chart the setting are getting applied to both indictors. Is there a way to only have the setting change for one indictor

    0
    Comment actions Permalink
  • Avatar
    Ido Darnell

    Hi Bob,

    Did you address the specific widget's div ID or a classes' ID, please note:

    ID is referred by  <div id=”some_id_name”...> while classes are referred as ...class=”some_class” “another_class” “and_another_class”...

    • There can be number of classes associated with each object, all separated by spaces, but an ID is unique for all the HTML document.
      Therefore, one (or more) class(es) can be used to apply styling to several objects while an ID will be used to refer (or overwrite) a single one.

    0
    Comment actions Permalink
  • Avatar
    bob falcone

    I guess I am not understanding the div ID or classes ID because they both look the same to me. I attached a file that contains the information from one of my indicators. If you can highlight what I should be changing that would help.




    DOCTYPE html.docx
    0
    Comment actions Permalink
  • Avatar
    Robert

    I used the code provided above to modify the widgets border, and it shows those changes in the edit mode for widget.  But when saved back to dashboard the border is not visible.

    1
    Comment actions Permalink
  • Avatar
    Jim Thomas

    Arik,

    We are modifying the indicator font sizes and colors (labels and values)  based on your sample.  It works, but occasionally the secondary value size doesn't scale like it should. It will be OK and then you return to the same dashboard and it is too small.  We don't really understand why.  See attached screen shots. Any ideas on how to fix?   Script we are using is below:

    -----------------------------------------------------------------------------------------------------------------------

    // THIS SCRIPT CONTROLS THE INDICATOR WIDGET FORMATTING
    widget.on('ready', function(sender, ev){

     $('.indicator_section span',element) // General Class for all the parts of the Indicator

     //.css('font-family','Times New Roman,Georgia,Serif') // change font family

     //.css('font-size','50px') // change font size

     .css('font-style','Bold') // change font style

     .css('white-space','normal'); // Wrap Text

     /*$('#title_span','widget[type=indicator]') // primary title (id)

     .css('color','blue')

     .css('font-style','Bold'); // change font style*/

     $('#secondary_title_span',element) //secondary title (id)

     .css('font-size','16px') // change font size

     .css('color','#663399') // Peer Group Purple

     .css('font-style','Bold'); // change font style

     /*$('.number_span,.secondary_span','widget[type=indicator]') //catches both of the 'number' classes (primary+secondary)

     .css('color','red')*/

     $('#secondary_title_span','widget[type=indicator]') //id of the secondary title

     .css('color','#663399')

     $('#secondary_span','widget[type=indicator]') //ID of the secondary number - overrides the .secondary_span css class

     .css('color','#663399') //a kind of purple

     .css('font-size','28px') // change font size

    })

     




    Sisense-Indicator- Secondary Value too small.png
    Sisense-Indicator- Secondary Value OK.png
    0
    Comment actions Permalink
  • Avatar
    Rob MacBride

    If the indicator is a Gauge, does any know the class or id for changing the *secondary* color in the gauge graphic itself?  You can change the primary gauge color in the UI, but it automatically picks a lighter version of that color to fill in the rest of the semi-circle.  I'd like to be able to make the primary color green (via UI or script) and then make the remaining area red (via script), not the default lighter green.

    Also, it would be nice to be able to independently change colored bar under the gauge itself, if anyone know that class.

     

    0
    Comment actions Permalink
  • Avatar
    Paul Richardson

    Hi all.

     

    What is the Sisense font? We've installed the 'Filter' widget (which is not what we thought it would provide!), but the font is completely different to the default Sisense font.

     

    Paul R :)

    0
    Comment actions Permalink
  • Avatar
    Lee Hermon

    Hello Paul,

    Depending on the element, some of the fonts that are used are abelregular, abel, PT Sans Narrow

    Cheers

    0
    Comment actions Permalink
  • Avatar
    Paul Richardson

    Thanks Lee.

     

    It's good to know for future plug-ins that do not default to the usual Sisense fonts.

     

    Paul R

     

    0
    Comment actions Permalink
  • Avatar
    Sam Ovenshine (Edited )

    Starting with 6.6.1, indicator scripts described here are no longer valid. In 6.7.1 and above, you can use the new methods described here to edit an indicator widget's styling properties (sample script included):

    https://developer.sisense.com/display/API2/JavaScript+API+Reference#JavaScriptAPIReference-IndicatorObjectindicator

    0
    Comment actions Permalink
  • Avatar
    Evan York

    Hi Sam, that link that you shared appears to require modifications to the widget script, which is very tedious with many indicator widgets in a given dashboard.  I'm not super savvy with the Javascript API - is there any way to adapt the example to work as a dashboard script instead, in order to function in a similar way to this thread's dashboard script?

    0
    Comment actions Permalink
  • Avatar
    Avi Tavdi

    Hi Evan,

    We are working on a plugin example that uses the indicator API, hopefully will have something next week, we'll keep you updated.

    1
    Comment actions Permalink
  • Avatar
    Jason Sears

    Hi Evan,

    Here is a link to what we have so far:

    indicatorStyler.zip

    This plugin, which will be completed in the near future, currently allows you to apply universal indicator styles with the improved JavaScript API. It should make styling dashboards full of indicator widgets much easier.

     

    0
    Comment actions Permalink
  • Avatar
    Oxana Noa Umansky

    Thanks for sharing Jason!

    0
    Comment actions Permalink
  • Avatar
    Evan York

    Thanks Jason!

    0
    Comment actions Permalink
  • Avatar
    Evan York

    Hi Jason, I've noticed that the ticker form of the numeric simple indicator does not seem to take the general formatting specified in the generalOptions section of the config.js file.  You can see that my font reverts to system font when reducing the height to format as ticker:

    Do you see the same behavior?  Any evolution of this plug-in since January? Thx!

    0
    Comment actions Permalink
  • Avatar
    JJ Chritton

    An upvote here for some added functionality: text alignment! In many instances, I'd love to be able to align indicators to the left or right based on where they are sitting within the page.

    0
    Comment actions Permalink

Please sign in to leave a comment.