c3jsで次のjsonデータをどのようにフォーマットできますか？

Question

c3jsでjsonの後にどのようにフォーマットできますか？ projectcountをy軸、日付をx軸、各行を別のユーザーにします。

私はこれを見つけるのを手伝ってください。

{"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

私が説明するために、これらの3つのデータ点を取るよ：あなたが望むすべての行については

{"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"}, 

を、あなたはライン名で始まる配列を作ります。
次に、そのデータを設定し、ギャップをヌルで埋めます。
そして、あなたは最初から最後までに時系列に（「X」で始まる）の配列を設定する必要があります。

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 
    } 
}); 

はin actionを参照してください。

Answer 2

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 
} 
}); 

言及JavaScript support Date formats

このJSFiddle

を試してみてくださいを次のようにグラフごとneeds.Youは、グラフを作成することができますよう私たちは、JSONをフォーマットすることができます