Category Data

# data_stringx.js

var chart = c3.generate({ data: { x : 'x', columns: [ ['x', 'www.site1.com', 'www.site2.com', 'www.site3.com', 'www.site4.com'], ['download', 30, 200, 100, 400], ['loading', 90, 100, 140, 200], ], groups: [ ['download', 'loading'] ], type: 'bar' }, axis: { x: { type: 'category' // this needed to load string x value } } }); setTimeout(function () { chart.load({ columns: [ ['x', 'www.siteA.com', 'www.siteB.com', 'www.siteC.com', 'www.siteD.com'], ['download', 130, 200, 150, 350], ['loading', 190, 180, 190, 140], ], }); }, 1000); setTimeout(function () { chart.load({ columns: [ ['x', 'www.siteE.com', 'www.siteF.com', 'www.siteG.com'], ['download', 30, 300, 200], ['loading', 90, 130, 240], ], }); }, 2000); setTimeout(function () { chart.load({ columns: [ ['x', 'www.site1.com', 'www.site2.com', 'www.site3.com', 'www.site4.com'], ['download', 130, 300, 200, 470], ['loading', 190, 130, 240, 340], ], }); }, 3000); setTimeout(function () { chart.load({ columns: [ ['download', 30, 30, 20, 170], ['loading', 90, 30, 40, 40], ], }); }, 4000); setTimeout(function () { chart.load({ url: '/data/c3_string_x.csv' }); }, 5000);

# c3_string_x.csv

x,download,loading
www.siteX.com,100,400
www.siteY.com,200,100
www.siteZ.com,300,200