CODEWITHSUNDEEP
d3.jsdc.jscrossfilter
iPho
iPho

Reputation: 91

dc.js multiple select menu with checkboxes

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.

Upvotes: 3

Views: 2619

Answers (1)

iPho
iPho

Reputation: 91

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.

Upvotes: 3

Related Questions