0

I should display an animated counter. Ideally, there should be an continous animation of the number change. The situation looks like the following:

  • I get every minute a new value.
  • The counter should show the real value (no fake).
  • There are times where there is no value change.
  • Sometimes there counter should spin faster and sometimes slower (depending on the value change).

My idea was to use the last two values and animate between them. Depending on the difference the speed has to change. But I didn't find a counter which allows to change the speed afterwards. Or do you have another idea?

How are all the other websites with a counter doing it? Do they fake?

Edit:

I tried different counter - currently I'm using jOdometer. My current code base is:

var counter = $('.counter').jOdometer({
    counterStart: '0',
    numbersImage: '/img/jodometer-numbers-24pt.png', 
    widthNumber: 32,
    heightNumber: 54,
    spaceNumbers: 0, 
    offsetRight:-10,
    speed:10000,
    delayTime: 300,
    maxDigits: 10,
});

function update_odometer() { 
    var jqxhr = $.getJSON("/number.php?jsonp=?")
        .done(function(data){
            console.log(data);
            total = data['Total'];
            counter.goToNumber(total);
        })
        .fail(function(data){
            console.log(data);
        });
};

update_odometer();
setInterval(update_odometer, 60000);

The counter currently counts from zero to my number, but I want to change this behavior (counting from the next-to-last to the last value - but I have problems with my AJAX call [see here]). It is also possible that I change the library if needed. I looked into jquery.jodometer.js and perhaps I get it working to create a function which changes the speed on the fly.

jOdometer Counter

But the reason why I didn't attached the code was that I search for the programming procedure behind the code. Is it possible to get such a live counter? How does the procedure does look like?

Solution:
Setting the speed solves the problem because the library does the animation for me:

speed:60000

You only have to match the speed of the animation with the update interval.

Community
  • 1
  • 1
grabner
  • 1,219
  • 3
  • 13
  • 23
  • I'm not the one who downvoted. But what is this counter you are talking about? Please add a little code or an image to show what should be done. –  Jul 01 '14 at 11:45
  • Not downvoter, but you did not include any code, nor any workable example. – VLAZ Jul 01 '14 at 11:45
  • Thanks for your response. I added some code. Don't know if a working example would help. I cannot give access to the live data. I could only create an example with two sample values. Would you need that? – grabner Jul 01 '14 at 12:05

1 Answers1

1

A simple for loop from current value to value to be updated should solve your problem.

Inside your done function,

for(var i=current_odo_value; i<=data['Total']; i++) {
    counter.goToNumber(i);
}

If you can control the speed in your library, this ought to do it. Since the speed is directly proportional to the difference between current value and updated value, that difference can be sent to plugin as the required speed value.

I'm assuming only increase in fetched total value. If it can decrease as well, you need to handle that condition as well.

  • It was much simpler than I thought. I set the speed to one minute and this solved my problem. The only thing I noticed is that the numbers get ugly when the counter is running to long. I switched to another counter but here the rounding makes problems (but thats another story). – grabner Jul 08 '14 at 21:12