show multiple data sets in C3.js line chart - json

Question

I have following json:
[
{"data"=>"data1", "value1"=>10, "value2"=>6, "day"=>"05-20-2016"},
{"data"=>"data1", "value1"=>17, "value2"=>10, "day"=>"05-21-2016"},
{"data"=>"data1", "value1"=>12, "value2"=>8, "day"=>"05-22-2016"},
{"data"=>"data2", "value1"=>5, "value2"=>1, "day"=>"05-20-2016"},
{"data"=>"data2", "value1"=>11, "value2"=>3, "day"=>"05-21-2016"},
{"data"=>"data2", "value1"=>25, "value2"=>18, "day"=>"05-22-2016"}
]
What I want is to display these values in a line chart with C3.js and have a separate line for each value.
Based on the example, I want to have one line for data1 and value1, one line for data1 and value2, one line for data2 and value1, one line for data2 and value2 and in the legend I want to have Value1 > Data1, Data2 and Value2 > Data1, Data2 (each data line to have a different color).
Right now, when I load this in C3.js, it will only show me 2 lines (one for data1 and one for data2).
Can someone show me exactly how to do this?

Answer 1

This is a data wrangling exercise in that you want to turn data like
{"data"=>"data1", "value1"=>10, "value2"=>6, "day"=>"05-20-2016"},
...
{"data"=>"data2", "value1"=>5, "value2"=>1, "day"=>"05-20-2016"},
into something like
{"data1value1"=>10, "data1value2"=>6,
"data2value1"=>17, "data2value2"=>10, "key"=>"05-20-2016"},
This can be achieved like this:
var json = [
{"data":"data1", "value1":10, "value2":6, "day":"05-20-2016"},
{"data":"data1", "value1":17, "value2":10, "day":"05-21-2016"},
{"data":"data1", "value1":12, "value2":8, "day":"05-22-2016"},
{"data":"data2", "value1":5, "value2":1, "day":"05-20-2016"},
{"data":"data2", "value1":11, "value2":3, "day":"05-21-2016"},
{"data":"data2", "value1":25, "value2":18, "day":"05-22-2016"}
];
var valFields = ["value1", "value2"];
var dataIndexField = "data";
var keyField = "day";
var newMap = {}; // new data will be built up in here
json.forEach (function (d) {
// get new data obj for key, which in this case is the day value
var key = d[keyField];
var newObj = newMap[key];
if (!newObj) { // make the obj if it doesn't exist
newObj = {key: key};
newMap[key] = newObj;
}
// in this obj merge the dataIndexField and valFields to make new datapoints
var dataIndex = d[dataIndexField]; // either data1 or data2
valFields.forEach (function (vField) { // vfield will loop value1 then value2
newObj[dataIndex+vField] = d[vField]; // data1/2value1/2 = the value of value1/2
});
});
var newJson = d3.values(newMap); // array of objs suitable for c3
// dataFields are the names of the new datapoint properties minus 'key'
var newDataFields = d3.keys(newJson[0]);
newDataFields.splice (newDataFields.indexOf("key"), 1);
var chart = c3.generate({
data: {
json: newJson,
keys: {
x: 'key',
value: newDataFields
}
},
axis: {
x: {
type: 'category'
}
}
});
http://jsfiddle.net/w7o8k40q/3/
Basically the bit in the middle merges the data1/2 and value1/2 figures like you asked and adds them into objects that have a unique key, in this case taken from the day field of each row. The Json.stringified output of newJson is as so:
[
{"key":"05-20-2016","data1value1":10,"data1value2":6,"data2value1":5,"data2value2":1},
{"key":"05-21-2016","data1value1":17,"data1value2":10,"data2value1":11,"data2value2":3},
{"key":"05-22-2016","data1value1":12,"data1value2":8,"data2value1":25,"data2value2":18}
]
This is enough for c3 if you tell it which properties in each row are data (which is what newDataFields does) and which one is the key for the x value (PS as we interpret key as a categorical value you may need to sort the json by the key field so the days don't appear out of turn - luckily we encounter them in order in the original dataset)