BAR CHANGE SIZE 0 to 100%

[Acla]

How could you have in a visualization a bar that goes up and down in function of a variable from 0 to 100%

[admin]

See this thread for a similar example: https://forum.logicmachine.net/showthread.php?tid=3075
For horizontal mode you need to change the height property to width in both CSS and Custom JS.

[Acla]

thanks, but i need change in the order side, ..from bottom to top . Now i can do it but down to up.

[admin]

Set additional class is bar. This single example will work on multiple elements with the same class.

Code:

$(function(){
  if (typeof grp == 'undefined') {
    return;
  }
  
  $('.bar').each(function(index, wrapel) {
    var wrap = $(wrapel);
    var addr = wrap.data('object');
    var el = wrap.find('.icon');
    var height = el.height();
    var init = true;

    grp.listen(addr, function(object) {
      var value = Math.round(object.value * height / 100);
      el.css('overflow', 'hidden')
        .css('height', value)
        .css('margin-top', height - value);

      if (init) {
        init = false;
        setTimeout(function() {
          el.css('transition', 'height 1s linear, margin-top 1s linear');
        }, 10);
      }
    }, true);
  });
});

[Acla]

Do I need to create a new class (css custom) "bar"?
What icon for css is needed? Is anyone worth it?

[admin]

No Custom CSS is needed, just add Custom JavaScript and set Additional classes property to bar for all required visualization elements. Objects must have 1-byte scale (0..100%) data type to work properly.

Another option is to use clip-path property so icon is clipped from the top instead of from the bottom as in the previous example. Make sure that only one script is used at a time.

Code:

$(function(){
  if (typeof grp == 'undefined') {
    return;
  }
  
  $('.bar').each(function(_, wrapel) {
    var wrap = $(wrapel);
    var addr = wrap.data('object');
    var el = wrap.find('.icon').css('transition', 'clip-path 1s linear');

    grp.listen(addr, function(object) {
      el.css('clip-path', 'inset(' + (100 - object.value) + '% 0 0 0)')
    }, true);
  });
});

[Acla]

When putting bar class and the java custom script indicated (both) gives me error.. Cannot reach 'split'

[Acla]

If I put read only does nothing the css or java script

[admin]

Read only does not affect this. Do you have anything else in Custom JavaScript? It's possible that an error there prevents the script from working. Can you provide a backup if it still does not work for you?

[Acla]

When putting bar class and
the java custom script indicated (both) gives me error.. Cannot reach 'split'

[admin]

Please upload backup from your device to https://wetransfer.com/ and send a link via a private message here.