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:

123456789101112131415161718192021222324252627

$(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:

123456789101112131415

$(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.