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

Massey

InfluxDB emits RFC3339 timestamps. A quick search shows a few recommendations for parsing RFC3339 timestamps in javascript. – Lessor

Answer 1

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"

Massey