Accessing data values in c3js in data events
I am trying to figure out if there is a way to access values from an array of data Company
in an event onclick
. So far, api
I only get an array using functions Users
.
var chartCompany = c3.generate({
bindto: '#users-chart',
data: {
x: 'Company',
url: '/ajax_call',
mimeType: 'json',
type: 'bar',
axes: {
Company: 'x'
},
onclick: function (d, i) { console.log(chartCompany.data()); }
},
axis: {
x: {
type: 'category',
show: false
},
}
});
And the json response from the server:
{
"Company": ["Company 1", "Company 2", "Company 2"],
"Users" : [10, 20, 30]
}
Any help / ideas would be much appreciated.
[Edit 1] To clarify my question: when clicking on data from Users (which is displayed as columns), I would like to get the corresponding Company.
[Edit 2] Working static example: http://jsfiddle.net/et37a9t2/
source to share
After trying many different things, I finally just looked at the diagram object and discovered the property categories
. This is populated when the x-axis is declared to be of the category type, as it is in my case. Thus, to get data from the x-axis, you need to call a function .categories()
.
...
},
onclick: function (d, i) { console.log(chartCompany.categories()[d.index]); }
},
...
Clicking on a panel in the diagram will return the corresponding category.
source to share