Use your left/right keys to browse tutorials
jQuery dynamic number ticker

jQuery dynamic number ticker

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on May 21, 2012

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 JS 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)(?=(\d\d\d)+(?!\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() {
                                            elem.text(format_number(String(parseInt(this.count))));
                                        }});
            							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);
        update();

The PHP

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

download



More tutorials from Papermashup
Comments
5 discussions around jQuery dynamic number ticker
  1. Greetings from Colorado! I’m bored at work so I decided to browse your site on my iphone during lunch break. I love the knowledge you present here and can’t wait to take a look when I get home. I’m shocked at how fast your blog loaded on my phone .. I’m not even using WIFI, just 3G .. Anyhow, fantastic site!

  2. Peter says:

    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)

  3. Pingback: Pixlatte jQuery dynamic number ticker | Pixlatte

  4. phphunger says:

    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…





Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.