dc.js multiple select menu with checkboxes

Question

I have a dataset which consists of 5 columns -> country, id, value and sector. I was able to create a row chart in dc.js using the value and country, where country is my dimension.

var rowChart = dc.rowChart('#rowChart');
d3.csv('data.csv', function(data){
 data.forEach(function(d){
  d.country = d.country;
  d.id = d.id;
  d.value = +d.value;
  d.sector = d.sector;
 });
 var height = 300;
 var width = 300;

 var ndx = crossfilter(data)  
 var countryDim = data.dimension(function (d) { 
  return d.country; 
 });
 var countryGroup = countryDim.group().reduceSum(function (d) {
  return d.value
 })

 rowChart
  .width(300)
  .height(900)
  .margins({top: 10, right: 10, bottom: -1, left: 30})
  .dimension(countryDim)
  .group(countryGroup)
  .colors('#86BC25')
  .ordering(function (d) { return -d.value; })
  .elasticX(true)
  .xAxis();

 rowChart
  .title(function (d) { return d.value;})
  .renderTitleLabel(true)
  .titleLabelOffsetX(10);

 dc.renderAll();
});

and this is my data in csv

  country,id,value,sector
  USA,0982,10,high
  AUS,0983,9,high
  IND,0982,10,high
  CHN,0982,8,high
  CUB,0986,5,middle
  FIN,0987,low

i tried creating a jsfiddle, but does not seem to work, sorry my first time http://jsfiddle.net/i8rice/2r76bjt7/4/

I want to be able to create two drop down with check boxes. One to filter the row chart by country and another by sector. So if I first filter the sector by 'high' in the drop down menu the row chart will get filtered and the other drop down menu should only show me the 5 'high' countries.

I know this is achievable using dc.selectMenu but I wan that drop down check box style. I was wondering if this is possible with dc.js?

Sorry I am very new to asking questions and in d3.js, dc.js and crossfilter.

I guess you mean checkboxes within the dropdown. Looks like you could probably use selectMenu with the .multiple(true) option and then apply the styling you want with a jQuery plugin like multiple-select. — Gordon
Hi @Gordon I tried to use jQuery for styling and it does not seem to work. I manage to get my jsfiddle working jsfiddle.net/i8rice/2r76bjt7/16 . I am unsure how to use it to style if I define my dc.selectMenu in a <div> as oppose to using a <select>, hence I am not sure where I can add in multiple="multiple". — iPho
I tried selectField.multiple('multiple') still does not work, it does not show any values beside [Select all] in the drop down. — iPho

iPho iPho · Accepted Answer · 2017-01-20T14:04:56

Thanks to Gordon the check box within the drop down menu was working. However upon discussing with a few others, they have suggested that the check box, once ticked, is not calling the event handler, so wrote this, which is pretty much the same as the one within dc.js

selectField.on('postRender', function() {
  $('#menuselect select').change(function(){
    console.log($(this).val())
    if ($(this).val() && $(this).val() != "") {
      selectField.replaceFilter([$(this).val()]);
    } else {
      selectField.filterAll();
    }
     dc.events.trigger(function () {
       dc.redrawAll();
      });
    }).multipleSelect({ placeholder: "Select Country"})
 });

And everything worked, well, tested it on local. I don't know of any other ways as I am still new to this.

dc.js multiple select menu with checkboxes

1 Answers