C3.js - How to specify the timestamp format when plotting timeseries taken from InfluxDB

Question

influxDB timestamps look like this:

2015-01-29T21:55:43.702900257Z

The question is what options should I use for the x-axis when I generate the graph with C3.js

The error I get:

"Failed to parse x '2015-01-29T21:55:43.702900257Z' to Date object"

Maybe this jsfiddle will help you do some quick tests... I think the problem is with the time format but any other suggestions are welcome:

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

InfluxDB emits RFC3339 timestamps. A quick search shows a [few](http://stackoverflow.com/questions/10531276/javascript-using-datejs-to-parse-rfc3339-datetime) [recommendations](http://stackoverflow.com/questions/11318634/how-to-convert-date-in-rfc-3339-to-the-javascript-date-objectmilliseconds-since) for parsing RFC3339 timestamps in javascript. — beckettsean, Oct 05 '15 at 18:43

score 27 · Accepted Answer · edited Nov 13 '19 at 08:27

First, I had to add xFormat because as @das Keks says here:

"The format in the axis Object just defines 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."

data: {
    x: 'x',
    xFormat: '%Y-%m-%dT%H:%M:%S.%LZ',
    columns: [
        ['x', ... ],
        ['data1', ... ]
    ]
}

For the xFormat options see D3.js / Time Formatting

Second, to get to the right format, I changed every timestamp by first creating a Date object with Date() and then by using dateObj.toISOString(). For example, open your console and try this:

> new Date('2015-09-30T12:21:41.447494312Z').toISOString();
> "2015-09-30T12:21:41.447Z"

C3.js - How to specify the timestamp format when plotting timeseries taken from InfluxDB

1 Answers1

Linked