Understanding nvd3 x-axis date format

Question

how is the date (x xAxis) formatted as "1025409600000"? I have been studying their documentation but can not figure how this works, it would make my life easier if someone would help me to understand how to change this to a 'normal' date format, like MMDDYYYY

This is the chart: http://nvd3.org/ghpages/stackedArea.html

Documentation: https://github.com/mbostock/d3/wiki/Time-Formatting

Thanks

Klausenburg

The example you've linked to shows you how to use a different format. Can you give us a specific example that you're having trouble with? – Deprecatory

I'm having trouble with understanding how to input data into the chart, I now understand that the data it currently is reading is in Unix Epoch time. I'd rather have this be a human readable format such as MMDDYYYY. Trying to understand what changes I would have to make for the code to read and plot the data in a format that is easy to read/write, (not unix epoch time) – Klausenburg

Answer 1

I've interpreted your question as how does 1025409600000 get formatted to MMDDYY as that's what's happening in the NV example.

In the example you pointed to the x axis has the dates almost in the format you want %m/%d/%Y (or MMDDYY) x axis date is formatted in the following line:

chart.xAxis
     .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });

So the d3.time.format('%x') specifies the format of the date that is returned from (new Date(d)). The documentation you pointed at lets us know what the format will be and that is %x - date, as "%m/%d/%Y" which appears to be returning "%m/%d/%y". After reading the documentation I would have expected that the NV code would return the format you're after but you can easily get the format your after with:

d3.time.format('%m/%d/%Y')(new Date(d));

The new Date(d) takes the date data and converts it to a javascript date. The date data in the NV example is the number of milliseconds since 1 January 1970 00:00:00 UTC (Unix Epoch) -see this MDN page. You can check this your self by typing new Date(1025409600000) at the console.

To get D3 to recognise your date format whether that be %m/%d/%Y or anything else you need to create a time format and then parse your date data. This is covered in the D3 Time Formatting page you provided a link to and I'll just adapt what's there to your example.

Create the time format you need in:

var format = d3.time.format("%m/%d/%Y");

And the use that to parse your data:

format.parse(d.Date);

Without your code I can't say exactly where this needs to go but it should be pretty clear. You can also try this out at the console.

Hope this helps

Lalo

this helped a lot, but what I'm trying to understand is how to change the code to read %m/%d/%y format, I'm trying to input data into this chart, and would rather not have to convert my date data to Unix Epoch to feed it to the graph. Would you know how to switch what format it reads the data? Many thanks – Klausenburg

Hi @user1614080, what if I have a date data from my database and formatted as 2016-04-28. How can I convert that into something like 1025409600000 format to fit in to the chart? – Chastise

@LekzFlores I dont know which DB engine you use, but you can check on Google how to convert you date into Unix Time Stamp format and you should have your answer. – Godlike