javascript - Cross-filter using drop downs

Question

I have two drop-downs. I want that whenever a selection is made in either of the drop-downs, a function called intersect be called which in turn calls the functions loadData and loadData1.My code is attached here.

<select onchange="intersect()" id="metric" class="wrapper-dropdown">
<option value ="190">190</option>
    <option value ="90">90</option>
    <option value ="100">100</option>
    <option value ="300">300</option>
</select>

<select onchange="intersect()" id="metric1" class="wrapper-dropdown">
<option value ="100">100</option>
    <option value ="200">200</option>
    <option value ="0">0</option>
</select>
<script>

var intersect= function() {

var total_90 = function() {
var data = [
 {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
 {date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
 {date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
 {date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
 {date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
 {date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
 {date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
 {date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
 {date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
 {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
 {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
 {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
 ];
 var ndx = crossfilter(data);
 var totalDim = ndx.dimension(function(d) { return d.total; });  
 var total_90 =     totalDim.filter(document.getElementById('metric').selectedOptions[0].value); 
return total_90;
  };
var tip_90 = function() {
var data = [
{date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
{date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
{date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
{date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
];
 var ndx = crossfilter(data);
 var tipDim = ndx.dimension(function(d) { return d.tip; });  
 var tip_90 = tipDim.filter(document.getElementById('metric1').selectedOptions[0].value); 
 return tip_90;
 }
 var result = [];

   for (var i = 0; i < total_90.length; i++){
        if (total_90[i].total == 90 && total_90[i].tip == 0)
        {

            result.push(total_90[i]);
        }
    }

   for (var i = 0; i < tip_90.length; i++){
        if (tip_90[i].total == 90 && tip_90[i].tip == 0)
        {
            result.push(tip_90[i]);
        }
    }
function print_filter(filter){
var f=eval(filter);
if (typeof(f.length) != "undefined") {}else{}
if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","   [
	").replace(/},/g,"},
	").replace("]","
]"));
    } 
    print_filter("result"); 
     }
    </script>
    </body>

So, at any given instance if I select '90' in the first drop down and '0' is already selected in the second drop down,then I want all the rows from both the JSON arrays which have total=90 and tip=0 to be printed on the console.

Answer 1

I dont know what's so difficult here...

I want that whenever a selection is made in either of the drop-downs, a function called intersect be called which in turn calls the functions loadData and loadData1.

<select onchange="intersect()" id="metric" class="wrapper-dropdown">
    <option value ="190">190</option>
    <option value ="90">90</option>
    <option value ="100">100</option>
    <option value ="300">300</option>
</select>

<select onchange="intersect()" id="metric1" class="wrapper-dropdown">
    <option value ="100">100</option>
    <option value ="200">200</option>
    <option value ="0">0</option>
</select>

with

function loadData() {
    alert("loadData reached");
}
function loadData1() {
    alert("loadData1 reached");
}
function intersect() {
    loadData();    
    loadData1();
}

Example: Fiddle