1

I want to use odometer to show numbers in my html. Numbers vary from 100 to 10mn. I want to have a fixed number of digits. What is the format for that?

here is what I have been using:

  var total_ads1 = d3.select("body")
  .append("div")
  .attr("class", "total_ads");


  od = new Odometer({
    el: document.querySelector(".total_ads"),
    value: sum,
    format:'(dd,ddd,ddd)',
    theme:'car',
    duration:1000,
  });

Every time it has to print smaller number it alters the number of cells in the odometer. I thought updating the inner html with text might work but it looks like it converts it internally to numbers.

showdev
  • 28,454
  • 37
  • 55
  • 73
pg2455
  • 5,039
  • 14
  • 51
  • 78
  • Possible duplicate of http://stackoverflow.com/questions/5774042/format-a-number-exactly-two-in-length. – CSS Oct 30 '15 at 18:58
  • the whole problem is that even if I update the odometer by forcing innerHTML to be some text it converts it to number. – pg2455 Oct 30 '15 at 19:02
  • So set it in a way that after it updates, then you pad it again, or call your padding function after each update. `value: pad(sum)` is just as easy to utilize. Check out this question for more ideas on solutions: http://stackoverflow.com/questions/1267283/how-can-i-create-a-zerofilled-value-using-javascript – CSS Oct 30 '15 at 19:10
  • Value is just the number to start with and it is not taking 0s in that too. I guess there is no solution to that. It was not designed for padded numbers – pg2455 Oct 30 '15 at 20:04
  • Just for clarity, this question seems to be referencing the [Odometer.js](https://github.com/HubSpot/odometer/) library. – showdev Jul 12 '19 at 02:13

1 Answers1

4

Michael has posted a compiled version of his workaround! Great job.
You can use it instead of the official version and specify in his script a Minimum Integer length:

MIN_INTEGER_LEN = 0;
showdev
  • 28,454
  • 37
  • 55
  • 73
roweb
  • 41
  • 2