Update value of pie chart from span on my page

Question

I'm using pie chart script and I'm trying to update value from span on my page.

Pie chart looks like this:

HTML

<ul>
  <li><span class="newValue">25</span></li>
  <li>
    <div class='pieCharts'>
      <div class='chart'>
        <div class='percentage' data-percent='100'>
          <span>0</span><sup>%</sup>
        </div>
      </div>
    </div>
  </li>
</ul>

jQuery

$('.percentage').easyPieChart({
  animate: 1000,
  lineWidth: 8,
  barColor: '#00aeef',
  scaleColor: 'transparent',
  onStep: function(value) {
    this.$el.find('span').text(Math.round(value));
  },
  onStop: function(value, to) {
    this.$el.find('span').text(Math.round(to));
  }
});

And this is the way I've tried to update data-percent value, but it doesn't work:

$('.percentage').attr('data-percent', $(this).closest('.newValue').html());

JSFiddle with full working example

Answer 1

$(this).closest('.newValue').html() is getting evaluated to undefined, which is causing the pie chart to not update. Just changing the value to $('.newValue').html() is updating the chart.