c3.jsでX軸の値を結合したい

Question

下記のようなJSONを利用してC3でグラフ表示しようと思っておりますが、
Xの値をDATEとTIMEを結合した値で利用したいのですが、どうすれば可能なのでしょうか？
’DATA'+' '+'TIME'や’DATE'&' '&'TIME'等を設定してもエラーになるかデータが表示されなくなってしまいます。
よろしくお願いいたします。

var obc = [
{"DATE": "01-JAN-2018", "TIME": "09:00:09", "LEVEL1": "64", "LEVE2": "60"}, {"DATE": "01-JAN-2018", "TIME": "21:00:08", "LEVEL1": "61", "LEVE2": "60"}, {"DATE": "02-JAN-2018", "TIME": "09:00:06", "LEVEL1": "59", "LEVE2": "60"}]

var chart1 = c3.generate({
bindto: '#chart',
data: {
json: obc,
//xFormat: '%d-%b-%Y %H:%M:%S',
xFormat: '%d-%b-%Y',
keys: {
x: 'DATE',
value: ['LEVEL1', 'LEVE2']
},
types: {
takt: 'line',
oee: 'line'
}
},
axis: {
x: {
type: 'timeseries', //date format in CSV file needs to be 2000-06-14
tick: {
format: '%d-%b-%Y %H:%M:%S'
}
}
}
})
}

Answer 1

D3.jsは経験ありますが、C3.jsは未経験なので的外れの回答である可能性があることをご了承下さい。(C3自体はD3ベースのライブラリのようです）

var obc = [
{"DATE": "01-JAN-2018", "TIME": "09:00:09", "LEVEL1": "64", "LEVE2": "60"}, {"DATE": "01-JAN-2018", "TIME": "21:00:08", "LEVEL1": "61", "LEVE2": "60"}, {"DATE": "02-JAN-2018", "TIME": "09:00:06", "LEVEL1": "59", "LEVE2": "60"}]

おそらく、c3.generate()メソッドに諸々のオブジェクトを渡す前の段階で、上のobcをもとにdatetimeキーを持った別のオブジェクトを生成して、そのdatatimeキーを含む方のオブジェクトをc3.generate()メソッドに渡してあげる必要があるような気がします。

var obc2 = [
	{"DATE": "01-JAN-2018", "TIME": "09:00:09", "DATETIME": "01-JAN-2018 09:00:09", LEVEL1": "64", "LEVE2": "60"},
	// その他のオブジェクト...省略...
]

なので、このようなオブジェクトを用意してあげる必要があるのではないでしょうか。

もちろん、formatは%d-%b-%Y %H:%M:%Sの指定で。
それと、x: 'DATE'の部分がきっと、x: 'DATETIME'になるのかなと。

timeフォーマットの指定はおそらく合っていると思いますが、一応、確認してみて下さい。
https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md

Comments

[dowave]

ありがとうございます。
やはりオブジェクトを用意するしかないのですね。
実際には、odcはJSONファイルを読み込んでいる部分になります。
ですので、JSONファイル内のデータを利用しております。
もう少し探してみようと思います。

[HayatoKamono]

元々のjson側でインポート前に処理しておくか、インポート後に処理するかの二択だとは思います。最終的に掲載コードでもコンフィグオブジェクトのjsonキーに渡してるのはJSON文字列ではなく、JavaScriptのオブジェクトですからね。