CODEWITHSUNDEEP
javascriptjquery
code-8
code-8

Reputation: 58672

Triggering chart animation on Hover - easyPieChart

enter image description here

I have 6 charts

$('.chart-1').hover(function(e) {
    $('.chart-1').easyPieChart({
        lineCap: 'square',
        lineWidth: '4',
        barColor: '#E81F4D',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
    $('.chart-1').data('easyPieChart').enableAnimation();
});


$('.chart-2').hover(function(e) {
    $('.chart-2').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#971FE8',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });

});

$('.chart-3').hover(function(e) {
    $('.chart-3').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#1F8CE8',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });

});


$('.chart-4').hover(function(e) {
    $('.chart-4').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#1AB356',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });

});


$('.chart-5').hover(function(e) {
    $('.chart-5').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#EDE20E',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
});


$('.chart-6').hover(function(e) {
    $('.chart-6').easyPieChart({

        lineCap: 'square',
        lineWidth: '4',
        barColor: '#FC7402',
        size: '40',
        easing: 'easeOutBounce',
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
});

I want to trigger the animation when user hover on it, I've tried above codes, and still not working some how.

Can anyone please help ?

Upvotes: 1

Views: 330

Answers (1)

Fahmi Jabbar
Fahmi Jabbar

Reputation: 329

This might be silly, but all you need is animation right ?

First one, you have to declare the chart with animate parameter, so it has delay. second off all, you have to create on hover event. Then it looks like this

(I'm just gonna give one example)

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://rendro.github.io/easy-pie-chart/javascripts/jquery.easy-pie-chart.js"></script>
    <link rel="stylesheet"type="text/css" href="https://rendro.github.io/easy-pie-chart/stylesheets/jquery.easy-pie-chart.css">
  </head>
  <body>
    <div class="chart" data-percent="73">73%</div>
  </body>
</html>

$('.chart').easyPieChart({
        animate: 1000
    });
    
$('.chart').mouseenter(() => {
    $('.chart').data('easyPieChart').update(0);
    $('.chart').data('easyPieChart').update(parseInt($('.chart')[0].dataset.percent));
})

This is the sample : https://jsfiddle.net/9wuog48m/

Upvotes: 1

Related Questions