C3 bar chart with 3 variables - angularjs

Question

I'm trying to display chart like this one, with following data:
[{"name":"doctor","monetary":"on","number":57},{"name":"programmer","monetary":"non-monetary","number":15}]
but I can't group monetary on or of value with the rest of the data.
Is there some other way to display chart with these data?
Here is the definition in controller:
$scope.chart = c3.generate({
bindto: d3.select('#chart'),
data: {
json: $scope.data,
columns: [
['monetary'],
['number']
],
keys: {
value: ['doctor', 'programmer']
},
groups: [
['number'],['monetary']
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5
}
},
});
},
function formatData ( json ) {
var formattedData = [],
object = {};
// fill object with data
angular.forEach(json, function(row) {
if (row.hasOwnProperty('name') && row.hasOwnProperty('number')) {
this[row.name] = row.number;
}
},object);
formattedData.push(object); // push c3 object in the array
return formattedData;
}
}]);

Answer 1

Remove this part of code if I am not wrong then it will display separately
groups:
[ ['number'],['monetary']],
After modification the code is as below and also a fiddle link has been given.
var chart = c3.generate({
data: {
columns: [
['MONETARY', 0, 3259, 10415, 14660, 2950, 16705, 22255, 4000],
['NON-MONETARY', 12335, 18041, 35900, 21985, 15110, 370, 13055, 20740]
],
type: 'bar',
},
axis: {
x: {
type: 'category',
categories: ['DENTIST', 'PROGRAMMER/ANALYST', 'CORPORATE SECRETARY', 'PHYSICIAN', 'PROFESSOR', 'PRESIDENT', 'MANAGER', 'CO-OWNER']
}
}
});
See the modified fiddle:
http://jsfiddle.net/63cp42Lv/4/