C3: Reference y2 axis with json input

[limjunyangleon]

Hi,

I did my research but did not manage to find any way to perform the following.

The backend is providing me with the json array shown below.

What I want to achieve is to have 2 y axis. Lead & Conversion will reference the y axis while Rate will reference the y2 axis.

    [
       {"name": "google search", "Lead": 250, "Conversion": 59, "Rate": 50},
       {"name": "facebook advertisement", "Lead": 104, "Conversion": 20, "Rate": 60},
       {"name": "ST Ads", "Lead": 200, "Conversion": 123, "Rate": 70}
    ]

In the example provided (http://c3js.org/samples/axes_y2.htmlhttp://c3js.org/samples/axes_y2.html), this could be achieved by doing the following.

    columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        axes: {
            data1: 'y',
            data2: 'y2'
        }

I thought my scenario would be a pretty common use case, yet I didn't find anything regarding it. Am I missing out something? I hope to get some advice, thanks!

[josejcardenas]

Hi limjunyangleon
I was looking for the same case and I've found the way to do it. For instance take Rate from your json data definition as the y2 you must place as below:

var chart = c3.generate({
bindto:'#chart',
data: {
json: [
{"name": "google search", "Lead": 250, "Conversion": 59, "Rate": 50},
{"name": "facebook advertisement", "Lead": 104, "Conversion": 20, "Rate": 60},
{"name": "ST Ads", "Lead": 200, "Conversion": 123, "Rate": 70}
],
keys: {
x:'name',
value: ['Lead', 'Conversion', 'Rate'],
},
axes: {
'Rate':'y2'
},
type: 'bar',
types: {
'Rate': 'line'
}
},
axis: {
x: {
type: 'category'
},
y2:{
show:true
}
}
});

[limjunyangleon]

That helps! Tested and it works. Many thanks @josejcardenas