Number animate

[Deleted user]

How I can to animate this this number?

[Brent Barkley]

I am having trouble with this too. It says in the documentation:

(the method is scoped to the context of the plugin, so you can access the DOM element via this.el).

But any time I try to use it, I get errors. For instance:

onStep: function(value) {
     this.$el.find('span').text(~~value);
}

Yields an error "TypeError: this.$el is undefined".

[Robert]

@watermelonkid you can access the element via this.el not this.$el which are two different JS variables. Try:

onStep: function(value) {
     $(this.el).find('span').text(Math.round(value));
}

@Pantela777: Add the onStep function as a property to the config object when initializing easy-pie-chart

[Deleted user]

I use version 2.1.5
On onStep my value is empty, I try to write static number, he output, but animate is not work...

$('.easy-pie-chart.percentage').each(function(){
    var barColor = $(this).data('color') || '#555555';
    var trackColor = '#E2E2E2';
    var scaleColor = $(this).data('color');
    var size = parseInt($(this).data('size')) || 80;
    $(this).easyPieChart({
        onStep: function(value) {
             $(this.el).find('span').text(Math.round(value));
        },
        barColor: barColor,
        trackColor: trackColor,
        scaleColor: scaleColor,
        lineCap: 'butt',
        scaleLength: 5,
        rotate: 0,
        lineWidth: parseInt(size/10),
        animate: 3000,
        size: size
    }).css('color', barColor);
});

[Ramon Leenders]

People should be aware the onStep function is using 3 variables, and if you use the first, that's the "from" value.

If you look in the code, you will see this:

onStep: function(from, to, currentValue)

So please use "currentValue" instead of "from" (or "value" as in the above examples).

[techs]

@Pantela777,
I was having this same issue. What finally made everything work for me was changing the version of easy-pie-chart.js that my page was calling, to this one (version 1.2.3) http://rendro.github.io/easy-pie-chart/javascripts/jquery.easy-pie-chart.js

Also, I'm not sure if it's mandatory that the number in your html be wrapped in a span element (or if it could, for instance, be wrapped in another element like p or div), but span is what I used.

And here is the code I use to call it:

$(function() {
   $('.chart').easyPieChart({
     scaleColor: "transparent",
     lineWidth: 18,
     lineCap: 'round',
     barColor: '#229CEF',
     trackColor:    "#bbb",
     size: 120,
     rotate: 0,    
     animate: 1000,
     // animate the numbers
    onStep: function(value) {
      this.$el.find('span').text(Math.round(value));
    },
    onStop: function(value, to) {
      this.$el.find('span').text(Math.round(to));
    }
  });
});

[Deleted user]

I understand this, but I want to start animate from 0% to 100%, and then change with exp. 52 000$ (if possible change with fadeIn/fadeOut effect).

One of solution I think add block with display: none; and call show it with onStop, also need hide percent...

I try to set 52 000$ in data-percent="", but animate is not work, I understand because 100% is very quickly ups...

[OlivierHe]

check the demo on git hub ( i should have done that from the start huhu) gotta like bad documentation.
what you need is :
html
<span class="chart" data-percent="86"> <span class="percent"></span> </span>
css
.chart { position: relative; display: inline-block; width: 110px; height: 110px; margin-top: 50px; margin-bottom: 50px; text-align: center; } .chart canvas { position: absolute; top: 0; left: 0; } .percent { display: inline-block; line-height: 110px; z-index: 2; } .percent:after { content: '%'; margin-left: 0.1em; font-size: .8em; }

jquery not javaquery lol

$(function() {
$('.chart').easyPieChart({
easing: 'easeOut',
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
});

Et voila !