Time intervals: brush on time sequence without updating chart

[David Saeger]

I created a time intervals barchart based on this one here: http://dc-js.github.io/dc.js/examples/time-intervals.html

The idea is that I have a dataset where each entry has a start and end date and I need to be able to filter on activities in a time series where the filter intersects with a program being "active". I created  a custom intervalTreeGroup as suggested in the example, the only thing I changed was that am looking at active programs per day rather than per month. For some reason every time I apply the brush all "rows" are zeroed out. 

I go from this: 

To this:

...
function intervalTreeGroup(tree, firstDate, lastDate) {

      return {

          all: function() {

              var begin = d3.time.day(firstDate), end = d3.time.day(lastDate);

              var i = new Date(begin);

              var ret = [], count;

              do {

                  next = new Date(i);

                  next.setDate(next.getDate()+1);

                  count = 0;

                  tree.queryInterval(i.getTime(), next.getTime(), function() {

                      ++count;

                  });

                  ret.push({key: i, value: count});

                  i = next;

              }

              while(i.getTime() <= end.getTime());

              return ret;

          }

      };

  }

        //calculate interval and convert from unix timestamps to js date objects

        //create cccc for cleared completed closed and cancelled

        var cccc = [];

        activities.forEach(function(d) {

                if([2,3,4,5].indexOf(+d["statusId"]) > -1) {

                        cccc.push(d);

                }

        });

        cccc.forEach(function(d) {

                d["activityDateEntered"] = new Date(d.activityDateEntered * 1000);

                d["activityDateWorkStart"] = new Date(d.activityDateWorkStart * 1000);

                if (d["activityDateWorkComplete"] == null){

                        d["activityDateWorkComplete"] = new Date();

                } else {

                        d["activityDateWorkComplete"] = new Date(d.activityDateWorkComplete * 1000);

                };

                d.activityDateWorkInterval = [d["activityDateWorkStart"].getTime(), d["activityDateWorkComplete"].getTime()]

        })

//creates crossfilter object of activities

        var cf = crossfilter(cccc);

        var intervalDim = cf.dimension(function(d) {return d.activityDateWorkInterval;});

        var startDim = cf.dimension(function(d) {return d.activityDateWorkStart;});

        var endDim = cf.dimension(function(d) {return d.activityDateWorkComplete;});

//start and close dates for activities

        var minDate = startDim.bottom(1)[0]["activityDateEntered"],

                maxDate = endDim.top(1)[0]["activityDateWorkComplete"];

        var dailyActivitiesTree = cf.groupAll().reduce(

                function(v,d) {

                        v.insert(d.activityDateWorkInterval);

                        return v;

                },

                function(v,d) {

                        v.remove(d.activityDateWorkInterval);

                        return v;

                },

                function() {

                        return lysenkoIntervalTree(null);

                }

        )

        var dailyActivitiesGroup = intervalTreeGroup(dailyActivitiesTree.value(),minDate,maxDate);

        var datesChart = dc.barChart("#timeline");

        datesChart

                .height(60)

                .width(this.width)

                .dimension(intervalDim)

                .group(dailyActivitiesGroup)

                .x(d3.time.scale().domain([minDate,maxDate]))

                .xUnits(d3.time.day)

                .brushOn(true)

                .controlsUseVisibility(true)

                .yAxis().ticks(0).tickFormat('');

console.log("buuts")

   dc.renderAll();

...

Wondering if anybody has any suggestions as to what I can do to get my chart to not render after a filter is brushed on.

Thanks! 

[Gordon Woodhull]

Hi David,

The fact that it's drawing right but filtering wrong indicates to me that the group works properly but something is going wrong when the filter is applied.

Did you also use the special filterHandler included in the example? Ordinary filtering won't work here because the keys are pairs of dates, not something that can be compared with a regular less-than operation.

Cheers,

Gordon

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/7ce8f5d0-d7ad-49c5-942c-c88259728f6f%40googlegroups.com.

[David Saeger]

Nevermind. I got it, had neglected to update the filterFunction. After the update the chart works wonderfully. Could still benefit from a better understanding of the filterFunction update.

[David Saeger]

Gordon,

I answered my own post before realizing that you had responded. You are spot on, I had neglected to update the filterHandler. Your answer also goes pretty far in answering my call for better understanding of the filterHandler as well. You know your on top of your game when you can answer questions before they are asked. Good show.