C3: Failing to parse dates

[BenjaminRH]

When I use the timeseries type, I keep getting the "Failed to parse x to Date object" error. On dates like '2014-08-12T00:00:00.000Z', which when I try to make with new Date in the console, work just fine. Any idea why this is happening?

[seifsallam]

I'm having this issue too

[alexphelps]

Same here, dates cannot parse with the latest update.

[runeksvendsen]

I have the same problem. Here's an example: http://jsfiddle.net/LtyoLykh/

[runeksvendsen]

I found the issue that solved my problem. It seems that specifying xFormat in data (as an argument to c3.generate()) solves the issue. In previous versions it was sufficient to specify the following, in addition to data:

axis: {
    x: {
        type: 'timeseries',
        tick: {
            format: '%Y-%m-%d %H:%M:%S'
        }
    }
}

This should work fine: http://jsfiddle.net/gbdtjsba/

[alexphelps]

Thanks for the fix!

[slajax]

I am also having this issue but unfourtunately the fix above doesn't work for me.

[masayuki0812]

Hi, please try data.xFormat if you load datetime string:

data: {
  ..
  xFormat: '%Y-%m-%d %H:%M:%S'
  ..
}

UPDATE:
I updated the reference in c3js.org. Sorry for the confusion and poor document.

[slajax]

What actually worked well for me was to pass the dates as real Date() objects rather then strings.

[louisnk]

Slajax, this also worked for me. Thanks for the tip.

[gjj]

Thanks for the fix! Both solutions above worked for me.

[maxklenk]

Works perfect for me, just renamed data.x_format to data.xFormat.

[mhnatiuk]

I doesn't work for me either. How to pass a Date object, bypassing c3 trying to format a string?
Also: http://jsfiddle.net/gbdtjsba/13/ mentioned earliers doesn't really work

[maxklenk]

@mhnatiuk: There are different format setting

One to parse the data, this format can be set right next to data:

{
  data: {
    columns: [...],
    xFormat: '%Y-%m-%d %H:%M:%S'
  }
}

And a second one to define how it will be rendered:

{
  axis: {
    x: {
      type: 'timeseries',
        tick: {
          format: '%Y-%m-%d'
      }
    }
  }
}

I updated the example http://jsfiddle.net/gbdtjsba/14/

[masayuki0812]

It seems working well. So please let me close.

[fibsifan]

I still havethis issue. I have set xFormat correctly and use an URL to pull JSON.
code looks like this:

data: {
    url: './json.php',
    mimeType: 'json',
    keys: {
        x: 'TIMESTAMP',
        xFormat: '%Y-%m-%d %H:%M:%S',
        value: ['DOWNLOAD']
    }
},
axis: {
    x: {
        type: 'timeseries',
        tick: {
            format: '%Y-%m-%d %H:%M:%S'
        }
    }
}

Am I missing something?

[gjj]

@fibsifan would be helpful if there was a sample JSON response. Your timestamp needs to follow data.keys.xFormat (i.e. %Y-%m-%d %H:%M:%S) rather than x.tick.format.

[fibsifan]

Ah yes, sorry I forgot. It looks like this:

[{"TIMESTAMP":"2015-03-03 23:58:41","DOWNLOAD":"31.20"},{"TIMESTAMP":"2015-03-04 00:07:16","DOWNLOAD":"29.96"}]

[jonnywyatt]

@fibsifan - try a simple transform to get your JSON data into columns and use that API instead of loading JSON directly and using 'keys'. I'm guessing (but would need verifying) that this might work.

[fibsifan]

Just in case someone stumbles upon this: for me the trick was to put xFormat outside AND inside keys:

data: {
    url: './json.php',
    mimeType: 'json',
    keys: {
        x: 'TIMESTAMP',
        xFormat: '%Y-%m-%d %H:%M:%S',
        value: ['DOWNLOAD']
    },
    xFormat: '%Y-%m-%d %H:%M:%S'
},
axis: {
    x: {
        type: 'timeseries',
        tick: {
            format: '%Y-%m-%d %H:%M:%S'
        }
    }
}

[just6700]

@fibsifan - I got the same problem and your trick worked for me! Thanks!

[dmiddlecamp]

Just hit this again today, it'd be cool if a workaround wasn't needed. Was surprised when Date.parse("_INSERT_ISO8601_DATE_HERE") works as expected, but these dates weren't being parsed.

edit: Ah, I'm late to the party, looks like easiest solution for me is to convert my json dates into their native millis since epoch value Date.valueOf(), then parseDate just passes it as a number in:

parsedDate = new Date(+date);

[aubricus]

Just ran into this myself. The format suggested earlier does not actually match the date format requested in the original post.

Got lucky and found a helpful hint here in the D3 wiki about ISO formatting.

_This worked for me:_

• use xFormat prop as recommended
• use this format value: %Y-%m-%dT%H:%M:%S.%LZ
• Here's a JSFiddle for proof

[kenbier]

@aubricus Thanks for posting the link to D3 ISO formatting, :+1:

[davegonzalez]

Hi there!

In c3.js v4.10 I was able to pass moment.js objects into the x column and the dates were parsed without any problems. In v4.11rc4, I now run into Failed to parse x '1461729600000' to Date object errors.

This occurs even when I set the xFormat on the data object. My full object looks like this once it's built:

data: {
  columns: [
    ['Total Plays', '4', '2', '5', '3', '4', '4', '3', '2'],
    ['Total Finishes', '1', '2', '3', '0', '2', '0', '2', '2'],
    ['x',  '2016-04-20T04:00:00.000Z', '2016-04-21T04:00:00.000Z', '2016-04-22T04:00:00.000Z', '2016-04-23T04:00:00.000Z', '2016-04-24T04:00:00.000Z', '2016-04-25T04:00:00.000Z', '2016-04-26T04:00:00.000Z', '2016-04-27T04:00:00.000Z']
  ],
  types: {
    'Total Plays': 'spline', 
    'Total Finishes': 'spline'
  },
  x: 'x',
  xFormat: '%Y-%m-%dT%H:%M:%S.%LZ'
}

The date object in c3_chart_internal_fn.parseDate looks like this:

Thanks for any help/ideas you might have!

[vperilla]

I have the same issue that @davegonzalez with 0.4.11 version

[misham]

Solved this by changing the format I'm feeding the dates into C3.js. Have the API send the data in the following format with %Y-%m-%d %H:%M %Z or Rails formatting: %Y-%m-%d %H:%M %z.

Then set your data.xFormat = '%Y-%m-%d %H:%M %Z

I did not need axis.x.localtime, the system just converted the ticks to the right timezone.

For me, the reason it was failing is that Rails sends timestamps in UTC by default. When it does that, it just assumes the client will know it's already in UTC and not try to parse the timezone.

So the example timestamps above (2016-04-21T04:00:00.000Z) do not actually include a timezone, just the date with time, including milliseconds. The __Z__ in there is supposed to signify that it's UTC. This is the default serializer btw. So if you're going to send timestamps from Rails, you'll have to overwrite how the to_json works for your object(s).

[shivangini844]

thanks it's working