dc.js - is it possible to show the user grab handles upon page load

Question

I'm building a basic dashboard for internal use. I've little experience with D3 / SVG etc so please excuse me if this is obvious:

Aim

I have a time series of values, one value per date for a full year. Inspired by the example on the dc.js wesbite, I'm displaying a 'mini' bar plot of the entire series, and allowing the user to select a range which in turn sets the limits of the axis scale range of a 'large' line plot.

By default (on page load / refreshAll()) I've set the limits of the large line plot to be the most recent 60 days.

The user is encouraged to set their desired range using the mini plot at the bottom, and when they do, the 'grab handles' appear and the chosen range is highlighted on the mini plot, for example:

My issue

On page load / refreshAll(), the grab handles and range highlighting aren't shown on the mini plot, for example:

Question

Is there a way I can set the grab handles to appear upon page load?

Answer 1

Here is how i do it by using crossfilter and dc.js. You can get the last x days by doing something like:

xrange = d3.extent(data, function(d) { return d.date; });
last60 = [d3.time.day.offset(xrange[1], -60), d3.time.day.offset(xrange[1], 1)]

Assuming you have a date in your data. Do this after reading the data with d3, but before feeding it into crossfilter.

Then for the bottom chart (mini plot) simply set the filter property to:

.filter(last60)

And also set the xrange for the top chart to the same range:

.x(d3.time.scale().domain(last60))

Something like this might also work for setting the xrange, but i havent had any success with that:

topchart.focus(bottomchart.filter())