Column data with json array c3.js

Question

I'm trying to create a chart using C3.js, but having an issue showing json data.

Here is my data:

{StatsID: "1", label: "unique-visits", month: "2014-10", value: "17230"},
{StatsID: "2", label: "unique-visits", month: "2014-11", value: "17658"},
{StatsID: "3", label: "unique-visits", month: "2014-12", value: "15624"},
{StatsID: "4", label: "completes", month: "2014-10", value: "5323"},
{StatsID: "5", label: "completes", month: "2014-11", value: "6359"},
{StatsID: "6", label: "completes", month: "2014-12", value: "8216"},
{StatsID: "7", label: "quals", month: "2014-10", value: "552"},
{StatsID: "8", label: "quals", month: "2014-11", value: "318"},
{StatsID: "9", label: "quals", month: "2014-12", value: "332"}

Ideally I'd like to have a line graph, where each line represents a label, and each point on the graph was a value. Is this possible? At the moment when I enter this data onto the graph it just shows one line of all these values.

Sikandar Tamboli · Answer 1 · 2015-02-24T07:42:22.673

reformat json to something like

var jsonObject={
       data:{
              'unique-visits': [17230,17658,15624],
              'completes': [5323,6359,8216],
              'quals': [552,318,332]
            },
       keys:['2014-10', '2014-11', '2014-12']
      }

use category axis to show multiple lines

var chart = c3.generate({
   data: {
       json:
          jsonObject.data
   },axis: {
       x: {
           type: 'category',
           categories: jsonObject.keys
       }
   }
});

Demo Example

Column data with json array c3.js

1 Answers1