Brtdku

I'm using crossfilter to feed the data in to dc.js. I'm not sure where the problem lay but I'm suspecting crossfilter. The issue I'm experiencing is that sometimes when you filter using on graph, it's rendering correctly on the second. But sometimes, depending on the selected group, each graph renders data that doesn't match the filter. Consider the attached screen shots

Here is the base state where the graphs are rendering all the data correctly
.

Here is where I'm filtering using the bottom graph. The same thing holds true when filtering from the top graph -- the data is showing, rendering, correctly

Now here is where things get funky. The first image is when I'm filtering using the bottom graph (note the additional rows are showing as active/highlighted) and the second image is when I'm filtering using the top graph. Depending on what items I select they are misrepresented, in different ways, on the other graph.

To me, it seems like it's an issue with crossfilter but I'm not certain. I added the onChange callback to crossfilter and I set a debugger; when the action is 'filtered' and it seems like the data is correct but it's not rendering correctly. So, I dunno.

Here is (a broken down version of) the code I'm using. It's part of a larger component but this is where I'm building the graphs. Please note, this is a truncated version of my dataset. SO won't let me include all of it.

dataset = [{"name":"Test 52718","quantity":"14"},{"name":"Test 52717","quantity":"20"},{"name":"Test 52716","quantity":"15"},{"name":"Test 52715","quantity":"46"},{"name":"Test 52714","quantity":"18"},{"name":"Test 52713","quantity":"29"},{"name":"Test 52712","quantity":"21"},{"name":"Test 52711","quantity":"27"},{"name":"Test 52709","quantity":"10"},{"name":"Test 52710","quantity":"40"},{"name":"Test 52708","quantity":"13"},{"name":"Test 52707","quantity":"22"},{"name":"Test 52706","quantity":"15"},{"name":"Test 52705","quantity":"13"},{"name":"Test 52704","quantity":"14"},{"name":"Test 52703","quantity":"40"},{"name":"Test 52702","quantity":"41"},{"name":"Test 52701","quantity":"32"},{"name":"Test 52700","quantity":"11"},{"name":"Test 52699","quantity":"8"},{"name":"Test 52698","quantity":"24"},{"name":"Test 52697","quantity":"25"},{"name":"Test 52696","quantity":"24"},{"name":"Test 52695","quantity":"49"},{"name":"Test 52694","quantity":"17"},{"name":"Test 52693","quantity":"15"},{"name":"Test 52692","quantity":"28"},{"name":"Test 52691","quantity":"29"},{"name":"Test 52690","quantity":"47"},{"name":"Test 52689","quantity":"22"},{"name":"Test 52688","quantity":"38"},{"name":"Test 52687","quantity":"39"},{"name":"Test 52686","quantity":"35"},{"name":"Test 52685","quantity":"29"},{"name":"Test 52684","quantity":"5"},{"name":"Test 52683","quantity":"17"},{"name":"Test 52682","quantity":"46"},{"name":"Test 52681","quantity":"23"},{"name":"Test 52680","quantity":"5"},{"name":"Test 52679","quantity":"14"},{"name":"Test 52678","quantity":"37"},{"name":"Test 52677","quantity":"46"},{"name":"Test 52676","quantity":"37"},{"name":"Test 52675","quantity":"48"},{"name":"Test 52674","quantity":"13"},{"name":"Test 52673","quantity":"13"},{"name":"Test 52672","quantity":"42"},{"name":"Test 52671","quantity":"14"},{"name":"Test 52670","quantity":"37"},{"name":"Test 52669","quantity":"30"},{"name":"Test 52668","quantity":"28"},{"name":"Test 52667","quantity":"40"},{"name":"Test 52666","quantity":"12"},{"name":"Test 52665","quantity":"8"},{"name":"Test 52664","quantity":"38"},{"name":"Test 52663","quantity":"47"},{"name":"Test 52662","quantity":"27"},{"name":"Test 52661","quantity":"18"},{"name":"Test 52660","quantity":"25"},{"name":"Test 52658","quantity":"46"},{"name":"Test 52659","quantity":"46"},{"name":"Test 52657","quantity":"26"},{"name":"Test 52656","quantity":"46"},{"name":"Test 52655","quantity":"20"},{"name":"Test 52654","quantity":"16"},{"name":"Test 52653","quantity":"50"},{"name":"Test 52652","quantity":"12"},{"name":"Test 52651","quantity":"43"},{"name":"Test 52650","quantity":"22"},{"name":"Test 52649","quantity":"32"},{"name":"Test 52648","quantity":"5"},{"name":"Test 52647","quantity":"27"},{"name":"Test 52646","quantity":"14"},{"name":"Test 52645","quantity":"15"},{"name":"Test 52644","quantity":"13"},{"name":"Test 52642","quantity":"37"},{"name":"Test 52641","quantity":"27"},{"name":"Test 52640","quantity":"31"},{"name":"Test 52639","quantity":"22"},{"name":"Test 52638","quantity":"48"},{"name":"Test 52637","quantity":"49"},{"name":"Test 52636","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52635","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52634","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52633","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52632","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52631","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52630","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52629","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52628","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52627","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52626","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52625","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52624","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52623","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52622","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52621","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52620","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52619","quantity":"[ EMPTY VALUE ]"},{"name":"Test 52618","quantity":"[ EMPTY VALUE ]"}]

And then the main body of my code

graphCrossfilter = crossfilter(dataset);

dimension = graphCrossfilter.dimension(function (d) {return d.quantity});

group = dimension.group().reduceCount();



rowChart = dc.rowChart("#rowChart" , 'DataGraphs')

  .height(700)

  .width(500)

  .x(d3.scale.linear().domain(d3.extent(aData, function (d) {return d.quantity})))

  .transitionDuration(0)

  .elasticX(true)

  .dimension(oDimension)

  .group(oGroup);



barChart = dc.barChart("#barChart", 'DataGraphs')

  .height(400)

  .width(400)

  .outerPadding(0.05)

  .barPadding(0.05)

  .renderHorizontalGridLines(true)

  .renderVerticalGridLines(true)

  .elasticX(true)

  .elasticY(true)

  .brushOn(true)

  .transitionDuration(0)

  .x(d3.scale.ordinal())

  .xAxisLabel('Text Field')

  .xUnits(dc.units.ordinal)

  .yAxisLabel('Count')

  .dimension(dimension)

  .group(group);



graphCrossfilter.onChange(function(changeAction) {

  if (changeAction === "filtered") {

    debugger;

  }

});

If anyone can offer me ideas and/or where I can look to try to figure out what's going on, I'd very much appreciate it.

thnx,
Christoph

The values returned by Crossfilter dimension accessors must be naturally ordered. It looks to me like your dimension is returning a non-numeric value for certain records where the data isn’t populated. When this happens you will often see filtering issues like what you describe. Try testing for missing data in your dimension accessor and returning 0 in that case.