D3 not draw data on line graph

Question

I'm trying to create a d3 line chart. The tutorials I'm following produce graphs, with the sample data they provide, but when I plug in my data, the chart does not produce lines, nor does the x axis have any values.

I guess this has something to do with the x-axis being dates/ formatting (I may also decide to do just month and year), but I've spent days trying to figure out how and nothing.

Here is a jsfiddle reproducing the problem. The tutorial data that produces a line is commented out. My data is stored in the data variable.

Any idea as to what is going on?

       var data = [{
            "date":"January 1, 2008","total":'33'},
            {"date":"February 1, 2008","total":'40'},
            {"date":"March 1, 2008","total":'46'},
            {"date":"April 1, 2008","total":'281'},
            {"date":"May 1, 2008","total":'354'},
            {"date":"June 1, 2008","total":'620'},
            {"date":"July 1, 2008","total":'368'},
            {"date":"August 1, 2008","total":'323'}];


            var chart = d3.select('#chartCanvas'),
                    WIDTH=1000,
                    HEIGHT=500,
                    MARGINS= {
                        top:20,
                        right: 20,
                        bottom: 20,
                        left: 50
                     };

            //THIS DOES NOT WORK
            // var parseDate = d3.time.format("%d-%b-%y").parse;    
            //  data.forEach(function(d) {
            //  d.date = Date(parseDate(d.date))
              //});

            xScale = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain(d3.extent(data, function(d) { return d.date; }));

            yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([1, d3.max(data, function(d) { return d.total; })]);



                xAxis = d3.svg.axis()
                .scale(xScale),

                yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");



                chart.append("svg:g")
                .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                .call(xAxis);

                chart.append("svg:g")
                .attr("transform", "translate(" + (MARGINS.left) + ",0)")
                .call(yAxis);


               var lineGen = d3.svg.line()
                .x(function(d) {
                    return xScale(d.date);
                })
                .y(function(d) {
                    return yScale(d.total);
                });

               chart.append('svg:path')
                  .attr('d', lineGen(data))
                  .attr('stroke', 'green')
                  .attr('stroke-width', 2)
                  .attr('fill', 'none');

Answer 1

The dates are strings, but D3 needs some kind of numbers (which Dates are as well). By changing d.date to new Date(d.date) in the two ocurrences in your code it works: http://jsfiddle.net/mmpe5hj1/1/

// THIS DATA SET PRODUCES LINES
/* 
var data = [{
    "total": "202",
    "date": "2000"
}, {
    "total": "215",
    "date": "2001"
}, {
    "total": "179",
    "date": "2002"
}, {
    "total": "199",
    "date": "2003"
}, {
    "total": "134",
    "date": "2003"
}, {
    "total": "176",
    "date": "2010"
}];

*/

//THIS DATA SET DOES NOT PRODUCE LINES OR X AXIS LABELS

var data = [{
"date":"January 1, 2008","total":'33'},
{"date":"February 1, 2008","total":'40'},
{"date":"March 1, 2008","total":'46'},
{"date":"April 1, 2008","total":'281'},
{"date":"May 1, 2008","total":'354'},
{"date":"June 1, 2008","total":'620'},
{"date":"July 1, 2008","total":'368'},
{"date":"August 1, 2008","total":'323'}];


var chart = d3.select('#chartCanvas'),
        WIDTH=1000,
        HEIGHT=500,
        MARGINS= {
            top:20,
            right: 20,
            bottom: 20,
            left: 50
         };

//THIS DOES NOT WORK
// var parseDate = d3.time.format("%d-%b-%y").parse;    
//  data.forEach(function(d) {
//  d.date = Date(parseDate(d.date))
  //});
    
xScale = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain(d3.extent(data, function(d) { return new Date(d.date); }));
    
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([1, d3.max(data, function(d) { return d.total; })]);
    

    
    xAxis = d3.svg.axis()
    .scale(xScale),
  
    yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");
    
    
    
    chart.append("svg:g")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis);
    
    chart.append("svg:g")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);
    
    
   var lineGen = d3.svg.line()
    .x(function(d) {
        return xScale(new Date(d.date));
    })
    .y(function(d) {
        return yScale(d.total);
    });
    
   chart.append('svg:path')
      .attr('d', lineGen(data))
      .attr('stroke', 'green')
      .attr('stroke-width', 2)
      .attr('fill', 'none');

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="main_content">
    <div class="chart">
      <!--Create SVG canvas -->
      <svg id="chartCanvas" width="1000" height="500">
      </svg>
     

    </div>
    
</div>