Example 3

Pie chart

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- bootstrap button group to start / stop demo -->
<div class="btn-group">
    <button id = "btn1" type="button" class="btn btn-default btn-xs">start</button>
    <button id = "btn2" type="button" class="btn btn-default btn-xs">stop</button>
  </div>
  
<!-- container element used by c3 -->  
<div id='chart'></div>

JavaScript

// generate a c3 chart
var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
        ],
        selection: {
            enabled: true
        }
    }
});

// click event to start demo
$("#btn1").on("click",startDemo);

// click event to stop demo
$("#btn2").on("click",stopDemo);

// set text inside btn1
function setMessage(message) {
   $('#btn1').html(message);
}

// function to start demo
function startDemo() {

    setMessage('Starting Demo..');
    timer = setInterval(function(){
        if (currentIndex == demos.length) currentIndex = 0;
        demos[currentIndex++]();
    }, duration);
}

// function to stop demo
function stopDemo() {
    clearInterval(timer);
    $('#btn1').html(defaultMessage);
    running = false;
};

// demo settings
var defaultMessage = $('#btn1').html(), currentIndex = 0, timer, duration = 1500; 

// demo array
var demos = [
    function () {
        chart.load({
            columns: [['data2', 100, 30, 200, 320, 50, 150, 230, 80, 150]]
        })
        setMessage('Load data2');
    },
    function () {
        chart.load({
            columns: [['data3', 70, 90, 170, 220, 100, 110, 130, 40, 50]]
        })
        setMessage('Load data3');
    },
    function () {
        chart.select(['data1'], [2]);
        setMessage('Select point for index 2 of data1');
    },
    function () {
        chart.select(['data1'], [4,6]);
        setMessage('Select point for index 4,6 of data1');
    },
    function () {
        chart.unselect();
        setMessage('Unselect points');
    },
    function () {
        chart.focus('data2');
        setMessage('Focus on data2');
    },
    function () {
        chart.focus('data3');
        setMessage('Focus on data3');
    },
    function () {
        chart.revert();
        setMessage('Defocus');
    },
    function () {
        chart.load({
            columns: [['data1', 300, 230, 400, 520, 230, 250, 330, 280, 250]]
        })
  ...