Accepted answer

I have finally found the answer, for safari, the date time format needs to be as follows in your json


This question I found lead me to the answer Safari Javascript Date() NaN Issue (yyyy-MM-dd HH:mm:ss)


A few things I noticed when playing with your code.

In parts of your dataset for key: 'Upload' you have got the the values for 'x' inside single quotes, would be good to keep it consistent in your dataset. I normally DO NOT use the single quotes for x.

The reason you are getting 0NaN is because you are passing the date as a STRING and NOT a DATE object.

So here is what I added to your code :

var chart = nv.models.lineChart(); //Create instance of nvd3 lineChart  

// Convert the date passed as a STRING into a DATE object
chart.x(function(d) {     
  return new Date(d.x);

Here is a working version of your code here.

I would suggest formatting your dates in the X Axis to avoid them overlapping with each other. You can find more about time formatting using d3.js here

UPDATED working version with your code here

To fix the NaN issue on Safari browser you can format the time accordingly

  chart.xAxis.tickFormat(function(d) {
    return d3.time.format('%Y-%m-%dT%H:%M:%S')(new Date(d));

Hope this helps

Related Query