title: D3 JS Time Format
body: <p>I have made a pan &amp; zoom graph which takes dates from a database and plots them on the X axis. Then I need to add a line chart over the top, but I am having difficulty figuring out what's wrong with the dates I'm using.</p>
  
  <p>This is the code I have:</p>
  
  <pre><code>/****
    *
    * Set the variables
    *
    ****/
  
    var totalValues = data.length,
        maxValue = 0,
        maxValueTarget = 0,
        maxConsumption = 0;
  
    data.forEach(function(d) {
  
      if (Math.max(d.value, d.target) &gt; maxValue) {
        maxValue = Math.max(d.value, d.target);
      }
  
      if (Math.max(d.value) &gt; maxConsumption) {
        maxConsumption = Math.max(d.value);
        maxValueTarget = maxConsumption - d.target;
      }
  
    });
  
    var dateRange = d3.extent(data, function(d){ 
      console.log('dateRange', d3.time.format("%Y-%m-%d %H:%M%:%S")(new Date(d.date)));
      return d3.time.format("%Y-%m-%d %H:%M%:%S")(new Date(d.date)); 
    });
  
    // Set the margin values for the graph
    var margin = {top: 60, right: 20, bottom: 30, left: 60},
        width = $('.svg-container').width() - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
  
    var x = d3.time.scale()
          .domain([dateRange[0], dateRange[1]])
          .range([0, width]);
  
    var y = d3.scale.linear()
        .domain([0, maxValue])
        .range([height, 0]);
  
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickSize(-height);
  
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(5)
        .tickSize(-width);
  
    var valueline = d3.svg.line()
      .x(function(d,i) { 
        // console.log('d.date', d.date); 
        // console.log('x .date',x(getDate(d))); 
        console.log('valueline', d3.time.format("%Y-%m-%d %H:%M%:%S")(new Date(d.date)));
        return x(d3.time.format("%Y-%m-%d %H:%M%:%S")(new Date(d.date))) 
      })
      .y(function(d) { 
        return y(d.target); 
      });
  
    var zoom = d3.behavior.zoom()
        .x(x)
        .scaleExtent([-5, 200])
        .on("zoom", zoomed);
  
    // Set up the svg canvas
    var svg = d3.select(".svg-container svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .call(zoom);
  
    svg.append("rect")
        .attr("width", width)
        .attr("height", height);
  
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
  
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);
  
    svg.append("path")    // Add the valueline path.
        .attr("class", "line target-profile")
        .attr("d", valueline(data));
  
    d3.select("button").on("click", reset);
  
    function zoomed() {
      svg.select(".x.axis").call(xAxis);
      svg.select(".y.axis").call(yAxis);
    }
  
    function reset() {
      d3.transition().duration(750).tween("zoom", function() {
        var ix = d3.interpolate(x.domain(), [-width / 2, width / 2]),
            iy = d3.interpolate(y.domain(), [-height / 2, height / 2]);
        return function(t) {
          zoom.x(x.domain(ix(t))).y(y.domain(iy(t)));
          zoomed();
        };
      });
    }
  </code></pre>
  
  <p>Example data from the console logs:</p>
  
  <pre><code>Error: Problem parsing d="MNaN,336.85547908946535LNaN,74.44679724722073LNaN,103.31392271042881LNaN,99.19004764425625LNaN,95.71731074642668LNaN,80.95817893065112LNaN,118.94123875066174LNaN,112.64690312334568LNaN,99.62413975648491LNaN,91.37638962413979LNaN,92.67866596082587LNaN,114.6003176283748LNaN,116.7707781895183LNaN,102.8798305982001LNaN,81.17522498676544LNaN,103.09687665431443LNaN,96.15140285865533LNaN,122.19692959237693LNaN,108.95712016940183LNaN,94.84912652196931LNaN,114.38327157226047LNaN,79.87294865007937LNaN,87.25251455796723LNaN,84.64796188459502LNaN,71.62519851773425LNaN,61.64107993647434LNaN,87.90365272631021LNaN,84.21386977236631LNaN,80.08999470619375LNaN,117.6389624139756LNaN,95.50026469031235LNaN,79.22181048173638LNaN,90.07411328745371LNaN,80.30704076230813LNaN,112.64690312334568LNaN,73.14452091053465LNaN,66.85018528321865LNaN,78.35362625727902LNaN,105.05029115934354LNaN,86.38433033350981LNaN,101.36050820539964LNaN,65.76495500264696LNaN,90.50820539968237LNaN,87.46956061408156LNaN,57.73425092641611LNaN,90.29115934356804LNaN,133.48332451032292LNaN,97.67072525145579LNaN,60.9899417681313LNaN,144.98676548438328LNaN,81.17522498676544LNaN,85.73319216516677LNaN,89.85706723133939LNaN,80.95817893065112LNaN,80.08999470619375LNaN,93.98094229751194LNaN,101.79460031762835LNaN,88.12069878242454LNaN,90.29115934356804LNaN,0LNaN,112.4298570672313LNaN,52.95923769190051LNaN,104.83324510322922LNaN,125.01852832186341LNaN,73.36156696664904LNaN,117.42191635786128LNaN,77.9195341450503LNaN,115.46850185283222LNaN,121.97988353626255LNaN,91.59343568025412LNaN,68.36950767601905LNaN,67.50132345156169LNaN,97.23663313922708LNaN,94.41503440974066LNaN,93.76389624139756LNaN,119.59237691900478LNaN,121.11169931180518LNaN,88.98888300688196LNaN,123.28215987294863LNaN,78.35362625727902LNaN,103.5309687665432LNaN,139.5606140815246LNaN,47.53308628904182LNaN,85.08205399682367LNaN,66.41609317098994LNaN,97.01958708311275LNaN,111.3446267866596LNaN,127.40603493912124LNaN,100.70937003705666LNaN,121.11169931180518LNaN,95.71731074642668LNaN,95.50026469031235LNaN,97.23663313922708LNaN,98.32186341979889LNaN,65.33086289041819LNaN,67.06723133933298LNaN,105.05029115934354LNaN,118.2901005823187LNaN,94.84912652196931LNaN,54.04446797247226LNaN,83.12863949179462LNaN,117.20487030174695LNaN,116.11964002117526LNaN,84.43091582848069LNaN,87.25251455796723LNaN,100.49232398094227LNaN,70.5399682371625LNaN,189.48120698782427"
  </code></pre>
  
  <p>As you can see, the value of the x .date console log is always the same, as it looks as though nothing is being plotted on the graph. Could someone tell me where I'm going wrong please?</p>