Symbol gradient

[tomnord]

Hi, I want to show colorshift with gradient from GA(0-100%) in visu. As an example, i want a rectangle to go from white to green depending on the input from GA. 
I guess I need custom CSS and Javascript? But I have never used this before.

[admin]

Set element's Additional classes to colorize and display mode to either Icon or Icon and value.

Add to Custom CSS to hide the icon image.

Code:

.colorize .icon img {
  visibility: hidden;
}

Add to Custom JavaScript:

Code:

$(function(){
  $('.colorize').each(function(_, el) {
    var $el = $(el), addr = $el.data('object'), icon = $el.find('.icon');
    
    grp.listen(addr, function(obj) {
      var val = obj.value || 0;
      val = Math.round(2.55 * (100 - val));
      icon.css('background-color', 'rgb(' + val + ', 255, ' + val + ')');
    });
  });
});

[tomnord]

Set element's Additional classes to colorize and display mode to either Icon or Icon and value.

Add to Custom CSS to hide the icon image.

Code:

.colorize .icon img {
  visibility: hidden;
}

Add to Custom JavaScript:

Code:

$(function(){
  $('.colorize').each(function(_, el) {
    var $el = $(el), addr = $el.data('object'), icon = $el.find('.icon');
   
    grp.listen(addr, function(obj) {
      var val = obj.value || 0;
      val = Math.round(2.55 * (100 - val));
      icon.css('background-color', 'rgb(' + val + ', 255, ' + val + ')');
    });
  });
});

Hov do I make the square that will show the gradient?

[admin]

Create an object in the visualization. Set main object to the address that will be used to change the color (do not use status object). Use any icon, it will be hidden in the viewer.