C3.js - Timeseries with time fails to parse

Question

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.

Mislead

Hey, did you get update for this question, I m also waiting for answer :) – Gio

@Gio Yes I found the solution and posted it. :) (Feel free to upvote if its helpful :D) – Mislead

Answer 1

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

Mislead

I have tried, But it will provide Nan .. Do u have any idea ? – Gio

xFormat: '%Y/%m/%d %H:%M:%S %A', format: '%Y-%m-%d %H:%M:%S %A' – Gio

How does your time data look like? – Mislead

2015/09/18 03:03:32 PM – Gio

Use this Format string instead: '%Y/%m/%d %H:%M:%S %p' :) God what a hassle to find information about the xFormat syntax. Actually I didn't find any but noticed that it was similar to the MySQL DATE_FORMAT() syntax. And in MySQL the %p is the placeholder for AM/PM. – Mislead

Thanks @dasKeks! It helped me solve my similar question. – Konrad

When you google 'c3 date parse', this is the answer that comes up. Very helpful, thanks. – Quarto

I can not format date which i get from JSON '2018-12-11T21:00:00'. I use xFormat: '%Y-%m-%d %H:%M:%S' and format: '%Y-%m-%d %H:%M:%S' but i get error Failed to parse x '2018-12-11T21:00:00' to Date object – Limousin

@Limousin That's because your parsing format string doesn't match your data. You have a 'T' between the date and the time. Try '%Y-%m-%dT%H:%M:%S' instead. – Mislead

@dasKeks I make jsfiddle example link – Limousin

That's really weird. I can't figure out why C3 doesn't parse the date even if the format string is correct. It somehow doesn't like that time component. One solution could be to parse the date before and replace the date String in your data with date objects. The same approach was used here: #32947146 – Mislead

Answer 2

There's also another way of passing date to c3 timeseries arrays. You can convert your date strings to a Javascript Date object prior to feeding it to c3.

var chart = c3.generate({
    bindto: '#chart',
    data: {
      x: 'times',
      xFormat: '%Y-%m-%d %H:%M:%S', // how the date is parsed
      columns: [
        ['times',new Date('2015-09-17 18:20:34'),new Date('2015-09-17 18:25:42'),new Date('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
            }
        }
    }
});

if you're having difficulties with converting your date strings to Date Objects (eg. 2016-01-01T00:00:00Z ), you can also use momentjs to parse your datestring.

var momentjsobject = moment('2016-05-06T00:00:00Z');
var dateObject = new Date(momentjsobject.format('YYYY-MM-DD HH:mm:ss'));

Injection

If you already provide a Date object, I guess you don't need the xFormat to specify how it's parsed? – Mislead

Indeed, the xformat was for parsing date strings. – Injection