I'm new to dc.js.
I have some data:
var data =
[
{date: Date.UTC(2015, 4, 4), frame: "frame1" },
{date: Date.UTC(2015, 2, 1), frame: "frame2" },
{date: Date.UTC(2015, 2, 11), frame: "frame3" },
{date: Date.UTC(2015, 1, 4), frame: "frame4" },
];
//create crossfilter
cf = crossfilter(data);
//create dimension
byDate = cf.dimension(function (d) {
return d.date;
});
//create group
byDateGroup = byDate.group();
And I'm working with this dc.lineChart
:
//configure timeGraph
timeGraph = dc.lineChart("#range")
.width(document.body.clientWidth)
.height(100)
.dimension(byDate)
.group(byDateGroup)
.transitionDuration(500)
.elasticY(true)
.x(d3.time.scale().domain([(byDate.bottom(1))[0].date, (byDate.top(1))[0].date + 1000]))
;
And I would like to access the data that is filtered by the adjustable range selector bar. I think passing a function to onfiltered
would work, but I don't know what to access from chart
in order to return the currently filtered data.
timeGraph.on("filtered", function (chart) {
console.log(/* print the data filtered by the 'range selector' */);
});
Here's a JSFiddle with an example. If the example were to work correctly, everything being displayed by the table should show up in the console.
Thanks in advance.