Received data from the database can vary in quantity, ranging from 3 to 5 items. Initially, a multi-dimensional array was used to load the data. However, when the number of items changes, such as dropping to 4, 3, 2, or even 1, the bars do not populate accordingly.
This is why I am looking to utilize JSON for dynamic loading.
Json data={"columns":[["data1",15.8,11.749,50.69,10.167],["labels","Fiserv, Inc.","The Vanguard Group, Inc.","Morgan Stanley Smith Barney","JACKSON NATIONAL LIFE INS CO DEPOSIT"]]}
The labels function properly when using the commented-out multi-dimensional array, but encounter issues with dynamically loaded JSON data.
Javascript Code:
function setupTopSourcesChart(data) {
if (typeof data === 'undefined' || data === null) {
console.log("Top Sources Chart not available...");
return;
}
data = $.parseJSON(data);
var value = [];
$.each(data, function(key, i){
value.push(data.columns[0]);
});
var labels = data.columns[1];
var chart = c3
.generate({
bindto : "#topSources",
size : {
height : 180,
width : 450
},
bar : {
width : 16
},
padding : {
right : 160,
top : 50
},
color : {
pattern : [ '#008000', '#008000', '#008000', '#008000',
'#008000' ]
},
data : {
/*columns : [ [ 'Throughput', data.columns[0][1],
data.columns[0][2], data.columns[0][3],
data.columns[0][4]] ]*/
json: value,
type : 'bar',
labels : {
format : { //This doesnt work. helps to show the label in decimals
Throughput : d3.format("$,.1f"),
}
},
color : function(inColor, data) {
var colors = [ '#008000', '#008000', '#008000',
'#008000', '#008000' ];
if (data.index !== undefined) {
return colors[data.index];
}
return inColor;
}
},
axis : {
rotated : true,
x : {
type : 'category',
show : false,
},
y : {
show : false,
padding : {
top : 80
}
}
},
tooltip : {
show : false,
format : {
title : function(x) {
return x + 1;
},
value : function(value, ratio, id) {
var format = id === 'data1' ? d3.format(',') : d3
.format('$');
return format(value);
}
},
grouped : false
},
legend : {
show : false
}
});
}