Custom text filter for DC.js dataTable

Question

I am creating a panel to show some data. I have several charts and a table that lists all the data. I am trying to add search functions to filter a chart. I have a group of companies and some data about each. Therefore, if I search for an “application”, only companies starting with “Appl” will be listed in the data table, and the diagrams reflect this.

The only problem I encounter in the current implementation is when I change this filter or clear it. The data seems beautiful, but the charts do not display correctly. They do not return to their original positions when they are cleaned or in some way add additional data. Any advice would be appreciated.

$("#table-search").on('input',function(){ text_filter(companyDimension,this.value);//companyDimension is the dimension for the data table function text_filter(dim,q){ dashTable.filterAll(); var re = new RegExp(q,"i") if (q!='') { dim.filter(function(d){ if (d.search(re)==0) return d; }); } dc.redrawAll(); graphCustomizations(); }}); 

Dc.js code

 var ndx = crossfilter(resource_data); //Dimensions companyDimension = ndx.dimension(function(d){ return d["Company Name"] }); dashTable.width(800).height(800) .dimension(companyDimension) .group(function(d){ return "List of all Selected Companies"; }) .size(1774) .columns([ function(d){return d["Company Name"]; }, function(d){return d["Revenue Source"];}, function(d){return d["Commodity"];}, function(d){return "$"+parseFloat(d["Revenue"]).formatMoney(0,'.',',');} ]) .sortBy(function(d){return d["Company Name"]}) .order(d3.ascending); 

As for this, charts are simply filtered with different sizes on the same crossfilter.

I tried to do a few things for the text_filter function, for example, dim.filterAll() , dim.filter(null) , dc.renderAll() . When I check the data in a dimension, it is correct before and after each filter, other diagrams simply do not process it correctly.

I tried to add a basic filter to dc dataTable directly, but I cannot get it to work with a custom filter function. So I can do something like dashTable.filter(q) and it will work, but I have to give it the full name of the company so that it displays something, but the diagrams display correctly when I apply it and delete it. I tried to use dashTable.filterHandler() , but it always returns an error, but if you know how to do this, I would be curious because I could not get it to work even with the example in the dc.js documentation.

Any help would be greatly appreciated.

EDIT:

Here the script is basically complete code, I mixed up the code to make it work. http://jsfiddle.net/rbristow/HW52d/1/

To reproduce the error, enter the letter in the search field, then clear it and enter another letter, you can see that the amount is not reset correctly.

Answer 1

In this block:

 if (q != '') { dim.filter(function(d) { if (d.search(re) == 0) return d; }); } 

Your filter should be:

 dim.filter(function(d) { return 0 == d.search(re); }); 

But then you do not apply any filter to dim if q == '' , so it should be

 if (q != '') { dim.filter(function(d) { return 0 == d.search(re); }); } else { dim.filterAll(); } 

Explanation:

In crossfilter.js return value of the filter callback is checked as follows:

 if (!(filters[k = index[i]] & one) ^ (x = f(values[i], i))) { if (x) filters[k] &= zero, added.push(k); else filters[k] |= one, removed.push(k); } 

If the filter returns true and the item is already in the current view, it should not do anything. true ^ true -> false .

But in your case, true xor-ed with a string - a note, this is a bitwise xor, not a logical one, because Javascript does not have a logical xor - which will always be evaluated to true . So the values ​​you want in the filtered set are put in added when they need to be left alone.

This is a fuzzy use of bitwise xor. I looked at SO and the top voted answer to Why is there no logical xor in JavaScript? contains "Bitwise XOR is extremely useful, but for all the years of programming, I never need a logical XOR." Given that crossfilter.js emphasizes performance, they may be discarding some error checks and want to use the fast mathy operations.