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


Forum Jump: