DC Stacked Line Chart

by Gordon Woodhull

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.32/dc.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.css">

<div id="my-chart"></div>

JavaScript

var data = [
 { Type: 'T', Date: "2018-01-01", DocCount: 10, Day: 1},
 { Type: 'E', Date: "2018-01-01", DocCount: 10, Day: 1},
 { Type: 'T', Date: "2018-01-02", DocCount: 20, Day: 2},
 { Type: 'E', Date: "2018-01-02", DocCount: 20, Day: 2},
 { Type: 'T', Date: "2018-01-03", DocCount: 20, Day: 3},
 { Type: 'E', Date: "2018-01-03", DocCount: 10, Day: 3},
 { Type: 'T', Date: "2018-01-04", DocCount: 10, Day: 4},
 { Type: 'E', Date: "2018-01-04", DocCount: 10, Day: 4},
 { Type: 'T', Date: "2018-01-05", DocCount: 20, Day: 5},
 { Type: 'E', Date: "2018-01-05", DocCount: 20, Day: 5},
 { Type: 'T', Date: "2018-01-06", DocCount: 0, Day: 6},
 { Type: 'E', Date: "2018-01-06", DocCount: 0, Day: 6},
 { Type: 'T', Date: "2018-01-07", DocCount: 0, Day: 7},
 { Type: 'E', Date: "2018-01-07", DocCount: 0, Day: 7},
 { Type: 'T', Date: "2018-01-08", DocCount: 20, Day: 1},
 { Type: 'E', Date: "2018-01-08", DocCount: 20, Day: 1},
 { Type: 'T', Date: "2018-01-09", DocCount: 10, Day: 2},
 { Type: 'E', Date: "2018-01-09", DocCount: 20, Day: 2},
 { Type: 'T', Date: "2018-01-10", DocCount: 20, Day: 3},
 { Type: 'E', Date: "2018-01-10", DocCount: 20, Day: 3}
]
        
function remove_empty_bins(source_group) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                //return Math.abs(d.value) > 0.00001; // if using floating-point numbers
                return d.value.count !== 0; // if integers only
            });
        }
    };
}

var parseDate = d3.time.format("%Y-%m-%d").parse;

data.forEach(function(d) {
    d.Date = parseDate(d.Date);
});

// setup crossfilter
var ndx  = crossfilter(data);

// create dimension
var dateDim = ndx.dimension(function(d) { return d["Date"]; });

// create data groups
var tGroup = dateDim.group().reduce(
	function(p, v) {
  	if(v.Type == "T") {
    	p.count += v.DocCount;
    }
    return p;
  },
  function(p, v) {
  	if(v.Type == "T") {
    	p.count -= v.DocCount;
    }
    return p;
  },
 ...