Adding Conditional Icons to Indicator

Comments

18 comments

  • Avatar
    Stefan

    Hi Inbal, 

    I want to add these arrows to a widget, however the arrows don't show up while I followed your steps. Do you have any idea how that is possible?

    Hope to hear from you. 

    Greetings

     

    0
    Comment actions Permalink
  • Avatar
    Simon Burt

    Can you give any pointers on how I could combine this with an actual data value, for example this year revenue compared to last years?

    0
    Comment actions Permalink
  • Avatar
    Stefan

    Hi,I would like to have a third option. Namely when my value is equal to my target I want to have a orange/yellow (traffic light). How can I add this?

    Kr,

    Stefan

    0
    Comment actions Permalink
  • Avatar
    Michael Becker

    @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);

             }

         })

    0
    Comment actions Permalink
  • Avatar
    Jordan

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

    }

    })

    0
    Comment actions Permalink
  • Avatar
    Iris Maessen

    Would it be possible to define a threshold based on a calculated value (i.e dynamic) rather than a constant? Or maybe base which arrow is displayed on already applied conditional formatting?

    0
    Comment actions Permalink
  • Avatar
    Ramon Lopez

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

    }

    })

     

     

    0
    Comment actions Permalink
  • Avatar
    Tomer Ravid

    The code has stopped working in version 6.7. 

     

    Any idea how to fix it?

    0
    Comment actions Permalink
  • Avatar
    Tomer Ravid

    ?

    0
    Comment actions Permalink
  • Avatar
    Sanjoy Ghosh

    Is there any way to make this work in version 6.7 ?

    0
    Comment actions Permalink
  • Avatar
    Oxana Noa Umansky

    Hi Sanjoy and Tomer,

    Apologies for the delay. I'm sorry you are experiencing issues with this script on version 6.7 .I'll bring it up with the team and we'll get back to you with more information. 

    0
    Comment actions Permalink
  • Avatar
    Jason Sears (Edited )

    Hello everyone,

    The markup changed slightly and affected the container variable, which should now be the following: 

    var container = $('.indicator-container', element);

    I've changed the original script at the top of the article to reflect this change as well.

    2
    Comment actions Permalink
  • Avatar
    OJ Chakrabarti

    Hi

    This is great but how do you do the reverse?

    I have a ranking where 1 is highest and 153 is lowest.  If I have rankings goes from 80 to 86 this is bad but it is showing a green arrow.

     

    Thanks

    Lisa

    0
    Comment actions Permalink
  • Avatar
    Iris Maessen

    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

    0
    Comment actions Permalink
  • Avatar
    OJ Chakrabarti

    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?
    Thanks

    Lisa

     

     

     

    0
    Comment actions Permalink
  • Avatar
    Delsaran Bigglesworth

    This there a way to make this work for a scatter plot chart? I can't find the name of the container that the data values are in. 

    0
    Comment actions Permalink
  • Avatar
    Andrew Goss

    In order for this to work with a newer version of Sisense (7.2+), you'll want to copy the arrow images into the following plugins folder instead of the one mentioned in the original post:

    C:\Program Files\Sisense\app\resources\images\arrows\

    0
    Comment actions Permalink
  • Avatar
    Sameera Venigandla

    Hi Inbal,

     

    How did you display the color of values in red and green on basis of positive and negative values ?

     

    Regards

    Sameera

    0
    Comment actions Permalink

Please sign in to leave a comment.