Changing Indicator color and style (for versions before 6.6.1)
In this guide we will explain how to change the Indicator style (font, size, color and other attributes of your choice)
Note: this post does not apply to versions 6.6.1 and above
Lets take this indicator for example:
IDs and CSS Classes:
The objects are referenced in the css by the div container’s IDs and Classes. Right click any part of the indicator and click “inspect element” (Google chrome) to see in the development console the exact part you want to modify:
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.
In the JQuery code, you refer to IDs by ‘#’ and to classes by ‘.’
To change ALL the indicators of your dashboard, go to the dashboard’s menu and choose edit script:
Paste the following example code (and follow the comments for each part)
Each $(JQuery) finds the ID or classes from all the indicators and changes their .css attributes, each one of those also returns the same object and allows you to chain the next css in line:
dashboard.on('refreshend', function(sender, ev){
$('.indicator_section span','widget[type=indicator]') // 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','italic') // 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','widget[type=indicator]') //secondary title (id)
.css('font-size','25px') // change font size
.css('color','green')
.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','Black')
$('#secondary_span','widget[type=indicator]') //ID of the secondary number - overrides the .secondary_span css class
.css('color','#9E08C3') //a kind of purple
})
the result:
Feel free to inspect the different elements and style what you need
If you want to edit a specific indicator - edit the widget’s script and replace the code with
widget.on('ready', function(se, ev){
$(element).css('background-color','#004d4d'); //changes the widget's background
$('widget-header' ,element.parent()).css('background-color','#004d4d'); //changes the widget's title background
$('#title_span,widget[type=indicator]',element) // primary title (id)
.css('color','white')
.css('font-style','Bold'); // change font style
$('#secondary_title_span,widget[type=indicator]',element) //secondary title (id)
.css('color','white')
.css('font-style','Bold'); // change font style
$('.secondary_span,widget[type=indicator]',element) //catches both of the 'number' classes (primary+secondary)
.css('color','white');
})-
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.
-
-
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 -
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 -
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.
-
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):
-
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?
-
Hi Evan,
Here is a link to what we have so far:
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.
-
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!
Please sign in to leave a comment.
Comments
19 comments