How can I format following json data in c3js? - json

Question

How can i format following json in c3js?.
I want projectcount as y axis,date as x axis and each line for different user.
Please help me to find out this.
{"ProjectList":[{"date":"18-07-2017","projectcount":2,"user":"Salva"},
{"date":"10-07-2017","projectcount":1,"user":"Jaspreet Kaur"},
{"date":"07-07-2017","projectcount":1,"user":"Sukanya Ray"},
{"date":"29-06-2017","projectcount":1,"user":"Asmita Bhurke"},
{"date":"06-08-2017","projectcount":2,"user":"Salman AP Homes"},
{"date":"31-07-2017","projectcount":1,"user":"Alena Sandra"},
{"date":"27-07-2017","projectcount":1,"user":"Salva"},
{"date":"25-07-2017","projectcount":2,"user":"Salva"},
{"date":"21-07-2017","projectcount":1,"user":"Jaspreet Kaur"},
{"date":"21-07-2017","projectcount":2,"user":"Sandeep Ghanekar"}]}

Answer 1

I'll take these three data points to illustrate:
{"date":"31-07-2017","projectcount":1,"user":"Alena Sandra"},
{"date":"27-07-2017","projectcount":1,"user":"Salva"},
{"date":"25-07-2017","projectcount":2,"user":"Salva"},
For every line you want, you make an array starting with line name.
Then you set its data, filling gaps with nulls.
And you have to set timeseries array (starting with "x") from first to last date:
var chart = c3.generate({
data: {
x: 'x',
xFormat: '%d-%m-%Y', // parse format
"columns": [
[
"x",
"25-07-2017",
"26-07-2017",
"27-07-2017",
"28-07-2017",
"29-07-2017",
"30-07-2017",
"31-07-2017"
],
[
"Salva",
2,
null,
1,
null,
null,
null,
null
],
[
"Alena Sandra",
null,
null,
null,
null,
null,
null,
1
]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%d-%m-%Y' // display format
}
}
},
line: {
connectNull: true
}
});
See in action.

Answer 2

We can format the JSON as per the graph needs.You can creates the graph as follows
var items = {
"ProjectList": [{ "date": "07-18-2017", "projectcount": 2, "user": "Salva" },
{ "date": "07-10-2017", "projectcount": 1, "user": "Jaspreet Kaur" },
{ "date": "07-07-2017", "projectcount": 1, "user": "Sukanya Ray" },
{ "date": "06-29-2017", "projectcount": 5, "user": "Asmita Bhurke" },
{ "date": "08-06-2017", "projectcount": 1, "user": "Salman AP Homes" },
{ "date": "07-31-2017", "projectcount": 3, "user": "Alena Sandra" },
{ "date": "07-27-2017", "projectcount": 4, "user": "Sandeep Ghanekar" },
{ "date": "07-25-2017", "projectcount": 2, "user": "Salva" },
{ "date": "07-21-2017", "projectcount": 6, "user": "Jaspreet Kaur" },
{ "date": "07-04-2017", "projectcount": 5, "user": "Sandeep Ghanekar" },
{ "date": "07-08-2017", "projectcount": 7, "user": "Salva" },
{ "date": "07-21-2017", "projectcount": 2, "user": "Jaspreet Kaur" },
{ "date": "07-21-2017", "projectcount": 2, "user": "Sandeep Ghanekar" }]
}
var persons=[];
var valueToPush = new Array();
var uniqueArray = items.ProjectList.reduce(function (a, d) {
if (a.indexOf(d.date) === -1) {
a.push(""+d.date+"");
}
return a;
}, ['x']);
uniqueArray.sort(function(a, b) {
dateA = new Date(a),
dateB = new Date(b);
return dateA - dateB;
});
var nameArray = items.ProjectList.reduce(function (a, d) {
if (a.indexOf(d.user) === -1) {
a.push(""+d.user+"");
}
return a;
}, []);
valueToPush[0]=uniqueArray;
var i=1;
nameArray.forEach(function(c){
persons=[];
persons.push(""+c+"")
items.ProjectList.forEach(function(b){
if(c===b.user){
persons.push(b.projectcount)
}
else{
persons.push(null)
}
});
valueToPush[i]=persons;
i++;
});
var chart = c3.generate({
data: {
x: 'x',
xFormat: '%d-%m-%Y',
"columns": valueToPush
},
axis: {
x: {
type: 'category',
tick: {
format: '%d-%m-%Y'
}
}
},
line: {
connectNull: true
}
});
Mention JavaScript support Date formats
Try this JSFiddle