rendro/easy-pie-chart

Animate in accordion

jmashcroft opened this issue · 1 comments

I'm using this with a jquery accordion. each section in the accordion has a chart but i only want the chart to animate on opening of the section it resides in. is this possible?

You have to initialize them on the accordion event.
I had the same "issue" on TAB's so i initialize some charts "on load" and some on the Tab callback event.
To start on load i add the class '.onload'.

So my initialization looks like this:

$(function () {
    function startAnimateCharts(inside) {
        if (inside===undefined) {
            $('.percentage.onload').each(function () {
                initChart(this);
            });
        }else {
            $(inside).find('.percentage').each(function () {
                initChart(this);
            });
        }
    }
    function initChart(elem) {
        $(elem).easyPieChart({
            animate: 1000,
        });
    }
    startAnimateCharts();
    $('a[data-toggle="tab"]').on('show.bs.tab', function () {
        startAnimateCharts($(this).attr('href'))
    });
});