I want to display a time series chart with C3.js
using a date in the format 2015-09-17 18:20:34
and the format string '%Y-%m-%d %H:%M:%S'
but it fails to parse.
My code:
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'times',
columns: [
['times','2015-09-17 18:20:34','2015-09-17 18:25:42','2015-09-17 18:30:48'],
['data','1539','1546','1546','1550']
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d %H:%M:%S'
}
}
}
});
And I get the following error:
02:26:44.889 Failed to parse x '2015-09-17 18:20:34' to Date object c3.min.js:1:21943
02:26:44.889 Failed to parse x '2015-09-17 18:25:42' to Date object c3.min.js:1:21943
02:26:44.890 Failed to parse x '2015-09-17 18:30:48' to Date object c3.min.js:1:21943
02:26:44.890 Failed to parse x '2015-09-17 18:20:34' to Date object c3.min.js:1:21943
02:26:44.891 Failed to parse x '2015-09-17 18:25:42' to Date object c3.min.js:1:21943
02:26:44.892 Failed to parse x '2015-09-17 18:30:48' to Date object c3.min.js:1:21943
It works if I omit the time in the data and in the format but I need the time, too.
I found the solution to my problem:
The format in the axis
object is just to define how the date will be displayed. If you want to specify the format for the date parsing you have to use xFormat
in the data
object.
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'times',
xFormat: '%Y-%m-%d %H:%M:%S', // how the date is parsed
columns: [
['times','2015-09-17 18:20:34','2015-09-17 18:25:42','2015-09-17 18:30:48'],
['data','1539','1546','1546','1550']
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d %H:%M:%S' // how the date is displayed
}
}
}
});