Jquery counto plugin number_format

Question

I want to show numbers greater than one thousand with a comma, but I cannot because when I use number_format from the CountTo plugin, the number appears as NaN.

Here is my code (the code works; I just want to add the comma)

<div class="col-xs-6 col-sm-3">
    <div class="font-w700 text-gray-darker animated fadeIn">SickGen Users</div>
    <div class="text-muted animated fadeIn"><small><i class="si si-user"></i> Total</small></div>
    <a class="h2 font-w300 text-primary animated flipInX" data-toggle="countTo" data-to="<?php echo $totalusers;?>"></a>
</div>
<div class="col-xs-6 col-sm-3">
    <div class="font-w700 text-gray-darker animated fadeIn">Alts Database</div>
    <div class="text-muted animated fadeIn"><small><i class="si si-list"></i> Total</small></div>
    <a class="h2 font-w300 text-primary animated flipInX" data-toggle="countTo" data-to="<?php echo $totalalts;?>"></a>
</div>
<div class="col-xs-6 col-sm-3">
    <div class="font-w700 text-gray-darker animated fadeIn">Generators</div>
    <div class="text-muted animated fadeIn"><small><i class="fa fa-spinner"></i> Total</small></div>
    <a class="h2 font-w300 text-primary animated flipInX" data-toggle="countTo" data-to="<?php echo $totalgens;?>"></a>
</div>
<div class="col-xs-6 col-sm-3">
    <div class="font-w700 text-gray-darker animated fadeIn">Alts Generated</div>
    <div class="text-muted animated fadeIn"><small><i class="si si-refresh"></i> Total</small></div>
    <a class="h2 font-w300 text-primary animated flipInX" data-toggle="countTo" data-to="<?php echo $generated;?>"></a>
</div>

Here you can see how it looks now (of course you can't see the count effect)

Here is what I want it to look like

Can you help me to add the comma?

script

 App.initHelper('appear-countTo');
     *
     */
    var uiHelperAppearCountTo = function(){
        // Init counter functionality
        jQuery('[data-toggle="countTo"]').each(function(){
            var $this       = jQuery(this);
            var $after      = $this.data('after');
            var $before     = $this.data('before');
            var $speed      = $this.data('speed') ? $this.data('speed') : 1500;
            var $interval   = $this.data('interval') ? $this.data('interval') : 15;

            $this.appear(function() {
                $this.countTo({
                    speed: $speed,
                    refreshInterval: $interval,
                    onComplete: function() {
                        if($after) {
                            $this.html($this.html() + $after);
                        } else if ($before) {
                            $this.html($before + $this.html());
                        }
                    }
                });
            });
        });
    };

@J.Titus here the plugin https://sickgen.com/assets/js/core/jquery.countTo.min.js — Juan Montes, May 27 '17 at 19:05
Thanks. Can you also add your JavaScript code that handles initialization of the numbers using `.countTo` to the original post? — J. Titus, May 27 '17 at 19:10

score 0 · Accepted Answer · answered May 27 '17 at 20:26

There's a formatter(value, options) configuration option in the documentation for countTo

$this.countTo({
  speed: $speed,
  refreshInterval: $interval,
  onComplete: function() {
    if ($after) {
      $this.html($this.html() + $after);
    } else if ($before) {
      $this.html($before + $this.html());
    }
  },
  formatter: function(value, options) {
    //default: return value.toFixed(options.decimals);
    return value.toFixed(options.decimals).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
});

The formatting code was taken from this StackOverflow answer and will work with any number that has 3 or less decimal places.

To show how it works:

function numberWithCommas(x) {
    return x.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

console.log(numberWithCommas(13718))

Jquery counto plugin number_format

1 Answers1