Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

how to stop animation in set time out function on mouse hover

I have a chart,

Any javascript method will work for me.

Stop the animation in setTimeout function on hover.

I want the animation but it should be stopped on mouseover, once mouseleave the animation should animate.

My chart:

var chart = c3.generate({
    data: {
        rows: [
            ['data4', 'data2', 'data3'],
            [90, 120, 300],
            [40, 160, 240],
            [50, 200, 290],
            [120, 160, 230],
            [80, 130, 300],
            [90, 220, 320]
        ],
        type: 'bar'
    }
});

setTimeout(function () {
    chart.transform('line', 'data4');
}, 2500);
setTimeout(function () {
    chart.transform('area', 'data2');
}, 5000);
setTimeout(function () {
    chart.transform('spline', 'data3');
}, 7500);

This is the fiddle, that explains you my problem

http://jsfiddle.net/sELst/6/

Thanks for looking in it

Upvotes: 0

Views: 505

Answers (1)

Gavin Hellyer
Gavin Hellyer

Reputation: 328

Something like this? : http://jsfiddle.net/sELst/9/

var interval = null;
var rotateGraphs = function () {
    if (currentChart < charts.length) {
        interval = setInterval(function () {
            chart.transform(charts[currentChart].type, charts[currentChart].data);
            currentChart++;

            if (currentChart >= charts.length) {
                clearInterval(interval);
                interval = null;
            }
        }, 2500);
    }
}
var chartElement = document.getElementById('chart');
chartElement.addEventListener('mouseover', function () {
    clearInterval(interval);
    interval = null;
}, false);

chartElement.addEventListener('mouseout', function () {
    rotateGraphs();
}, false);

rotateGraphs();

Upvotes: 1

Related Questions