Date Filters in DC.js

Question

I am working with DC.js and I am trying to add preset date filters to this jsfiddler.

            <div id="header" class='row logoSize'>
                <img src="logo-main2.png" />
                <div class="buttons-container"></div>
                <div class="startEnd" id="start">2015-02-12</div>
                <div class="startEnd" id="end">2015-02-17</div>
                <div class="startEnd" id="brushYears">gggg</div>

            </div>
            <div  class='row '>
                <div class="dc-data-count">
                    <h2>

                        Card Activity Report
  <span>
    <span class="filter-count"></span>
     selected out of
    <span class="total-count"></span>
     records
      <span id="titleCount"></span>
    <a class="btn btn-sm btn-success" href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>

                    </h2>
                </div>
            </div>


            <div class='row'>
                <div class='span12' id='dc-time-chart'>

                    <h4>
                        Activity counts per Day
            <span class="muted pull-right" style="margin-right: 115px; ">From the chart below select a date range to filter by
      <a class="reset btn btn-sm btn-success"
         href="javascript:timeChart.filterAll();dc.redrawAll();"
         style="display: none;">
          reset
      </a>
    </span>
                    </h4>
                </div>

                <div class="clearfix"></div>

            </div>
            <div class="row">

                <div id="daily-move-chart">

                    <div class="clearfix"></div>
                </div>
            </div>
        </div>

            <pre id="data">
                ID,Action,AuditDate,DataProvider,MachineName,UserName,PersonID,Count

I have got the brush extent to move but I can't get it to trigger the filtering. I tried moveChart.redraw(); dc.redrawAll(); dc.renderAll();, and a few others with no luck. I have seen examples using just D3, and the logic gets hard to follow as I am trying to understand what a group object in DC would be in D3. Where I get lost is understanding the Brush Events especially with DC. I can't find any DC sample that works with the brush like this. Can someone notice what I am missing to make this work DC?

Answer 1

I think the main problem here is that you are mixing straight d3 code with dc.js code. You don't need to create your own brush object when using dc.js, because it already creates one, and the .filter() method is already tied to the brush that it uses.

You also don't need to filter the data yourself, because that's exactly what crossfilter is for. It looked like you were filtering the original data array, which has no effect because crossfilter has already copied it into its internal buffers.

The other trick is to use the dc.filters.RangedFilter object when filtering, so that dc.js knows that a range is intended and not two discrete dates.

So, instead of most of the body of your drawBrush function, just do

timeChart.filter(null);
timeChart.filter(dc.filters.RangedFilter(new Date(st), new Date(end)));
dc.redrawAll();

And also remove the extra, unneeded brush.

Working fork of your fiddle here: https://jsfiddle.net/gordonwoodhull/mr56bswz/1/

I'd also add that this is not really the right way to do range/focus charts, so please use other examples for that - this is mostly an example of how to apply date ranges.

The strange behavior of the range chart filtering itself, and staying filtered after it's been reset, comes from the focus chart using a different dimension form the range chart - ordinarily you want them on the same dimension so they don't observe each other. But that wasn't the focus of this question, which is already a couple of years old, so I'm not going to fix that now.