dc.js clicking on one chart not filtering the other (different dimensions)

351 Views Asked by At

I've been happily using DC.js for some time. Today is the first time I've created two charts, from two dimensions, both running off the same crossfiltered variable, facts - and they don't filter each other. The bubble chart filters the bar chart but not vice versa. Am I making some obvious error? Very grateful for any pointers.

var facts = crossfilter(data);
var all = facts.groupAll();

print_filter(facts);

var appDimension = facts.dimension(function(d){ return d.ShortName; });
var appGroup = appDimension.group().reduce(
  function(p,v){ p.count++; v.NumUsers==0?p.numUsers=1:p.numUsers=v.NumUsers; p.numClients=v.NumClients; p.lc=v.lc; p.LifeCycle=v.LifeCycle; p.fv=v.fv; p.FutureValue=v.FutureValue; return p; },
  function(p,v){ p.count--; v.NumUsers==0?p.numUsers=1:p.numUsers=v.NumUsers; p.numClients=v.NumClients; p.lc=v.lc; p.LifeCycle=v.LifeCycle; p.fv=v.fv; p.FutureValue=v.FutureValue; return p; },
  function(){ return { count:0, numUsers: 0, numClients: 0, lc: 0, LifeCycle: '', fv: 0, FutureValue: '' }; }
);

var lifeCycleDimension = facts.dimension(function(d){ return d.LifeCycle; });
var tempName='';
var lifeCycleGroup = lifeCycleDimension.group().reduce(
  function(p,v){
      if (tempName!=v.ShortName) {
        p++;
        tempName=v.ShortName;
      }
      return p;
    },
  function(p,v){
    if (tempName!=v.ShortName) {
      p--;
      tempName=v.ShortName;
    }
    return p;
  },
  function(){ return 0; }

);

var yearlyBubbleChart = dc.bubbleChart('#col1')
      .width(360)
      .height(600)
      .margins({top: 10, right: 100, bottom: 30, left: 40})
      .dimension(appDimension)
      .group(appGroup)
      .clipPadding(200)
      .yAxisLabel('Number of users')
      .xAxisLabel('Number of clients')
      // .ordinalColors(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628'])
      .colorAccessor(function(p){
          return p.value.lc;
      })
      .colors(colorbrewer.RdYlGn[9])
      .colorDomain([1,6])
      .keyAccessor(function (p) {
          return p.value.numClients;
      })
      .valueAccessor(function (p) {
          return p.value.numUsers;
      })
      .radiusValueAccessor(function (p) {
          return p.value.fv;
      })
      .title(function(d){ return 'App: '+d.key + '\nNum users: '+d.value.numUsers+'\nNum clients: '+d.value.numClients+'\nLife cycle: '+d.value.LifeCycle+'\nFuture value: '+d.value.FutureValue; })
      .maxBubbleRelativeSize(0.15)
      .x(d3.scale.linear().domain([0, 608]))
      .y(d3.scale.log().base(Math.E).domain([1, 120000]))
      .r(d3.scale.linear().domain([0.5, 3]))
      // .elasticY(true)
      // .elasticX(true)
      .yAxisPadding(100)
      .xAxisPadding(500)
      .renderHorizontalGridLines(true)
      .renderVerticalGridLines(true);

  yearlyBubbleChart.yAxis().tickFormat(function(d){ return Math.round(d); });
  yearlyBubbleChart.xAxis().ticks(5);


  var barAmountChart = dc.barChart('#barCount')
      .width(530)
      .height(200)
      .margins({top: 10, right: 50, bottom: 30, left: 45})
      .dimension(lifeCycleDimension)
      .gap(1)
      .group(lifeCycleGroup)
      .title(function(d){ return d.value+' apps in '+d.key+' phase '; })
      .x(d3.scale.ordinal().domain(['Idea','Plan 2017','New','Re-Newed','SunSet','Legacy']))
      .xUnits(dc.units.ordinal);
      barAmountChart.yAxis().ticks(4);
0

There are 0 best solutions below