CODEWITHSUNDEEP
dc.jscrossfilter
NorthSide
NorthSide

Reputation: 1499

dc.js - add drop down to select date range

I'm using dc.js to display some info, I would like to add a drop down to select the date range as - All, last 7 days, last 30 days, last 90 days.

How would I add that to the following?

var dataTable = dc.dataTable("#dc-table-graph");

var data = [
 {date: "2014-08-15T06:30:43Z", amount: 10},
 {date: "2014-08-12T10:30:43Z", amount: 10 },
 {date: "2014-08-1T16:28:54Z", amount: 100 },
 {date: "2014-07-28T18:48:46Z", amount: 100 },
 {date: "2014-07-26T20:53:41Z", amount: 11 },
 {date: "2014-07-16T10:53:41Z", amount: 5 },
 {date: "2014-05-1T22:54:06Z", amount: 10 },
 {date: "2013-11-1T10:30:43Z", amount: 2 },
 ];

var dtgFormat = d3.time.format("%Y-%m-%dT%H:%M:%SZ");

data.forEach(function (d) {
  d.date   = dtgFormat.parse(d.date.substr(0,20));
  d.amount  = +d.amount;
  d.type = d.type;
});


var ndx = crossfilter(data);
var timeDimension = ndx.dimension(
  function (d) {return d.date;});

dataTable.width(960).height(800)
  .dimension(timeDimension)
  .group(function(d) { return "" })
  .size(20)
  .columns([
    function(d) { return d.date; },
    function(d) { return d.amount; },
  ])
  .sortBy(function(d){ return d.date; })
  .order(d3.ascending);

dc.renderAll();

http://jsfiddle.net/northside45/uvxzo785/

Upvotes: 2

Views: 2803

Answers (1)

Gordon
Gordon

Reputation: 20150

Add another dimension on time so that it affects the dimension for your data table. (In crossfilter, filtering a dimension will only affect other dimensions, not itself.)

Then use filterRange on that other dimension in response to your dropdown.

https://github.com/square/crossfilter/wiki/API-Reference#wiki-dimension_filterRange

Upvotes: 2

Related Questions