title: Trying to render data d3 crossfilter dc.js BarChart. The chart is drawn, but it's empty
body: <p>I must be doing something naive, but I can't get my data to render within the chart.</p>
  
  <p>here's my example data:</p>
  
  <pre><code>var data = [
      {    
         date: '02-12-2013',
         val: 13,
      }
      {    
         date: '02-13-2013',
         val: 6,
      }
      ...
  ]
  </code></pre>
  
  <p>here's my code:</p>
  
  <pre><code>var cf = crossfilter(data);
  var dim = cf.dimension(function(d){ return d.val });
  var group = dim.group();
  var barchart = dc.barChart('#container');
  
  barchart.width(850)
  .height(250)
  .margins({top: 10, right: 50, bottom: 30, left: 40})
  .dimension(dim)
  .group(group)
  .gap(1)
  .x(d3.time.scale()
            .domain([new Date(data[0].date), 
                    new Date(data[data.length-1].date)]))
  .xUnits(d3.time.day)
  .centerBar(true)
  .renderHorizontalGridLines(true)
  .renderVerticalGridLines(true)
  .render();
  </code></pre>
  
  <p>What am I missing here? Here's the screenshot of the chart:</p>
  
  <p><img src="https://i.stack.imgur.com/9ImRB.png" alt="Here&#39;s the screenshot of the chart"></p>