Date filters in DC.js
I am working with DC.js and I am trying to add preset filters for 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 a brush size to move, but I can't get it to trigger filtering. I tried moveChart.redraw(); dc.redrawAll(); dc.renderAll();
and some others with no luck. I've seen examples using only D3 and the logic is tricky to follow as I'm trying to figure out what DC group object would be in D3. Where I got lost understand Brush events, especially with DC. I can't find a DC sample that works with a brush like this. Can anyone point out what I am missing to make this DC work?
source to share
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 method is .filter()
already bound to the brush you are using.
You also don't need to filter the data yourself, because that's what crossfilter is for. It looks like you were filtering the original data array, which has no effect, because the crossfilter has already copied it into its internal buffers.
Another trick is to use an object dc.filters.RangedFilter
when filtering so that dc.js knows the range is intended, not two discrete dates.
So, instead of most of the body of your function, drawBrush
just do
timeChart.filter(null);
timeChart.filter(dc.filters.RangedFilter(new Date(st), new Date(end)));
dc.redrawAll();
Also remove the extra unnecessary brush.
A working fork of your fiddle is here: http://jsfiddle.net/gordonwoodhull/uy7dqwr5/29/
I would also add that this is not exactly the correct way to do range / focus charts, so please use other examples for this - this is basically an example of using date ranges.
The strange behavior of range filtering and filtering after reset comes from the focus chart using a different range dimension chart - usually you want them to be in the same dimension, so they don't observe each other. But this has not been the focus of this issue, which is already several years old, so I'm not going to fix it.
source to share