[C3] 이진 데이터 표시를 위한 Step Graph

var chart = c3.generate({
    data: {
        x: 'x',
         xFormat: '%Y-%m-%d %H:%M:%S',
        columns: [
             ['x', '2017-01-01 12:13:20', '2017-01-01 12:13:21', '2017-01-01 12:13:22'],
            ['data1', 0, 1, 0],
            ['data2', 1, 1, 0]
        ],
        types: {
            data1: 'area-step',
            data2: 'area-step'
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d %H:%M:%S'
            }
        }
    }

});

c3홈페이지에서 적용해보면, Timeseries로 서로 겹치는 부분이나 안겹치는 부분을 구별할 수 있도록 하였다.