This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

BAR CHANGE SIZE 0 to 100%
#1
How could you have in a visualization a bar that goes up and down in function of a variable from 0 to 100%
Reply
#2
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.
Reply
#3
thanks, but i need change in the order side, ..from bottom to top . Now i can do it but down to up.
Reply
#4
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);
  });
});
Reply
#5
Do I need to create a new class (css custom) "bar"?
What icon for css is needed? Is anyone worth it?
Reply
#6
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(' + object.value + '% 0 0 0)')
    }, true);
  });
});
Reply
#7
When putting bar class and the java custom script indicated (both) gives me error.. Cannot reach 'split'
Reply
#8
If I put read only does nothing the css or java script
Reply


Forum Jump: