dc.js simulate click on chart and trigger filter on

Question

What I want to do:

I have a barChart where the x axis represents time. One can select a period of time by selecting it with the mouse and all the charts correctly adjust to the selection.

However, sometimes it's hard to go from exact dates to exact dates, I would like to add a calendar where one could select those dates.

Ideally, selecting dates on the calendar should have the same effect as selecting the time period with the mouse on the barChart.

Tried but don't like:

I tried to create a second time dimension and make the calendar select on that. However, this makes the barChart min and max values adjust to that selection The barChart does not cover the full dimension of the time dimension, but only the selected period on the calendar. This is what I'd like to avoid.

How can I simulate exactly the selection on the chart itself?

Thanks a lot.

EDIT:

I tried to understand the suggestions made on the comments. Let me show you some code.

I have a barChart:

var moveChart    = dc.barChart("#move-chart","chart2");

which is the one that one brushes on to perform time filters.

moveChart
.width(700)
...
.dimension(timeDim)
.group(foo)

Now, lets say I do on the console:

timeDim.filterRange([minTime,maxTime]);
dc.renderAll("chart2");

This makes the other charts reflect the selection, but not the moveChart.

I also tried to implement Gordon's comment but I'm not I understand it. In the console I can see that moveChart.filters. does not implement any filter like RangedFilter or TwoDimensionalFilter, so I'm not sure how to perform the filter function on the brush.

Thanks.

What if you just use the calendar to filter on the same dimension you use for the barChart? — Ethan Jewett
What @EthanJewett said. Plus you can use the filter function of the chart if you want it to update the brush based on your date range. The coordinate grid chart is specialized to do this.The brush only works for ranges, not for disjoint dates, though. — Gordon
I updated the question with some code Thanks for your answers, but I'm still unsure of what I need to be doing. — elelias
timeDim.filterRange takes a 2-element array, not 2 arguments. I take it you want to update the brush positioning on moveChart as well? As @Gordon said, dc.js provides a function to do this. I think timeDim.filterRange([minTime,maxTime]); moveChart.filter([minTime, maxTime]); dc.renderAll("chart2"); would probably work. This is really going to work a lot better if you create a working example that shows the problem (use JSFiddle or a similar platform). — Ethan Jewett

Gordon Gordon · Accepted Answer · 2015-01-19T17:22:58

A chart will not observe filters on its own dimension, so I think you really want the brush option.

filter = dc.filters.RangedFilter(filter[0], filter[1]);
moveChart.filter(filter);

Ranged filter doc

You only need to set the filter on the chart; the chart will set the filter on the dimension.

dc.js simulate click on chart and trigger filter on

1 Answers