"RT @willfrancis: The ultimate near-miss of 2019."

@ashleyford 2 hours ago

"RT @bendhalpern: Client-side validation"

@ashleyford 7 days ago

Designer and web developer, Co-founder and Technical Director at Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]


jQuery dynamic number ticker

An animated counted to count up and down to any number using JavaScript


This is a fascinating little script that helps you display a dynamic JSON feed of numbers that automatically updates on the page by animating up or down to the current number. A great addition as part of a realtime analytical dashboard.

The Code

There are three functions in total. The first one ‘format_number’ which works the same as number_format(); in PHP adding the decimal places. the ‘magic_number’ function then takes the current number and the new number and animates between them.

Finally we have the ‘update’ function which retrieves the new data set of numbers (randomly generated in PHP for the demo) via a JSONP feed. At the bottom of the script we’re refreshing the data every 4 seconds. Oh and dont forget to include the jQuery library.

counts = {};

function format_number(text){
return text.replace(/(d)(?=(ddd)+(?!d))/g, "$1,");

function magic_number(element_name, value) {
var elem = $(element_name);
var current = counts[element_name] || 0;
$({count: current}).animate({count: value}, {
duration: 500,
step: function() {
counts[element_name] = value;

function update() {
var jqxhr = $.getJSON("number.php?jsonp=?", function(data) {

magic_number("#number1", data[0]['n1']);
magic_number("#number2", data[0]['n2']);

setInterval(update, 4000);


For the example number.php generates random numbers and returns them as a JSON object. You could easily add as many numbers to the feed as you like, even retrieving data from a database, simply add extra values to the array below as shown commented out.

$total_data = array(
'total' => rand(0,99999999),
'twitter' => rand(0,99999999)
// , 'dummy-entry' => $var
echo $_GET['jsonp'].'('. json_encode($total_data) . ')';


Designer and web developer, Co-founder and Technical Director at Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]

Comments 7
  • Johan
    Posted on

    Johan Johan

    Reply Author

    Beautiful function……. Well working …..

  • Enamul Hoq
    Posted on

    Enamul Hoq Enamul Hoq

    Reply Author

    really nice and helptul jquery and number ticker … thanks for sharing with us ..

  • mariiine
    Posted on

    mariiine mariiine

    Reply Author

    Thanks a lot for this script, does exactly what I need!
    I will add a button to trigger a stop action and I’d like to add a slight slow down effect at the end of the animation, before it stops. Would you have any recommendation?

  • Peter
    Posted on

    Peter Peter

    Reply Author

    Hai,,,that’s awesome script :) … but can you help me please, if i want integrate with button, if user click on the button stop, the random is stop to random, but if user not click, the randomize still runing…any suggestion please? Thanks Before… (Sory my english not perfectly)

  • phphunger
    Posted on

    phphunger phphunger

    Reply Author

    hi good article…i have one doubt..could you please tell me where can we apply this in any of the web based projects…if you don’t mind…

    • cronhound
      Posted on

      cronhound cronhound

      Reply Author

      This would come in handy for many things,
      Dynamic page views, likes, follows, and any other statistics