Edit in JSFiddle

var chart = c3.generate({
    data: {
        x: 'x',
//        xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
        columns: [
            ['x', '1999', '2001', '2003', '2005', '2007', '2009'],
//            ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
            ['2-5 yo', 0,0,0,0,0,0,]
        ],
        selection: {
            enabled: true
        }
    }
});

d3.select("svg").append("text")
    .attr("x", 40 )
    .attr("y", 20)
    .style("text-anchor", "left")
    .text("Body Mass Index")
	.style('fill', 'darkPink');

var defaultMessage = document.getElementById('message').innerHTML,
    currentIndex = 0,
    timer, duration = 3000,
    demos = [

    function () {
        setMessage('Childhood obesity is on the rise...');
    },

    function () {
        chart.load({
            columns: [
                ['2-5 yo', 16.2, 16.5, 16.7, 16.3, 16.3, 16.6]
            ]
        })
        setMessage('among toddlers,');
    },
        
   function () {
        chart.load({
            columns: [
                ['6-11 yo', 17.9, 18.5, 18.4, 18.2, 18.6, 18.3]
            ]
        })
        chart.focus('6-11 yo');
        setMessage('kids,');
    },
        
        
    function () {
        chart.load({
            columns: [
                ['12-19 yo', 22.9, 23.1, 23.4, 23.2, 23.5, 23.8]
            ]
        })
        chart.focus('12-19 yo');
        setMessage('and teens. (Ogden, 2012)');
    },

    function () {
        setMessage('We assessed the use of a robotic toy dragon to teach children about healthy eating.');
        chart.revert();
    },
        
        
    function () {
        setMessage("26 U.S. children participated in a 3-week study on healthy eating with the robot.");
    },
        
    function () {
        setMessage('Their engagement improved over the three week study, and indicated by lower response times over weeks 1-3:');
        chart.load({
            columns: [
                ['x', 1, 2, 3],
                ['time to respond to robot', 4.3, 2.5, 3.5]
            ],
            unload: ['2-5 yo', '6-11 yo', '12-19 yo']
        })
        chart.focus('time to respond to robot');
        
        d3.select("svg").append("text")
            .attr("x", 40 )
            .attr("y", 20)
            .style("text-anchor", "left")
            .text("Body Mass Index")
        	.style('fill', 'white');
        d3.select("svg").append("text")
            .attr("x", 40 )
            .attr("y", 20)
            .style("text-anchor", "left")
            .text("Response time (s)")
        	.style('fill', 'darkPink');
    },
    
    function () {
        setMessage('However, no statistically significant difference was found on the selection of food choices betwen different weeks.'); 
    },
          
    function () {
        setMessage('The robot also received extremely high likeability ratings from the children.'); 
    },
    
    function () {
        setMessage('Further research into the use of robotic agents to create behavior change in childhood eating habits is recommended.'); 
        chart.load({
            unload: ['time to respond to robot']
        })
    },

    function () {
        // wait for end of transition for flow
    },

    ];

function setMessage(message) {
    document.getElementById('message').innerHTML = message;
}

d3.select('#start_btn').on("click", function(){
    if(this.innerHTML === "Stop Demo"){ 
        stopDemo(); 
        this.innerHTML = "Continue Demo";
        return; 
    }
    this.innerHTML = "Stop Demo";
    setMessage('Starting Demo..');
    timer = setInterval(function () {
        if (currentIndex == demos.length) currentIndex = 0;
        demos[currentIndex++]();
    }, duration);
});

function stopDemo() {
    clearInterval(timer);
};
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 well pull-right">
             <h2>Feeding Your Inner Dragon-bot: A Robot that Helps Children Select Healthy Foods</h2>

            <p>Data from Short et al. (2014) </p>
            <hr>
            <p id="message" class="bg-info">  </p>
            <button id="start_btn" class="btn btn-primary pull-right">Start Demo</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div id="chart"></div>
        </div>
    </div>
</div>

              

External resources loaded into this fiddle: