How to create interaction with selectMenu in dc.js

Question

I'm trying to create a dashboard with a date chooser.

I did it for other figures, but it doesn't work here. I'm quite new with dc and I can't figure out if it's a problem of the group or a problem of the date format (or something else).

Here is my code :

        d3.csv("data/saccr_realloc_test.csv", function (error, saccr) {

                var parser = d3.time.format("%d.%m.%Y");
                //var formatter=d3.time.format("%d.%m.%Y");
                saccr.forEach(function(d) {
                        d.date   = parser.parse(d.date);
                        d.ead = +d.ead;
                    });


            var cptyChart = dc.barChart("#dc-cpty-chart");
            var lineChart = dc.lineChart("#volume-chart");

            var ndx = crossfilter(saccr);

            var dimdate = ndx.dimension(function(d) { return d.date;});
            var dimline = ndx.dimension(function(d) { return d.date;});
            var minDate = dimdate.bottom(1)[0].date;
            var maxDate = dimdate.top(1)[0].date;
            var dimcpty = ndx.dimension(function(d) { return d.cpty;});
            var dimcptyC = ndx.dimension(function(d) { return d.cpty;});

            var groupdate = dimline.group().reduceSum(function(d){return d.ead/1000000;});
            var groupline = dimline.group().reduceSum(function(d){return d.ead/1000000;});
            var groupcpty = dimcpty.group().reduceSum(function(d){return d.ead/1000000;});
            var spendhisto=dimcptyC.group().reduceSum(function(d){return d.ead/1000000;});
            var groupcptyC = remove_empty_bins(spendhisto);

            //a dropdown widget
            selectField=dc.selectMenu('#menuselect')
                    .multiple(true)
                    .dimension(dimcpty)
                    .group(groupcpty)
                    .numberVisible(10);

            selectField2=dc.selectMenu('#menuselect2')
                    .dimension(dimdate)
                    .group(groupdate);


            //a line chart
            lineChart
                    .height(350)
                    .width(450)
                    .margins({top:10, right:50, bottom: 30, left: 50})
                    .dimension(dimline)
                    .group(groupline)
                    .renderArea(true)
                    .transitionDuration(500)
                    .x(d3.time.scale().domain([minDate,maxDate]))
                    .elasticY(true)
                    .renderHorizontalGridLines(true);


            var barTip2=[]; //define some tips
            cptyChart
                    .ordering(function(d){return -d.value;})
                    .height(154)
                    .width(1300)
                    .transitionDuration(500)
                    .dimension(dimcptyC)
                    .group(groupcptyC)
                    .margins({top:10, right:10, bottom: 2, left: 60})
                    .gap(1)
                    .elasticY(true)
                    .elasticX(true)
                    .x(d3.scale.ordinal().domain(dimcptyC))
                    .xUnits(dc.units.ordinal)
                    .renderHorizontalGridLines(true)
                   .yAxis().tickFormat(d3.format("s"))


                dc.renderAll();

                function remove_empty_bins(source_group) {
                    return {
                        all:function () {
                            return source_group.all().filter(function(d) {
                                return d.value > 0.00001;
                            });
                        }
                    };
                }                    
            });

https://fiddle.jshell.net/qxL2a6ev/

If someone has an answer, I'll be grateful. Many thanks in advance.

It's going to take a bit more work to create a working jsfiddle, sorry. If you want to continue with that, this Q&A may help you import the data, and you'll also have to point to scripts from CDN's rather than using relative paths (which obviously won't go anywhere). — Gordon
I've added your code to your question, since the fiddle isn't really helpful if it won't run (and just linking to jsfiddle is usually not allowed on SO because the link will eventually die). I don't immediately see the problem; could you describe in more detail what problems you're seeing? You are using the 2.1.* version of dc.js right? Are you getting errors in the browser console? — Gordon
the fiddle works now, thanks for the tip : jsfiddle.net/3chM6/106 I'm using the 2.1 version and my problem is that the date chooser doesn't trigger any interaction. For instance, if I choose the date "Sat15 Apr...", I expected to see on the barChart a unique bar with "Illumina Inc" but nothing happen... — Pierre GUILLAUME

Gordon Gordon · Accepted Answer · 2016-08-01T14:29:43

There are two bugs here, one in dc.js and one in your code.

First, it looks like the selectMenu has not been debugged for non-string keys. It is filtering on the value it retrieves from the <option> tag, which has been converted to a string.

As usual, there is a workaround. You can explicitly convert the strings to dates before they get to the dimension by changing the filterHandler:

var oldHandler = selectField2.filterHandler();
selectField2.filterHandler(function(dimension, filters) {
  var parseFilters = filters.map(function(d) { return new Date(d);})
  oldHandler(dimension, parseFilters);
  return filters;
});

Second, you have a copy-paste bug in your code. You've got the right idea assigning a fresh dimension and group to each chart, but groupdate and groupline should each draw from the corresponding dimension:

var groupdate = dimdate.group().reduceSum(function(d){return d.ead/1000000;});
var groupline = dimline.group().reduceSum(function(d){return d.ead/1000000;});

Working fork of your fiddle: http://jsfiddle.net/gordonwoodhull/uterbmhd/9/

How to create interaction with selectMenu in dc.js

1 Answers