I have a JSON object that contains an array called datas, which holds the data I need to use for my chart. I want to utilize the data1 array for the x-axis in a category format. How can I achieve this?
This is my attempted solution, where I extract the data from the JSON object into a string:
chart script
var datas={"data1":["a","b"],"data2":["10","20"]};
// this data comes from AJAX
var out ="";
for(var i=0;i<datas.data1.length;i++){
var out = datas.data1[i];
}
alert(out);
var chart = c3.generate({
bindto: '#chart',
size: {
height: 450,
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
type: 'line',
},
color: {
pattern: ['#80B5EC', '#2A2A2E', '#FC8D2D', '#3FE51D', '#F51E50', '#F5D81E', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']
},
zoom: {
enabled: true
},
axis: {
x: {
type: 'category',
tick: {
multiline: false
},
categories: [out],
height: 100
},y: {
label:{
text:'TASKS',
position: 'outer-middle'
}
}
},
grid:{
y:{
show:true
}
}
});
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.js"></script>
<div id="chart"></div>Output of the alert:
a,b
If I use this var out in the c3.js object, I believe it will appear as "a,b" or ['a,b'].How can I include this value in the c3.js object? Check the output image of the chart here.