Adding a filter not redrawing chart

Skip to first unread message

Jul 16, 2013, 5:38:43 AM7/16/13
I have a bar chart set up that graphs a users number of trips by day

            tripVolume = dc.barChart("#trip-volume")
.width(980) // (optional) define chart width, :default = 200
.height(75) // (optional) define chart height, :default = 200
.transitionDuration(0) // (optional) define chart transition duration, :default = 500
.margins({ top: 10, right: 50, bottom: 30, left: 40 })
.dimension(tripsByDateDimension) // set dimension
.group(tripsByDateGroup) // set group
// (optional) whether chart should rescale y axis to fit data, :default = false
// (optional) whether chart should rescale x axis to fit data, :default = false
// define x scale
.x(d3.time.scale().domain([tripsByDateDimension.bottom(1)[0].startDate,[0].startDate ]))
// (optional) set filter brush rounding
// define x axis units
// (optional) whether bar should be center to its x value, :default=false
// (optional) render horizontal grid lines, :default=false
// (optional) render vertical grid lines, :default=false

The graph displays fine but I would like to filter it using some jQuery controls.
When the user selects the date I am trying to add a filter to the chart, the filter gets added but the chart does not change, even if i redraw() or render().

The following are some of the methods I have used to try to apply a filter:

This should use the filterRange:
d.filter(d.dimension().top(20)[19], d.dimension().top(20)[0]);

      d.filter(function (d) {
return d.getTime() > start.valueOf() && d.getTime() < end.valueOf();


I also tried bypassing the chart and applying the filter directly on the dimension:
d.dimension().filterFunction(function (d) {return d.getTime() > start.valueOf() && d.getTime() < end.valueOf()});

Nothing I have done causes the chart to change.

I am beginning to think that I have the wrong expectation of what the filter function should do?

I've spent a couple of days on this now and I'm at a loss as to what to try next.

Any help would be greatly appreciated.

Jul 16, 2013, 5:42:10 AM7/16/13
I forgot to add my crossfilter info:

            tripsCx = crossfilter(data.rows);
var allTripsGroup = tripsCx.groupAll();

var tripsByDateDimension = tripsCx.dimension(function (d) { return d.startDate; });
var tripsByDateGroup =;
Message has been deleted

Jul 16, 2013, 9:36:51 AM7/16/13
OK, I'm really lost now. 
Updating the filter on a different dimension will update the graph, but not if you update the dimension that the graph was setup with?

On Tuesday, July 16, 2013 10:38:43 AM UTC+1, wrote:

Gordon Woodhull

Jul 16, 2013, 9:45:52 AM7/16/13

Note: a grouping intersects the crossfilter's current filters, except for the associated dimension's filter. Thus, group methods consider only records that satisfy every filter except this dimension's filter. So, if the crossfilter of payments is filtered by type and total, then group by total only observes the filter by type.

Jul 16, 2013, 10:01:49 AM7/16/13
That's great, thanks for the info. I thought I was going mad.

Just one more question on this as I would like to understand it better.
My understanding was that a dimension was looking at a set of data on on particular value and that a grouping aggregated data from that view like a total or average or something else.
There seems to be a direct relation between the dimension and how its data is grouped, are dimensions/groups usually worked with in pairs. 
As in you create a dimension for each interesting slice of the data and then a group to get totals from it?

The group not taking the dimensions filter into account seems unintuitive to me, I'm guessing there is probably something that I don't understand about groups and dimensions, are there any resources besides the docs that do into more depth about their relationship?


Jul 16, 2013, 10:19:54 AM7/16/13
I just realized its a crossfilter feature not a dc.js feature.
So this is probably the wong place to ask about it.

Thanks for the help.
Reply all
Reply to author
0 new messages