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.

Hey, did you get update for this question, I m also waiting for answer :) — vinodh, Sep 18 '15 at 11:16
@vinodh Yes I found the solution and posted it. :) (Feel free to upvote if its helpful :D) — das Keks, Sep 18 '15 at 11:41

das Keks · Accepted Answer · 2016-06-03T16:22:58.533

38

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

edited Jun 03 '16 at 16:22

answered Sep 18 '15 at 11:39

das Keks

3,723
5
35
57

I have tried, But it will provide Nan .. Do u have any idea ? – vinodh Sep 18 '15 at 11:52
xFormat: '%Y/%m/%d %H:%M:%S %A', format: '%Y-%m-%d %H:%M:%S %A' – vinodh Sep 18 '15 at 11:53
How does your time data look like? – das Keks Sep 18 '15 at 12:05
2015/09/18 03:03:32 PM – vinodh Sep 18 '15 at 12:31
1

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. – das Keks Sep 18 '15 at 12:46
Thanks @dasKeks! It helped me solve [my similar question](http://stackoverflow.com/questions/32946646/c3-js-how-to-specify-the-timestamp-format-when-plotting-timeseries-taken-from/). – tgogos Oct 05 '15 at 14:16
When you google 'c3 date parse', this is the answer that comes up. Very helpful, thanks. – Jun 23 '16 at 17:38
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` – Marko Dec 14 '18 at 08:57
@Marko 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. – das Keks Dec 14 '18 at 09:02
@dasKeks I make jsfiddle example [link](https://jsfiddle.net/L0tmvy5p/) – Marko Dec 17 '18 at 08:30
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: https://stackoverflow.com/questions/32946646/c3-js-how-to-specify-the-timestamp-format-when-plotting-timeseries-taken-from – das Keks Dec 17 '18 at 13:06

Cemal · Answer 2 · 2018-01-15T19:13:24.600

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

If you already provide a Date object, I guess you don't need the `xFormat` to specify how it's parsed? — das Keks, Nov 16 '21 at 13:00

C3.js - Timeseries with time fails to parse

2 Answers2

Linked