title: dc.js create dataTable with min max avg values for three columns
body: <p>Attempting to create a d3/dc/xfilter dataTable with the min, max and average values for 3 of the columns in the sample data. Been struggling for hours but unable to understand how to integrate the reduceAdd, reduceRemove, reduceInitial functions into the dataTable to create the three necessary rows.</p>
  
  <p>Desired output will look something like this:</p>
  
  <pre><code>------------------------------------------
  |  Value   |  Cars  |  Bikes  |  Trucks  |
  ------------------------------------------
  |    Min   |   125  |   310   |    189   |
  ------------------------------------------
  |    Max   |   230  |   445   |    290   |
  ------------------------------------------
  |    Avg   |   178  |   385   |    245   |
  ------------------------------------------
  </code></pre>
  
  <p>Also cannot see how to add the first (label) column. I know reduceInitial can return an array (e.g. <code>['min', 'max', 'avg']</code>) but how to reference the labels from it?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var myCSV = [ 
  {"shift":"1","date":"01/01/2016/08/00/00","car":"178","truck":"255","bike":"317","moto":"237"},
  {"shift":"2","date":"01/01/2016/17/00/00","car":"125","truck":"189","bike":"445","moto":"273"},
  {"shift":"3","date":"02/01/2016/08/00/00","car":"140","truck":"219","bike":"328","moto":"412"},
  {"shift":"4","date":"02/01/2016/17/00/00","car":"222","truck":"290","bike":"432","moto":"378"},
  {"shift":"5","date":"03/01/2016/08/00/00","car":"200","truck":"250","bike":"420","moto":"319"},
  {"shift":"6","date":"03/01/2016/17/00/00","car":"230","truck":"220","bike":"310","moto":"413"},
  {"shift":"7","date":"04/01/2016/08/00/00","car":"155","truck":"177","bike":"377","moto":"180"},
  {"shift":"8","date":"04/01/2016/17/00/00","car":"179","truck":"203","bike":"405","moto":"222"},
  {"shift":"9","date":"05/01/2016/08/00/00","car":"208","truck":"185","bike":"360","moto":"195"},
  {"shift":"10","date":"05/01/2016/17/00/00","car":"150","truck":"290","bike":"315","moto":"280"},
  {"shift":"11","date":"06/01/2016/08/00/00","car":"200","truck":"220","bike":"350","moto":"205"},
  {"shift":"12","date":"06/01/2016/17/00/00","car":"230","truck":"170","bike":"390","moto":"400"},
  ];
  
  
  dataTable = dc.dataTable('#dataTable');
  lc1 = dc.lineChart("#line1");
  lc2 = dc.lineChart("#line2");
  lc3 = dc.lineChart("#line3");
  
  var dateFormat = d3.time.format("%d/%m/%Y/%H/%M/%S");
  
  myCSV.forEach(function (d) {
   d.date = dateFormat.parse(d.date);
  });
  
  myCSV.forEach(function (d) {
   d['car'] = +d['car'];
   d['bike'] = +d['bike'];
   d['moto'] = +d['moto'];
  });
  
  //console.log(myCSV);
  
  var facts = crossfilter(myCSV);
  var dateDim = facts.dimension(function (d) {return d.date});
  
  var carDim = facts.dimension(function (d) {return d['car']});
  var dgCar = dateDim.group().reduceSum(function (d) {return d['car']});
  
  var bikeDim = facts.dimension(function (d) {return d['bike']});
  var dgBike = dateDim.group().reduceSum(function (d) {return d['bike']});
  
  var motoDim = facts.dimension(function (d) {return d['moto']});
  var dgMoto = dateDim.group().reduceSum(function (d) {return d['moto']});
  
  var minDate = new Date ("2016-01-01T08:00:00.000Z");
  var maxDate = new Date ("2016-01-03T17:00:00.000Z"); 
  
  var maxY = d3.max(myCSV, function(d) {return d['car']});
  
  function reduceAdd(i,d){ return i+1; }
  function reduceRemove(i,d){return i-1; }
  function reduceInitial(){ return ['min','max','avg'];}
  
  
  dataTable
    .width(jsTablWidth)
    .height(400)
    .dimension(dateDim)
    .group( function(d){return '';} )
    .columns([
      {
        label: 'Value',
        format: function(d) { return dateGroup1.reduce(reduceAdd,reduceRemove,reduceInital); }
      },
      {
        label: tSel1.replace(/_/g, " "),
        format: function(d) { return //avg cars ; }
      },
      {
        label: tSel2.replace(/_/g, " "),
        format: function(d) { return //avg bikes ; }
      },
      {
        label: tSel3.replace(/_/g, " "),
        format: function(d) { return //avg moto; }
      }
    ]);
  
  
  dc.renderAll();
  dc.redrawAll();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg{height:280px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://dc-js.github.io/dc.js/js/dc.js"&gt;&lt;/script&gt;
  &lt;link href="http://dc-js.github.io/dc.js/css/dc.css" rel="stylesheet"/&gt;
  
  &lt;svg id="dataTable"&gt;&lt;/svg&gt;
  &lt;svg id="line1"&gt;&lt;/svg&gt;
  &lt;svg id="line2"&gt;&lt;/svg&gt;
  &lt;svg id="line3"&gt;&lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>