Loading Dynamic JSON data in c3.js chart, labels not populating

Question

Below is the data I receive from DB. It could be 3 or 5 data items. I was previously using multi-dimensional array to load data. But when the number of items changes from 5 to 4,3,2 or 1 the bars would not populate.

Hence why I want to use json to load dynamically

 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 are working when I use the commented multi-dimensional array, not when I use dynamic JSON data.

JS 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
            }
        });

}

Answer 1

What if using this simple c3 feature > data url

What you need is:

• provide an url which return a json (or simply the json file path
• your code should look like this

c3.generate({
        ...
        data: {
            ...
            url: 'my_url_which_return_json',
            mimeType: 'json',
            labels : {
               format: function (v, id, i, j) { return d3.format(".1f")(v) }
               }
            },
        },
        ...
    });