title: DC.js line graph configuration
body: <p>I am trying to create a line graph with that shows the average amount of people at certain hours of the day. I also wan to format the x axis to reflect and read midnight, 8am, Noon, 5pm, 8pm, and 11 pm. My chart keeps coming up blank and my axis is starting at 7pm for some reason. Any help is appreciated.</p>
  
  <p>I have partially answered my own question and can get the data count using the following:</p>
  
  <pre><code>ok, I have partially answered my own question. To get the count, I needed to change the following:
    var volumeByHour = crossfilterData.dimension(function(d) { 
          return d.datetime ? (d.datetime.getHours()):null;
  </code></pre>
  
  <p>});</p>
  
  <pre><code>var volumeByHourGroup = volumeByHour.group();
  </code></pre>
  
  <p>This gives me the raw number of visitors and I need the average....</p>
  
  <p>The data looks like this </p>
  
  <pre><code>[
     {
        "id":1,
        "sex":0,
        "age":65,
        "income":201428,
        "ethnicity":0,
        "datetime":"2009-04-26T00:00:00.000Z"
     },
     {
        "id":2,
        "sex":0,
        "age":75,
        "income":22851,
        "ethnicity":1,
        "datetime":"2009-04-26T01:00:00.000Z"
     },
     {
        "id":3,
        "sex":1,
        "age":27,
        "income":15672,
        "ethnicity":2,
        "datetime":"2009-04-26T02:00:00.000Z"
     },
     {
        "id":4,
        "sex":1,
        "age":69,
        "income":60719,
        "ethnicity":3,
        "datetime":"2009-04-26T03:00:00.000Z"
     },
     {
        "id":5,
        "sex":1,
        "age":18,
        "income":217262,
        "ethnicity":4,
        "datetime":"2009-04-26T04:00:00.000Z"
     },
     {
        "id":6,
        "sex":1,
        "age":76,
        "income":73308,
        "ethnicity":5,
        "datetime":"2009-04-26T05:00:00.000Z"
     },
     {
        "id":7,
        "sex":0,
        "age":51,
        "income":259663,
        "ethnicity":6,
        "datetime":"2009-04-26T06:00:00.000Z"
     },
     {
        "id":8,
        "sex":1,
        "age":42,
        "income":271168,
        "ethnicity":7,
        "datetime":"2009-04-26T07:00:00.000Z"
     },
     {
        "id":9,
        "sex":0,
        "age":42,
        "income":318753,
        "ethnicity":8,
        "datetime":"2009-04-26T08:00:00.000Z"
     },
     {
        "id":10,
        "sex":1,
        "age":94,
        "income":302247,
        "ethnicity":9,
        "datetime":"2009-04-26T09:00:00.000Z"
     },
     {
        "id":11,
        "sex":1,
        "age":94,
        "income":221124,
        "ethnicity":10,
        "datetime":"2009-04-26T10:00:00.000Z"
     },
     {
        "id":12,
        "sex":1,
        "age":56,
        "income":311643,
        "ethnicity":11,
        "datetime":"2009-04-26T11:00:00.000Z"
     },
     {
        "id":13,
        "sex":1,
        "age":79,
        "income":204746,
        "ethnicity":12,
        "datetime":"2009-04-26T12:00:00.000Z"
     },
     {
        "id":14,
        "sex":1,
        "age":54,
        "income":2451,
        "ethnicity":13,
        "datetime":"2009-04-26T13:00:00.000Z"
     },
     {
        "id":15,
        "sex":1,
        "age":100,
        "income":25213,
        "ethnicity":14,
        "datetime":"2009-04-26T14:00:00.000Z"
     },
     {
        "id":16,
        "sex":1,
        "age":71,
        "income":299937,
        "ethnicity":15,
        "datetime":"2009-04-26T15:00:00.000Z"
     },
     {
        "id":17,
        "sex":0,
        "age":91,
        "income":217957,
        "ethnicity":16,
        "datetime":"2009-04-26T16:00:00.000Z"
     },
     {
        "id":18,
        "sex":1,
        "age":98,
        "income":157079,
        "ethnicity":17,
        "datetime":"2009-04-26T17:00:00.000Z"
     },
     {
        "id":19,
        "sex":0,
        "age":57,
        "income":60152,
        "ethnicity":0,
        "datetime":"2009-04-26T18:00:00.000Z"
     },
     {
        "id":20,
        "sex":1,
        "age":94,
        "income":148961,
        "ethnicity":1,
        "datetime":"2009-04-26T19:00:00.000Z"
     },
     {
        "id":21,
        "sex":1,
        "age":29,
        "income":40591,
        "ethnicity":1,
        "datetime":"2009-04-26T20:00:00.000Z"
     }
  ]
  </code></pre>
  
  <p>and is being loaded and parsed like this:</p>
  
  <pre><code>/*createCrossfilter() - constructs a new crossfilter
   *  @data: our data returned by the loadData callback
   */
  function createCrossfilter(data, callback) {
      crossfilterData = crossfilter(data);
      crossfilterDataAll = crossfilterData.groupAll();
      if (callback !== undefined) {
          callback();
      }
  }
  
  /* loadData() - loads our dataset. a callback with our data when our data is ready to  be used.
   *  @pathToData: path to the dataset on the file system.
   */
  function loadData(pathToData) {
      d3.json(pathToData, function (data) {
          globalData = data;
  
          // parse JSON Strings - convert to real javascript objects
          data.forEach(function (e) {
              var parseDateTime = d3.time.format("%Y-%m%dT%I:%M:%S.%LZ");
                      e.datetime = parseDateTime.parse(e.datetime);
                  e.hour = d3.time.hour(e.datetime);
                  e.day = d3.time.day(e.datetime);
                  e.month = d3.time.month(e.datetime);
              });
  </code></pre>
  
  <p>and the code I have looks like this:</p>
  
  <pre><code>function createTimeOfDayChart() {
  // define an anchor point for the createTimeOfDayChart
  charts.timeOfDayChart = dc.lineChart("#dc-timeofday-chart");
  
  // create any dimensions
  var volumeByHour = crossfilterData.dimension(function(d) { 
              return d.datetime ? (d.datetime.getHours()):null;
  });
  
  // number of visitors per hour Chart
  var volumeByHourGroup = volumeByHour.group().reduceCount(function(d) {  
              return d.datetime ? (d.datetime.getHours()):null;
    });
  
  var timeExtent = d3.extent(globalData, function(d){
  
      return d.hour;
  });
  
  
  charts.timeOfDayChart
              .width(350)
              .height(225)
              .margins({ top: 0, left: 35, right: 45, bottom: 40 }) 
              .transitionDuration(500) 
              .dimension(volumeByHour) 
              .group(volumeByHourGroup)
            //.group(crossfilterData.groupAll()) 
              .valueAccessor(function(d){
                  return d.value.avg;
              })
              .elasticY(true)
              .elasticX(true)
              .x(d3.time.scale().domain(timeExtent.map(function(d) { return new Date(d);        }))
              .round(d3.time.hour.round)
              .xUnits(d3.time.hours)
              .renderHorizontalGridLines(true)
              .renderVerticalGridLines(true)
              .renderLabel(true)
              .renderArea(false)
              .brushOn(true)
              .renderLabel(true)
              .dotRadius(10)
  
              .renderlet(function(chart){
                  var colors =d3.scale.ordinal().domain(timeExtent)
                      .range(["steelblue", "brown", "red", "green", "yellow", "grey"]);
                  chart.selectAll('path.line').each(function(d){
                       d3.select(this).attr("style", "fill: " + colors(d.key)); 
                  });
              })
              .xAxis().ticks(6);
  </code></pre>