title: Time Parse Error in d3.js?
body: <p>I'm trying to run a basic d3.js line graph but I keep getting an error in the function <code>d3_time_parse</code>. The example I'm attempting to copy is here: <a href="http://bl.ocks.org/d3noob/b3ff6ae1c120eea654b5" rel="nofollow">http://bl.ocks.org/d3noob/b3ff6ae1c120eea654b5</a></p>
  
  <p>Specifically, the error is <code>d3.v3.js:2550 Uncaught TypeError: Cannot read property 'length' of undefined</code> corresponding to</p>
  
  <pre><code>2549: function d3_time_parse(date, template, string, j) {
  2550:    var c, p, t, i = 0, n = template.length, m = string.length;
  </code></pre>
  
  <p>My code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt; /* set the CSS */
  
  body { font: 12px Arial;}
  
  path { 
      stroke: steelblue;
      stroke-width: 2;
      fill: none;
  }
  
  .axis path,
  .axis line {
      fill: none;
      stroke: grey;
      stroke-width: 1;
      shape-rendering: crispEdges;
  }
  
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;!-- load the d3.js library --&gt;    
  &lt;script src="http://d3js.org/d3.v3.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  // Set the dimensions of the canvas / graph
  var margin = {top: 30, right: 20, bottom: 30, left: 50},
      width = 600 - margin.left - margin.right,
      height = 270 - margin.top - margin.bottom;
  
  // Parse the date / time
  var parseDate = d3.time.format("%d-%b-%y").parse;
  
  // Set the ranges
  var x = d3.time.scale().range([0, width]);
  var y = d3.scale.linear().range([height, 0]);
  
  // Define the axes
  var xAxis = d3.svg.axis().scale(x)
      .orient("bottom").ticks(5);
  
  var yAxis = d3.svg.axis().scale(y)
      .orient("left").ticks(5);
  
  // Define the line
  var valueline = d3.svg.line()
      .x(function(d) { return x(d.date); })
      .y(function(d) { return y(d.close); });
  
  // Adds the svg canvas
  var svg = d3.select("body")
      .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
      .append("g")
          .attr("transform", 
                "translate(" + margin.left + "," + margin.top + ")");
  
  // Get the data
  d3.csv("data.csv", function(error, data) {
      data.forEach(function(d) {
          d.date = parseDate(d.date);
          d.close = +d.close;
      });
  
      // Scale the range of the data
      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain([0, d3.max(data, function(d) { return d.close; })]);
  
      // Add the valueline path.
      svg.append("path")
          .attr("class", "line")
          .attr("d", valueline(data));
  
      // Add the X Axis
      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
  
      // Add the Y Axis
      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis);
  
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>data.csv</p>
  
  <pre><code>date,close
  1-May-12,58.13
  30-Apr-12,53.98
  27-Apr-12,67.00
  26-Apr-12,89.70
  25-Apr-12,99.00
  24-Apr-12,130.28
  23-Apr-12,166.70
  20-Apr-12,234.98
  19-Apr-12,345.44
  18-Apr-12,443.34
  17-Apr-12,543.70
  16-Apr-12,580.13
  13-Apr-12,605.23
  12-Apr-12,622.77
  11-Apr-12,626.20
  10-Apr-12,628.44
  9-Apr-12,636.23
  5-Apr-12,633.68
  4-Apr-12,624.31
  3-Apr-12,629.32
  2-Apr-12,618.63
  30-Mar-12,599.55
  29-Mar-12,609.86
  28-Mar-12,617.62
  27-Mar-12,614.48
  26-Mar-12,606.98
  </code></pre>
  
  <p>A few users have asked similar questions, and the issues were fixed after correcting the time format used in <code>var parseDate</code> and making sure the CSV values are separated by commas. I've checked for these issues and still no luck.</p>