Reputation: 2157
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
Thanks for looking in it
Upvotes: 0
Views: 505
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