Animated jQuery Knob Pie Charts

HTML

<script src="http://anthonyterrien.com/js/jquery.knob.js"></script>
    <div id="chart" class="chart_wrapper">
        <input type="text" class="dial chart_anim_1" data-fgColor="#fff" data-bgColor="#ccc"  />


        <div class="circle gray light">
            <span class="title">Chart Title 1</span>
            <span class="tagline">tagline</span>
            <span class="pie_value" id="eh_value">%</span>
        </div>
    </div>
    <div id="chart2" class="chart_wrapper">
        <input type="text" class="dial chart_anim_2" data-fgColor="#fff" data-bgColor="#ccc"  />

        
        <div class="circle pink dark">
            <span class="title">Chart Title 2</span>
            <span class="tagline">tagline</span>
            <span class="pie_value" id="bh_value">10%</span>
        </div>
    </div>

CSS

* {
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  box-sizing: border-box;
}

body {
  background: #faf7f7;
  font-family: Helvetica, Arial, sans-serif;
}

.chart_wrapper {
  position: relative;
  margin: 10px;
}
.chart_wrapper canvas {
  -webkit-border-radius: 112.5px;
  -moz-border-radius: 112.5px;
  border-radius: 112.5px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
  width: 225px;
  height: 225px;
}
.chart_wrapper input {
  display: none;
}
.chart_wrapper .circle {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 165px;
  height: 165px;
  padding-top: 40px;
  -webkit-border-radius: 112.5px;
  -moz-border-radius: 112.5px;
  border-radius: 112.5px;
}
.chart_wrapper .circle span {
  width: 100%;
  display: block;
  text-align: center;
  color: #fff;
}
.chart_wrapper .circle .title {
  font-size: 18px;
  font-weight: bold;
}
.chart_wrapper .circle .tagline {
  font-size: 12px;
}
.chart_wrapper .circle .pie_value {
  font-size: 40px;
  font-weight: bold;
  margin-top: 4px;
}
.chart_wrapper .circle.light span {
  color: #525252;
}
.chart_wrapper .circle.dark span {
  color: #fff;
}
.chart_wrapper .circle.pink {
  background: #bf008d;
}
.chart_wrapper .circle.gray {
  background: #ddd;
}

JavaScript

$(document).ready(function() {
        /* create jQuery knob with .dial class */
        $(".dial").knob({
            'readOnly': true
        })

        /* Animate chart class from startVal to endVal */
        function animateChart (chartClass, startVal, endVal) {
            $({value: startVal}).animate({value: endVal}, {
                duration: 1000,
                easing: 'swing',
                step: function () {
                    $('.' + chartClass).val(Math.ceil(this.value)).trigger('change');
                }
            });
        }
        animateChart('chart_anim_1', 0, 79);
        animateChart('chart_anim_2', 0, 96);

        /* Update bh_value when input.animate changes */
        $(".chart_anim_1").change(function () {
            $("#eh_value").text($(this).val() + "%");
        });
        $(".chart_anim_2").change(function () {
            $("#bh_value").text($(this).val() + "%");
        });
    });