Why does my progress bar display a floating point value?

Question

'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

score 1 · Accepted Answer · edited May 23 '17 at 11:48

1

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.

edited May 23 '17 at 11:48

Community

1
1

answered Aug 23 '11 at 11:58

Tegra Detra

24,551
17
53
78

should have mentioned that I already tried that. It doesn't make any difference. I updated the code. – codecowboy Aug 23 '11 at 14:29
I've made another update. I can now see where the floating point numbers are coming from but am not sure how to change them. My completed count variable does not change so I'm not sure what you mean by completedCount = round(newValue) – codecowboy Aug 23 '11 at 15:31
Sorry I can not be more helpful. I read through the source of it and am not really sure what your problem is =/ So I am afraid I just may confuse you more. – Tegra Detra Aug 23 '11 at 16:45
As long as you keep the ratio even it will stay an INT http://jsfiddle.net/bQhCX/ – Tegra Detra Aug 23 '11 at 18:07

score 0 · Answer 2 · answered Aug 25 '11 at 16:09

I went with this in the end (editing the progressbar js file - yuck):

self.label.html(self._getFormatString(
            o.labelFormatString, Math.round(percent), Math.round(curValue)));

I also logged a bug with the wijmo developers.

Another option without editing the source is :

(function(){
// Store a reference to the original html method.
var originalHtmlMethod = jQuery.fn.html;

// Define overriding method
jQuery.fn.html = function(){

// Execute our override - rounding the value
// being passed to jQuery's html() function
// only when the progressbar label is being
// updated
if ($(this).hasClass('ui-progressbar-label')) {
arguments[0] = Math.round(arguments[0]);
}

// Execute the original jquery method for all other html() calls on the     page
originalHtmlMethod.apply( this, arguments );
}
})();

Why does my progress bar display a floating point value?

2 Answers2