Home/ Questions/Q 6375843
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T01:40:04+00:00

‘value’ in this example is 5, ‘maxValue’ is 39. The value displayed on the

  • 0

‘value’ in this example is 5, ‘maxValue’ is 39. The value displayed on the progress bar (a wijmo progressbar) is 5.07. {0} should tell the progressbar to show a progress value rather than a percentage. If I change the value to 8, maintaining the max value as 39, the value displayed becomes 8.19. I’m a bit confused as to why I am seeing floating point numbers and not integers. I can’t see anything in the progressbar code which would display anything other than self.value() which logs to the console as an integer. So what might be causing this behaviour?

$("#proBarAdherence").wijprogressbar({

  value: Gymloop.completedCount,
  animationOptions: {
    duration: 1000
  },

  maxValue: Gymloop.targetSessions,
  indicatorImage: '/images/progbar_red.png',
  labelAlign: 'running',
  labelFormatString: '{0} sessions completed',
  beforeProgressChanging: function(e,data) {
    console.log('beforeprogresschanging',data);
  },
  progressChanging: function (e,data) {
    console.log('progresschanging',data);

  },
  progressChanged : function (e,data) {
    console.log('progresschanged',data);
  }
});

beforeprogresschanging Object { oldValue="5", newValue=5}
progresschanging Object { oldValue="5", newValue=0}
progresschanging Object { oldValue="0", newValue=1.17}
progresschanging Object { oldValue="1.17", newValue=1.56}
progresschanging Object { oldValue="1.56", newValue=1.95}
progresschanging Object { oldValue="1.95", newValue=2.34}
progresschanging Object { oldValue="2.34", newValue=2.73}
progresschanging Object { oldValue="2.73", newValue=3.12}
progresschanging Object { oldValue="3.12", newValue=3.51}
progresschanging Object { oldValue="3.51", newValue=3.9}
progresschanging Object { oldValue="3.9", newValue=4.29}
progresschanging Object { oldValue="4.29", newValue=4.68}
progresschanging Object { oldValue="4.68", newValue=5.07}
progresschanged Object { oldValue="5", newValue=5}

Update

I can see the value’s during the progressChanging event but am not sure how to make the label display 5 instead of 5.07 once the the animation is complete? There is a live example here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to round if you want to display integers JavaScript uses floats for everything.
    How do I convert a float number to a whole number in JavaScript?

    — Response to the update —
    I am not particularly familiar with that exact progress bar but they are all similar.
    Whats happening is you are calling round once when the variable is initialized and not when the variable is updated.

    There is an event associated with the loading bar being updated that is where you want to round the completed Count before it is passed to the progress bar.

    I am not sure if I am doing a good job explaining whats happening
    value = Math.round(myobj.completedCount), —update event–> completedCount = newValue
    —update event—> completedCount = newValue
    what you need to do is catch that update event and round the variable there.
    —update event–> completedCount = round(newValue)

    —— TRY THIS——-
    The trouble line is this
    percent = (value - self.min) / (self.max - self.min) * 100;
    replace line 328 from the source code of the wijmo bar with
    percent = Math.round((value - self.min) / (self.max - self.min)) * 100;
    and it should act the way you want it to.

    • 0