formatting the date in nvd3.js

Question

How can I make the date format in nvd3.js. For example:

data1 = [{
  "values": [{
    "x": 1374561814000,
    "y": 2
  }],
  "key": "x-axis"
}]

1374561814000 what does it mean, how its converted from a date?

Shugart

Answer 1

The date 1374561814000 is currently Unix Time Stamp.

You can define how you want the date to be displayed in your when passed into your chart. Have a read on the d3 guide to Time formatting it will give you a better understanding.

chart.xAxis.tickFormat(function(d) {
    // Will Return the date, as "%m/%d/%Y"(08/06/13)
    return d3.time.format('%x')(new Date(d))
});

Or you may want to return the date stamp showing the date/month/year, for that you could simply do:

return d3.time.format('%d/%m/%y')(new Date(d))

Lets say you want the unix time stamp to return the date as Time in miniutes and hours hours it would simply be :

return d3.time.format('%X')(new Date(d)) // Capital X

The above examples have been tested HERE, have a play around using the values below(taken from the d3 time formatting docs).

Constructs a new local time formatter using the given specifier. The specifier string may contain the following directives.     

 - %a - abbreviated weekday name.
 - %A - full weekday name.
 - %b - abbreviated month name.
 - %B - full month name.
 - %c - date and time, as "%a %b %e %H:%M:%S %Y".
 - %d - zero-padded day of the month as a decimal number [01,31].
 - %e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
 - %H - hour (24-hour clock) as a decimal number [00,23].
 - %I - hour (12-hour clock) as a decimal number [01,12].
 - %j - day of the year as a decimal number [001,366].
 - %m - month as a decimal number [01,12].
 - %M - minute as a decimal number [00,59].
 - %L - milliseconds as a decimal number [000, 999].
 - %p - either AM or PM.
 - %S - second as a decimal number [00,61].
 - %U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
 - %w - weekday as a decimal number [0(Sunday),6].
 - %W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
 - %x - date, as "%m/%d/%Y".
 - %X - time, as "%H:%M:%S".
 - %y - year without century as a decimal number [00,99].
 - %Y - year with century as a decimal number.
 - %Z - time zone offset, such as "-0700".
 - %% - a literal "%" character.

Hope it helps.

And if other members feel this needs improvement, please go ahead and improve the answer.

Teenybopper

I understood. Thanks for the help. In x-axis the date is showing in the d/m/y format. But when I am trying to mouse over on a particular coordinate, its showing NaN/NaN/NaN. What may be the issue? – Shugart