c3 - flow data

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="chart"></div>

JavaScript

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'
    }
});

var currentChart = 0;
var charts = [{
    type: 'line',
    data: 'data4'
}, {
    type: 'area',
    data: 'data2'
}, {
    type: 'spline',
    data: 'data3'
}];

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();