CODEWITHSUNDEEP
javascriptjqueryhtmlcss
univers_
univers_

Reputation: 463

Animate jQuery chart by changing rel on hover

I'm trying to modify a jQuery knob plugin to use as an animated chart.

This is what I have so far:

HTML:

<ul id="chart">
<li rel="100">Cats</li>


<input class="knob animated donut" value="0" rel="70" />

Javascript:

$('.knob').each(function () {
var $this = $(this);
var myVal = $this.attr("rel");
$(this).knob({
    readOnly: true,
    displayInput: false,
    bgColor: "cccccc",
    fgColor: "e60022"
});
       $({
           value: 0
       }).animate({

           value: myVal
       }, {
           duration: 1000,
           easing: 'swing',
           step: function () {
               $this.val(Math.ceil(this.value)).trigger('change');

           }
       })
   });

$('#chart > li').mouseover(function(){    
    $('#donut').text($(this).attr('rel'));
});

I'd like to be able to hover over the <li> element and use the rel value to apply it to the chart. I think I might need to include some JS to redraw the chart on hover though as well, but not sure how to do that either (I don't have much JS knowledge).

Any help is appreciated.

Upvotes: 1

Views: 370

Answers (1)

jme11
jme11

Reputation: 17362

DEMO

You need to set the animate properties in the event handler. So, initialize your "knob" element as you did, then in the event handler retrieve the values and run the animation.

In the demo I used a data attribute (it just makes more sense to me), not the rel attribute, but the following should work with your markup:

var donut = $('.knob');    
donut.knob({readOnly: true,
    displayInput: false,
});
$('#chart > li').on('mouseenter', function(){    
    var myVal = $(this).attr('rel'); 
    donut.stop().animate({value: myVal}, {
           duration: 200,
           easing: 'swing',
           step: function () {
               donut.val(Math.ceil(this.value)).trigger('change');
           }
    });
});

HTML: change the input to use the data attributes for color, as there is a bug in FF

<input class="knob" data-fgColor="#e60022" data-bgColor="#ccc" value="" />

Upvotes: 0

Related Questions