JSON Data doesn't show on c3.js bar chart

Question

I use the C3.js chart library, great work!

But when I dynamically generate JSON data and load on the chart, the bars doesn’t show up.

See the snippet code below:

c3.generate({
  bindto: '#chartFbPosts',
  data: {
    json: [{
      "shares": 27,
      "likes": 241,
      "comments": 300
    }, {
      "shares": 24,
      "likes": 220,
      "comments": 22
    }, {
      "shares": 19,
      "likes": 208,
      "comments": 81
    }],
    type: 'bar'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://interestinate.com/wp-content/themes/dashboard/third_party/c3/c3.min.js"></script>
<div id="chartFbPosts"></div>

Answer 1

Please try this and change according required.

var jsonData = [
    {name: 'www.site1.com', upload: 200},
    {name: 'www.site2.com', upload: 100},
    {name: 'www.site3.com', upload: 300},
    {name: 'www.site4.com', upload: 400}
]

var data = {};
var sites = [];
jsonData.forEach(function(e) {

    sites.push(e.name);
    data[e.name] = e.upload;
})    

chart = c3.generate({
bindto: '#chartFbPosts',
    data: {
        json: [ data ],
        keys: {
            value: sites,
        },
        type:'pie'
    },
}); 

please see this example here http://jsfiddle.net/2nf9a7x4/