nvd3 graph not loading properly in firefox

Question

See here for a JSFiddle of the simple example that's not loading correctly for me in Firefox. It works perfectly on JSFiddle and in Chrome, but not in Firefox.

In Firefox it just draws some lines on the very left of the graph, i.e. on the y-axis basically, and says that the start time is 31-12-1969 23:59:59.

Makes me think that there might be something different in how Firefox creates Javascript dates? A longshot...

Can anyone shed any light on why that might be?

The code is here:

   nv.addGraph(function() {
      var chart = nv.models.lineChart()
        .margin({left: 100, bottom: 120})  
        .useInteractiveGuideline(true)  
        .transitionDuration(350)  
        .showLegend(true)       
        .showYAxis(true)        
        .showXAxis(true);

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

      chart.yAxis
        .axisLabel('Latency (ms)')
        .tickFormat(d3.format('.0f'));

      var service1Data = {"values":[{"x":"2014-03-03 10:00:00 UTC","y":100},{"x":"2014-03-03 11:00:00 UTC","y":200},{"x":"2014-03-03 20:00:00 UTC","y":50}],"key":"service1","color":"#ff7f0e"};
      var service2Data = {"values":[{"x":"2014-03-03 10:00:00 UTC","y":200},{"x":"2014-03-03 11:00:00 UTC","y":300}],"key":"service2","color":"#3c9fad"};


      // Make the dates easy for d3 to work with
      service1Data["values"].forEach(function(hash) {
        hash["x"] = new Date(hash["x"]);
      });

      service2Data["values"].forEach(function(hash) {
        hash["x"] = new Date(hash["x"]);
      });

      var serviceData = [service1Data, service2Data];

      d3.select('#chart_latency svg')    
        .datum(serviceData)         
        .call(chart);

      //Update the chart when window resizes.
      nv.utils.windowResize(function() { chart.update() });
      return chart;
    });

Answer 1

You're relying on the browser's internal Date constructor to create the date from the string, and therefore on its internal Date parsing function. And while Chrome is able to figure out your non-standard date string, Firefox can't.

You can avoid the ambiguity by using a D3 date format object to do the date parsing:

var dateFormatIn =  d3.time.format.utc('%Y-%m-%d %H:%M:%S UTC');

  service2Data["values"].forEach(function(hash) {
    hash["x"] =  dateFormatIn.parse(hash["x"]);
  });

http://jsfiddle.net/yzA32/4/

By the way, instead of using a for loop to go through your data arrays and parse the dates, you can just set an x-accessor function on your chart object:

      var chart = nv.models.lineChart()
            .x(function(d){return dateFormatIn.parse(d.x);})

http://jsfiddle.net/yzA32/5/