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\'

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

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