3

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.

Gordon
  • 19,811
  • 4
  • 36
  • 74
iPho
  • 91
  • 1
  • 9
  • Please try this http://stackoverflow.com/questions/38591613/how-to-create-interaction-with-selectmenu-in-dc-js – pramod24 Jan 18 '17 at 15:43
  • and also use http://jsfiddle.net/gordonwoodhull/uterbmhd/9/ – pramod24 Jan 18 '17 at 15:43
  • I guess you mean checkboxes within the dropdown. Looks like you could probably use selectMenu with the [.multiple(true)](http://dc-js.github.io/dc.js/docs/html/dc.selectMenu.html#multiple__anchor) option and then apply the styling you want with a jQuery plugin like [multiple-select](http://wenzhixin.net.cn/p/multiple-select/docs/). – Gordon Jan 18 '17 at 16:52
  • Hi @Gordon I tried to use jQuery for styling and it does not seem to work. I manage to get my jsfiddle working https://jsfiddle.net/i8rice/2r76bjt7/16/ . I am unsure how to use it to style if I define my dc.selectMenu in a
    as oppose to using a
    – iPho Jan 18 '17 at 23:11
  • I tried selectField.multiple('multiple') still does not work, it does not show any values beside [Select all] in the drop down. – iPho Jan 18 '17 at 23:23
  • Hmm multiple select in your fiddle is working fine on my mobile phone. I'll try it on my laptop later tonight or tomorrow. – Gordon Jan 18 '17 at 23:56
  • Yes the multiple select is working fine, however I am not able to get the checkbox within the dropdown style using jquery as you suggested. Thankyou so much for spending your time to check for me. – iPho Jan 18 '17 at 23:59
  • I was able to get it to display correctly, but for whatever reason, the changes were not getting applied back to the `selectMenu`: https://jsfiddle.net/gordonwoodhull/Lghj8ztj/10/ Ah well, guess it won't work. There are a billion of such jQuery widgets though, maybe another will work? – Gordon Jan 19 '17 at 15:59
  • Thanks Gordon. I have tried a few other widgets but still no luck to get the changes to work, do you have any other suggestions at all? Thankyou so much for all your help, I really do appreciate it. – iPho Jan 20 '17 at 00:24

1 Answers1

3

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.

iPho
  • 91
  • 1
  • 9
  • Great! I guess the jQuery thing must be a one-way transformation from one control into an unconnected other control. Anyway, glad you got it working. – Gordon Jan 20 '17 at 19:42