Adding Conditional Icons to Indicator
Download: Indicator-icons.zip
Adding Conditional Icons to Indicator allows to present the data in an easier way to comprehend.
By adding Green/ Red arrows the user can understand the situation in a blink of an eye.
The Conditional Icons JS works on V 5.7. and up.
Steps
In order to add Conditional Icons to Indicator, please follow the listed steps below:
Step 1:
Download and extract the enclosed folder.
Copy the two arrow images from the attached file into the plugins folder:
C:\Program Files\Sisense\PrismWeb\Resources\images\arrows\
If the "images” and “arrows” folders do not exist, please create them.
Step 2:
Go to the widget editor and edit the indicator widget script
Copy the script and paste in the script editor:
widget.on('ready', function(s,e){
// Define path to the icons
var goodIcon = "/resources/images/arrows/green.png";
var badIcon = "/resources/images/arrows/red.png";
// Define threshold
var threshold = 0;
// Get the indicator's value
var value = e.widget.queryResult.value.data;
// Get the indicator's number container
var container = $('.indicator-container', element);
// Business logic
var icon = '';
if (value >= threshold) {
icon = goodIcon;
} else {
icon = badIcon;
}
// Look for an existing icon
var image = $('img', container);
// Do we need to add a new HTML element?
if (image.length == 0) {
// Yes, create the new HTML for the image icon
var newImage = $('<img src="' + icon + '"></img>');
// Add the icon to the number container
container.append(newImage);
// Adjust the CSS of the span to make room for the icon
$('span', container).css('width', '75%');
} else {
// No, just change the source
image.attr('src', icon);
}
})
Press SAVE
Close the Script window
Step 3:
(Go back to the widget window)
Refresh the widget window
Press APPLY
Refresh the dashboard page - you should be able to see the indicator in the widget
Note:
Previous versions of the software (< 6.7) defined the container variable as follows:
var container = $('#number_container', element);
Code configuration:
The default treshold is 0 that means that values that are greater than 0 will receive the green arrow and values that are smaller than 0 will recieve the red arrow)
You can change the treshold value by changing the var value in the script:
//Define threshold
var threshold = 0; //(change the number 0 to the number you want
You can also Change the value affecting the arrow from the value to the secondary value (Location of the arrow stays the same)
// Get the indicator's value
var value = e.widget.queryResult.value.data; // Replace with e.widget.queryResult.secondary.data; if you want the secondary value to affect the arrow.
-
@Stefan - this should do it(you have to setup threshold in the code to match your needs + provide proper image for neutral state):
widget.on('ready', function(s,e){
// Define path to the icons
var goodIcon = "/resources/images/arrows/green.png";
var badIcon = "/resources/images/arrows/red.png";
var neutralIcon = "/resources/images/arrows/orange.png";
// Define threshold
var threshold = 0;
// Get the indicator's value
var value = e.widget.queryResult.value.data;
// Get the indicator's number container
var container = $('#number_container',element);
// Business logic
var icon = '';
if (value > threshold) {
icon = goodIcon;
} else if (value = threshold){
icon = neutralIcon;
} else{
icon = badIcon;
}
// Look for an existing icon
var image = $('img',container);
// Do we need to add a new HTML element?
if (image.length == 0) {
// Yes, create the new HTML for the image icon
var newImage = $('<img src="' + icon + '"></img>');
// Add the icon to the number container
container.append(newImage);
// Adjust the CSS of the span to make room for the icon
$('span', container).css('width','75%');
} else {
// No, just change the source
image.attr('src',icon);
}
}) -
A couple small modifications to set the icon next to the secondary value in the indicator widget, which in my case is a percent calculation of growth month over month.
widget.on('ready', function(s,e){
// Define path to the icons
var goodIcon = "/resources/images/arrows/green.png";
var badIcon = "/resources/images/arrows/red.png";// Define threshold
var threshold = 0;// Get the indicator's value
//var value = e.widget.queryResult.value.data;
var value = e.widget.queryResult.secondary.data;
// Get the indicator's number container
//var container = $('#number_container',element);
var container = $('#secondary_container',element);
// Business logic
var icon = '';
if (value >= threshold) {
icon = goodIcon;
} else {
icon = badIcon;
}// Look for an existing icon
var image = $('img',container);// Do we need to add a new HTML element?
if (image.length == 0) {
// Yes, create the new HTML for the image icon
var newImage = $('<img src="' + icon + '"></img>');// Add the icon to the number container
container.append(newImage);
// Adjust the CSS of the span to make room for the icon
$('span', container).css('width','75.5%');} else {
// No, just change the source
image.attr('src',icon);}
})
-
Hi all-
This variation done by Takashi supports rendering the values/image by dynamically adjusting the css span.
/*
Welcome to your Widget's Script.
- You can access your Widget via the 'widget' variable name.
- You can access your Widget's DOM via the 'element' variable name (undefined until DOM creation).
- You can access your Dashboard by accessing the 'dashboard' variable name.
- For a complete API reference for Widgets and Dashboards go here: https://docs.google.com/document/d/1nQBZtWAdNFAd9nBhPWGVT3qOMS4Qm0PzBZVIzz5DfE8/
*/widget.on('ready', function(s,e){
// Define path to the icons
var goodIcon = "/resources/Images/Arrows/green.png";
var badIcon = "/resources/Images/Arrows/red.png";
//var iconWidth = "18"; // width of icon in pixels// Define threshold
var threshold = 0;// Get the indicator's value
var value = e.widget.queryResult.value.data;// Get the indicator's number container
var container = $('#number_container',element);// Business logic
var icon = '';
if (value <= threshold) {
icon = goodIcon;
} else {
icon = badIcon;
}// Look for an existing icon
var image = $('img',container);// Do we need to add a new HTML element?
if (image.length == 0) {
// Yes, create the new HTML for the image icon
var newImage = $('<img src="' + icon + '"></img>');// Adjust the CSS of the span to make room for the icon
newImage.on('load',function(){
var iconWidth = $(this).width(),
iconHeight = $(this).height();
$('span', container).css('margin-left',(-1 * iconWidth) + 'px');
$(this).css('margin-top', (iconHeight * 1.5) + 'px');
})// Add the icon to the number container
container.append(newImage);
} else {// No, just change the source
image.attr('src',icon);}
})
-
Lisa, you should be able to choose different images (a red up arrow and a green down one?) and place them in the folder. You can then adjust what image to use in the script:
var goodIcon = "/resources/images/arrows/green.png";
var badIcon = "/resources/images/arrows/red.png";Change these to the names/paths of your images.
You can also switch which side of the threshold shows the goodIcon or the badIcon.
Iris
-
Hi Iris
Thanks I got this working, I also worked out how to calculate the base value on the current and previous rank.
// Get the indicator's value
var value = (e.widget.queryResult.value.data-e.widget.queryResult.secondary.data);I couldn't find an orange arrow on this post so I have created one but I cannot get the script to work for neutral icon
widget.on('ready', function(s,e){
// Define path to the icons
var goodIcon = "/resources/images/arrows/green.png";
var badIcon = "/resources/images/arrows/red.png";
var neutralIcon = "/resources/images/arrows/orange.png";// Define threshold
var threshold = 0;// Get the indicator's value
var value = (e.widget.queryResult.value.data-e.widget.queryResult.secondary.data);// Get the indicator's number container
var container = $('#number_container',element);// Business logic
var icon = '';
if (value > threshold) {
icon = goodIcon;
} else if (value = threshold){
icon = neutralIcon;
} else{
icon = badIcon;
}// Look for an existing icon
var image = $('img',container);// Do we need to add a new HTML element?
if (image.length == 0) {
// Yes, create the new HTML for the image icon
var newImage = $('<img src="' + icon + '"></img>');// Add the icon to the number container
container.append(newImage);
// Adjust the CSS of the span to make room for the icon
$('span', container).css('width','75%');} else {
// No, just change the source
image.attr('src',icon);}
})
ANY IDEAS ANYONE?
ThanksLisa
-
A simple alternative to this is to add arrows symbols directly in the text field. The color can then be easily set using native conditional formating :
widget.on('processresult', function(w, args) {
var data = args.result.value.data;
if(data > 0) {
args.result.value.text = '⬈ +' + args.result.value.text;
}
if(data < 0) {
args.result.value.text = '⬊ ' + args.result.value.text;
}
});
Thanks
Please sign in to leave a comment.
Comments
20 comments