Animated Chart

Adds animation to the jQuery Knobs plugin.

by jme11

HTML

<script src="http://anthonyterrien.com/js/jquery.knob.js"></script>
<div class="container">   
    <h1>Favorite Childhood Pets</h1>
    <p>(hover over each pet type to view survey results)</p>
    <ul class="pets">
        <li data-value="23">Cats</li>
        <li data-value="8">Worms</li>
        <li data-value="12">Hamsters</li>
        <li data-value="54">Dogs</li>
        <li data-value="3">Other</li>
    </ul>
    <div class="chart">
        <input class="dial" value="" />
    </div>
</div>

CSS

html, body {
    height: 100%;
}
body {
    background: -webkit-linear-gradient(-45deg, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    /* IE10+ */
    background: linear-gradient(135deg, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    display: flex;
    align-items: center;
    justify-content: center;
}
.container {
    background-color: #fff;
    padding: 20px 0;
    border-radius: 4px;
    border: 3px solid #eee;
    text-align: center;
    color: #999;
}
h1 {
    font-family: sans-serif;
    color: orange;
    font-size: 2em;
    margin: 20px 0 0;
}
li {
    display: inline-block;
    height: 30px;
    width: 100px;
    color: #fff;
    background-color: #ccc;
    line-height: 30px;
    font-family: sans-serif;
    cursor: pointer;
    margin: 10px;
}
.pets, .chart {
    margin: 40px 20px;
}

JavaScript

var dial = $('.dial');
dial.knob({
    readOnly: true
});
$('.pets > li').on('mouseenter', function () {
    var button = $(this);
    var myVal = button.data('value');
    button.css('backgroundColor', 'yellowgreen').siblings().css('backgroundColor', '#ccc');
    dial.stop().animate({
        value: myVal
    }, {
        duration: 200,
        easing: 'swing',
        step: function () {
            dial.val(Math.ceil(this.value)).trigger('change');
        },
        complete: function () {
            dial.val(myVal + '%');
        }
    });
});