Add timestamp format to line graph x-axes

Question

I am newbie to d3.js, as well as to c3.js. I want dynamic timestamp in c3.js as shown in this d3.js example. It should change time format according to the range of time.

I am following c3js.org's time series example. But not able to get dynamic range.

The code is as follows.

Update 1

var date1=new Date(1397657484*1000);
var date2=new Date(1397657514*1000);
var date3=new Date(1397657554*1000);
var date4=new Date(1397657594*1000);
var date5=new Date(1397657641*1000);
var date6=new Date(1398323901*1000);

var seconds = (date6.getTime() - date1.getTime())/1000;

var xaxisformat;
    if (seconds < 86400)
    {
        xaxisformat = '%I:%M:%S';
    }
    else {
        xaxisformat = '%Y-%m-%d %I:%M';
    }

var format=d3.time.format(xaxisformat);  //I am converting after if loop since we are calculating seconds using javascript.

date1=format(date1); //I think this formatting required to pass d3.time to c3js
date2=format(date2);
date3=format(date3);
date4=format(date4);
date5=format(date5);
date6=format(date6);

var chart = c3.generate({
data: {
    x: 'x',
    columns: [
        ['x',date1, date2, date3, date4, date5, date6],
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 130, 340, 200, 500, 250, 350]
    ]
},
axis: {
    x: {
        type: 'timeseries',
        tick: {
            format: xaxisformat
        }
    }
}
});

This might be silly question, but I am newbie to this area.

Singsong

Regarding the edit (c3 -> d3), there is actually a c3 library that uses D3 to create help reusable charts. So the question was valid. It was news to me too, but documented here: c3js.org – Derayne

Answer 1

There were a couple of things I had to do to get this working.

Firstly and most importantly, don't re-declare d3 as a date, because you won't be able to use any of the d3 library! I renamed d1, d2, d3... to date1, date2, date3...

Secondly, it looks like c3.js only allows a subset of time format specifiers and %X isn't one of them, so I've changed:

var parseDate = d3.time.format("%X");

to

var format = d3.time.format("%Y-%m-%d %I:%M:%S.%L");

Note that I've also renamed parseDate to format since it better reflects what's happening. But you don't need to use this anyway, see my update below

One way to get a dynamic x-axis time format would be by calculating the difference between the last and first dates - In this case, varying the format if the time span is greater than a day (86400 seconds)

var seconds = (date6.getTime() - date1.getTime())/1000;

var xaxisformat;
if (seconds < 86400)
{
    xaxisformat = '%I:%M:%S';
}
else {
    xaxisformat = '%Y-%m-%d %I:%M'
}

and changing the tick format to:

x: {
    type: 'timeseries',
    tick: {
        format: xaxisformat
    }

Update

Actually you don't need to use format=d3.time.format(...) at all here, since c3.js handles all the date formatting. So you can just do this (pass the date in directly in the c3 'x' column rather than formatting it, because it will be re-formatted anyway):

var date1=new Date(1397657484*1000);
...
var date5=new Date(1397657641*1000);
var date6=new Date(1397657741*1000);

var seconds = (date6.getTime() - date1.getTime())/1000;
var xaxisformat;
if (seconds < 86400)
{
    xaxisformat = '%I:%M:%S';
}
else {
    xaxisformat = '%Y-%m-%d %I:%M'
}

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x',date1, date2, date3, date4, date5, date6],
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 340, 200, 500, 250, 350]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
              format: xaxisformat
            }
        }
    }
});

Sorry for not making that clear earlier!

Derayne

Applied same code. First got the time in seconds, then formatted to d3.time format and then if loop for deciding xaxisformat. But no result. Showing NaN. – Singsong

Good point, I'd made a mistake (you don't actually need to use format=d3.time.format(...) at all here. I've updated the answer to clarify – Derayne