Adding Filter in dc.js from another dataset

Question

I'm pushing two datasets into the same page.

They're both coming from separate mongodb tables, but the records are linked by a primary key 'plankey'.

I want to add a filter from this graph to the one in the second dataset.

Main chart function:

function loadProjectData(productName) {
// $('#progress_dialog').show();
buildDataLoaded = false;
$.get('/getbuildresults.json?product=' + productName, function (data) {
    stats = data;

    if (stats != null && stats.length > 0) {
        // Convert dates to real dates
        stats.forEach(function (d) {
            d.builddate = new Date(d.builddate);
        });

        // feed it through crossfilter
        ndx = crossfilter(stats);


        overall = ndx.dimension(function (d) {
            return d3.time.month(d.builddate);
        });
        overallGroup = overall.group().reduce(buildReduceAdd, buildReduceRemove, buildReduceInitial);

        //Test Types Graph Data Sorter
        testTypesDimension = ndx.dimension(function (d) {
            return d3.time.week(d.builddate)
        })

    }


    overallChart = dc.compositeChart("#overall-timeline-chart")
    .width(chartWidth) // (optional) define chart width, :default = 200
    .height(250) // (optional) define chart height, :default = 200
    .transitionDuration(500) // (optional) define chart transition duration, :default = 500             
    .margins({
        top: 10,
        right: 50,
        bottom: 30,
        left: 40
    })
        .dimension(failedTestDimension)
        .group(failedTestDimensionGroup)
        .elasticY(true)
        .mouseZoomable(false)
        .elasticX(false)
        .renderHorizontalGridLines(true)
        .x(d3.time.scale().domain(timelineDomain))
        .round(d3.time.month.round)
        .xUnits(d3.time.months)
        .title(function (d) {
            return "Value: " + d.value;
        })
        .renderTitle(true)
        .brushOn(true);



    // Loop through available plans and create chart for each and then compose
    var charts = [];
    var plans = buildGroup.all();
    plans.forEach(function (plan) {

        charts.push(dc.lineChart(overallChart).dimension(failedTestDimension).group(failedTestDimensionGroup)
            .valueAccessor(function (d) {
                return d.value.result[plan.key] ? d.value.result[plan.key].failed : null;
            }));
    });

    overallChart.compose(charts);

Second graph function (this is where I want to add the filter from the above graph):

function loadTestResultsData() {
    // $('#progress_dialog').show();
    testDataLoaded = false;
    $.get('/gettestresults.json', function(data) {      
        stats = data;


        if (stats != null && stats.length > 0) {
            // Convert dates to real dates
            stats.forEach(function (d) {
                d.rundate = new Date(d.rundate);
            });
            // feed it through crossfilter
            support_ndx = crossfilter(stats);


            //Support Cases Chart

            // Dimension and Group for monthly support cases
            supportCasesPerMonth = support_ndx.dimension(function(d){ return d.methodName });
            supportCasesPerMonthGroup = supportCasesPerMonth.group();

        buildTypesChart = dc.rowChart("#failed-tests-chart")
            .width(750) // (optional) define chart width, :default = 200
            .height(300) // (optional) define chart height, :default = 200
            .group(supportCasesPerMonthGroup) // set group
            .dimension(supportCasesPerMonth) // set dimension
            // (optional) define margins
            .margins({
                top: 20,
                left: 10,
                right: 10,
                bottom: 20
            })
            // (optional) define color array for slices
            .colors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
            // (optional) set gap between rows, default is 5
            .gap(7);
        }

        testDataLoaded = true;
        dataLoaded();
    });
};

Answer 1

You have two basic approaches. The first to be prefered.

1) Join the data first. I would suggest using something like queue

queue()
   .defer(d3.json, '/getbuildresults.json?product=' + productName)
   .defer(d3.json, '/gettestresults.json')
   .await(ready);

function ready(error, products, stats) {
    var productMap = {};
    products.forEach(function (d) {
        d.builddate = new Date(d.builddate);
        productMap[d.plankey] = d;
    });
    stats.forEach(function (d) {
        d.rundate = new Date(d.rundate);
        $.extend(d, productMap[d.plankey]);
    });

    ndx = crossfilter(stats);
    // build other dimensions/groups

    // build charts

});

2) Your other option is to link the charts by using a trigger to filter on the plankey. So on both data sets, create a crossfilter linked dimension for plankey. Then, on the filter trigger from the second chart, see what plankeys have been set with something like

var keys = C2PlanKeysDim.all()
  .filter(function(d){return d.value>0;})
  .map(function(d){return d.key;});`

Then on chart 1, filter by the key on C1PlanKeysDim or whatever you call it, and trigger a chart redraw to take into account the filter.