If you are using a date in the form of milliseconds does it need to be converted to a string in order for the Date object to recognize it?

"values":[ {x:1390636800000 , y:12} , 
           { x:1390640400000 , y:17} , 
           { x:1390644000000 , y:17}, 
           { x:1390647600000 , y:15}, 
           { x:1390651200000 , y:8} ]

If so, how would i go about converting it so that it is used properly by

chart.xAxis
 .axisLabel("Time (s)")
 .tickFormat(function(d){return d3.time.format('%I%p')(new Date(d))});

and it doesn't spit out the December/31/1969 date? I tried to stringify the whole object but that didn't work. Any suggestions? Thanks for any help,and sorry if this is a silly question

(edit) this is the working code i am using that doesn't correctly display the time

var chart;

nv.addGraph(function() {
  chart = nv.models.lineChart()
  .options({
   margin: {left: 100, bottom: 100},
   x: function(d,i) { return i},
   showXAxis: true,
   showYAxis: true,
   transitionDuration: 250
 })
 ;

 chart.xAxis
   .axisLabel("Time (s)")
   .tickFormat(function(d){return d3.time.format('%m/%d/%y')(new Date(d))});

 chart.yAxis
   .tickFormat(d3.format('d'))
   ;

 d3.select('#chart1 svg')
   .datum(data1())
   .call(chart);

 nv.utils.windowResize(chart.update);


 chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e));    });

 return chart;
});

function data1() {

 return  [
   {
     "values":[ {x:1390636800000 , y:12} , { x:1390640400000 , y:17} , { x:1390644000000 , y:17}, { x:1390647600000 , y:15}, { x:1390651200000 , y:8} ],
  "key": "First Dude "
},
{
  "values": [ { x:1390636800000 , y:16} , { x:1390640400000 , y:16} , { x:1390644000000 , y:16}, { x:1390647600000 , y:12}, { x:1390651200000 , y:5}],
  "key": "Second Dude "
},
{
  "values": [ { x:1390636800000 , y:5} , { x:1390640400000 , y:5} , { x:1390644000000 , y:5}, { x:1390647600000 , y:3}, { x:1390651200000 , y:1}],
  "key": "Third Dude "
}
,
{
  "values": [ { x:1390636800000 , y:8} , { x:1390640400000 , y:18} , { x:1390644000000 , y:18}, { x:1390647600000 , y:9}, { x:1390651200000 , y:7}],
  "key": "Fourth Dude "
}
 ];

}

If you are using a date in the form of milliseconds does it need to be converted to a string in order for the Date object to recognize it?

"values":[ {x:1390636800000 , y:12} , 
           { x:1390640400000 , y:17} , 
           { x:1390644000000 , y:17}, 
           { x:1390647600000 , y:15}, 
           { x:1390651200000 , y:8} ]

If so, how would i go about converting it so that it is used properly by

chart.xAxis
 .axisLabel("Time (s)")
 .tickFormat(function(d){return d3.time.format('%I%p')(new Date(d))});

and it doesn't spit out the December/31/1969 date? I tried to stringify the whole object but that didn't work. Any suggestions? Thanks for any help,and sorry if this is a silly question

(edit) this is the working code i am using that doesn't correctly display the time

var chart;

nv.addGraph(function() {
  chart = nv.models.lineChart()
  .options({
   margin: {left: 100, bottom: 100},
   x: function(d,i) { return i},
   showXAxis: true,
   showYAxis: true,
   transitionDuration: 250
 })
 ;

 chart.xAxis
   .axisLabel("Time (s)")
   .tickFormat(function(d){return d3.time.format('%m/%d/%y')(new Date(d))});

 chart.yAxis
   .tickFormat(d3.format('d'))
   ;

 d3.select('#chart1 svg')
   .datum(data1())
   .call(chart);

 nv.utils.windowResize(chart.update);


 chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e));    });

 return chart;
});

function data1() {

 return  [
   {
     "values":[ {x:1390636800000 , y:12} , { x:1390640400000 , y:17} , { x:1390644000000 , y:17}, { x:1390647600000 , y:15}, { x:1390651200000 , y:8} ],
  "key": "First Dude "
},
{
  "values": [ { x:1390636800000 , y:16} , { x:1390640400000 , y:16} , { x:1390644000000 , y:16}, { x:1390647600000 , y:12}, { x:1390651200000 , y:5}],
  "key": "Second Dude "
},
{
  "values": [ { x:1390636800000 , y:5} , { x:1390640400000 , y:5} , { x:1390644000000 , y:5}, { x:1390647600000 , y:3}, { x:1390651200000 , y:1}],
  "key": "Third Dude "
}
,
{
  "values": [ { x:1390636800000 , y:8} , { x:1390640400000 , y:18} , { x:1390644000000 , y:18}, { x:1390647600000 , y:9}, { x:1390651200000 , y:7}],
  "key": "Fourth Dude "
}
 ];

}

• javascript
• date
• d3.js
• nvd3.js

Share Follow edited Jan 20, 2014 at 6:07 AmeliaBR 27.5k66 gold badges9090 silver badges122122 bronze badges asked Jan 20, 2014 at 4:49 DiamonWDiamonW 25922 gold badges66 silver badges1212 bronze badges 6

• I suspect there is something else going on. Are you able to put together a short working example of the problem? In particular, what sort of values does the axis print if you don't specify any format? – AmeliaBR Commented Jan 20, 2014 at 5:29
• One quick thing: as @RobG points out, the number has to be an actual number, and not a string in the shape of a number. So try adding a + sign in front of the d like (new Date(+d)) to make sure its correctly converted. – AmeliaBR Commented Jan 20, 2014 at 5:34
• using (new Date(+d)) had no effect – DiamonW Commented Jan 20, 2014 at 5:45
• 1 The problem is this line x: function(d,i) { return i}; you are telling it to use the index value as the x value, instead of using the data x value. So your tick formatting function is getting passed values of 0-100, which all get interpreted as the "zero date". Change that one line to x: function(d,i) { return d.x} (or leave it out altogether -- that's the NVD3 default) and you're good to go. – AmeliaBR Commented Jan 20, 2014 at 6:06
• 1 P.S. Please use the "nvd3.js" tag when asking questions about their graph functions; some things are easier to do when working with their library, some are harder. – AmeliaBR Commented Jan 20, 2014 at 6:07

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

If you are using a date in the form of milliseconds does it need to be converted to a string in order for the Date object to recognize it?

No, the value must be a Number (e.g. 1390636800000 not "1390636800000"). If a string is provided, Date will attempt to parse it.

Where a time value is provided to the Date constructor, it is assumed to be milliseconds since 1970-01-01T00:00:00Z. That is, UTC.

So if you are in a timezone of say UTC -5:00, then

new Date(0);

will return an object with a local date and time of 1969-12-31T19:00:00UTC-05:00

Date doesn't need the number of millisecounds to be cast as a string:

> new Date(1390651200000)
Sat Jan 25 2014 07:00:00 GMT-0500 (EST)

To print the time in the format you're looking for, you need to change the specifier string:

> d3.time.format('%I%p')(new Date(1390640400000))
"04AM"
> d3.time.format('%B/%d/%Y')(new Date(1390640400000))
"January/25/2014"