Login Time

by DJ Martin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
<link rel="stylesheet" href="https://dc-js.github.io/dc.js/css/dc.css">
<div id="chart"></div>

CSS

#chart svg {
        shape-rendering: crispEdges;
    }
    #chart svg g g.axis.x path.domain { display: none; }
    #chart svg g g.axis.y path.domain { display: none; }
    #chart svg g g.axis.x .tick line { display: none; }
    #chart svg g g.axis.y .tick line { display: none; }   
    #chart .grid-line line {
        opacity: 1;
        stroke: #dcdcdc;
    } 
    #chart g.chart-body rect.bar { fill-opacity: 0.5 }
    #chart g.chart-body rect.bar:last-of-type { fill-opacity: 1.0 }

JavaScript

var data = [
        {"date": "2015/09/09", "loginTime": 3.75, "incentiveTime": 0.5},
        {"date": "2015/10/10", "loginTime": 4.4, "incentiveTime": 2},
        {"date": "2015/11/11", "loginTime": 3.75, "incentiveTime": 1},
        {"date": "2015/12/12", "loginTime": 4.75, "incentiveTime": 1}
     ];
    dateFormat = d3.time.format("%Y/%m/%d");
    data.forEach(function (e) {
        e.dd = dateFormat.parse(e.date);
    });
    var minDate = dateFormat.parse("2015/09/01");
    var maxDate = dateFormat.parse("2015/12/31");
		minDate = d3.time.day.offset(d3.time.month.floor(minDate), -15);
    maxDate = d3.time.day.offset(d3.time.month.floor(maxDate), 15);

    var chart = dc.barChart("#chart");
    var xf = crossfilter(data);
    var dateDim = xf.dimension(function (d) {
        return d3.time.month(d.dd);
    });

    var eventsByDate = dateDim.group().reduce(
            function (p, v) {
                p.incentiveTime += v.incentiveTime;
                p.loginTime += v.loginTime;
                p.nonIncentiveTime = p.loginTime - p.incentiveTime;
                return p;
            },
            function (p, v) {
                p.incentiveTime -= v.incentiveTime;
                p.loginTime -= v.loginTime;
                p.nonIncentiveTime = p.loginTime - p.incentiveTime;
                return p;
            },
            function () {
                return {
                    nonIncentiveTime: 0,
                    incentiveTime: 0,
                    loginTime: 0
                };
            }
    );

   var colorRenderlet = function (_chart) {

      function setStyle(selection, keyName) {
          selection.style("fill", function (d) {
              if (d[keyName] == "incentiveTime")
                  return "#F4A702";
              else if (d[keyName] == "nonIncentiveTime")
                  return "#01A8B2";          
          });
      }
      setStyle(_chart
              .selectAll("g.stack")
              .selectAll("rect.bar")
  ...