How to make a series chart with date in X-axis in dc.js

Question

I am using dc.js V3.2.1 and crossfilter. I am trying to make a series chart with a date dimension and facing trouble making a chart with date in X-axis and the count in Y-axis . In my Output the X-axis is not displaying as a date.

I need two groups as Admin and Agent in the agent column of my data and with two line in series chart — one line as Admin group and another line as Agent line in the chart.

My sample data:

create_time,agent 
2017-01-01,Admin 
2017-01-02,Admin 
2017-01-02,Admin    
2017-01-02,Admin 
2017-01-01,Agent 
2017-01-02,Agent 
2017-01-03,Admin    
2017-01-03,Admin 
2017-01-03,Admin 
2017-01-03,Agent 
2017-02-01,Admin    
2017-02-01,Agent 
2017-02-01,Agent 
2017-02-02,Admin 
2017-02-02,Admin    
2017-02-03,Agent 
2017-02-03,Agent 
2017-03-01,Admin 
2017-03-01,Admin    
2017-03-01,Admin 
2017-03-01,Admin 
2017-03-01,Agent 
2017-03-01,Agent    
2017-03-01,Agent 
2017-04-01,Admin 
2017-04-01,Admin 
2017-04-01,Admin    
2017-04-01,Admin 
2017-04-01,Agent 
2017-04-01,Agent

This is my code:

<div id="test"></div>

<script src="./static/lib/js/jquery.min.js"></script>
  <script src="./static/lib/js/bootstrap.min.js"></script>
  <script src="./static/lib/js/crossfilter.js"></script>
  <script src="./static/lib/js/d3.js"></script>
  <script src="./static/lib/js/dc.js"></script>
  <script src="./static/lib/js/queue.js"></script>

<script type="text/javascript">

    var chart = new dc.seriesChart("#test");

    d3.csv("static/data/agent.csv").then(function(agent) {
        var mycrossfilter = crossfilter(agent);
        var all = mycrossfilter.groupAll();

        agent.forEach(function(x) {
               if(x.gender == 'Admin') {
                  x.newdata = 1;
               } else {
                  x.newdata = 2;
               }
            });

           var minDate = d3.min(agent, function(d){ return d.create_time; });
           var maxDate = d3.max(agent, function(d){ return d.create_time; });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [data.agent, data.create_time];
            });
            var hwGroup = hwDimension.group().reduceCount();

        chart
         .width(800)
         .height(600)
         .chart(function(c) { 
            return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
         })
         .x(d3.scaleTime().domain([minDate,maxDate]))
         .elasticY(true)
         .brushOn(false)
         .xAxisLabel("Height")
         .yAxisLabel("Count")
         .dimension(hwDimension)
         .group(hwGroup)
         .seriesAccessor(function(d) { return d.key[0];})
         .keyAccessor(function(d) { return +d.key[1]; })
         .valueAccessor(function(d) { return +d.value; })
         .legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1)
            .legendWidth(120).itemWidth(60));

      chart.render();
    });

Answer 1

It looks like you were doing everything right, but d3.scaleTime expects Date objects, so you need to convert the data:

    agent.forEach(function(x) {
      // ...
      x.create_time = new Date(x.create_time);
    });

I also removed the cardinal line interpolation because it does not work with this data (probably a bad idea in the first place). And it seemed to work after that, with dates shown in the X axis and everything.

Fiddle demo.

Formatting the ticks

dc.js uses d3-axis to draw the axes.

Use

chart.xAxis()

to retrieve the X axis, and .tickFormat() to set the format on the axis, passing a d3.timeFormat.

In the above fiddle,

chart.xAxis().tickFormat(d3.timeFormat('%Y-%m-%d'));