How can I make a slicer filter its options when users select an option from another slicer?

#1

HI, I am using two slicer components to show cities and hotels so that users can filter by those options. However, I’d like the hotels slicer to filter its values automatically when users select a city. How can I accomplish that?

Thanks!

#2

Hi @Luca,

You can use filter rules as explained here: https://chartfactor.com/doc/1.10/special_visualizations/filter_control/#filter-rules

See the sample code below. It assumes you have DOM element ids “fc”, “slicer1”, and “slicer2” for the different widgets.

// your filter coordination code
let rules = {
    'slicer1': { clientFilters: true}, 
    'slicer2': { clientFilters: true, serverFilters: ['city'] }
}
cf.create().fc().set('rules',rules).element('fc').execute();

// your slicer 1
let group1 = cf.Attribute("city")
            .limit(1000);
cf.provider("BigQuery")  // can be a different provider
    .source('yoursource')
    .groupby(group1)
    .graph("Slicer")
    .element('slicer1')
    .execute();

// your slicer 2
let group2 = cf.Attribute("hotels")   // can be a different provider
            .limit(1000);
cf.provider("BigQuery")
    .source('yoursource')
    .groupby(group2)
    .graph("Slicer")
    .element('slicer2')
    .execute();
#3

I want to do something similar. I’m using 4 charts (two bars, a pie and a donut). I want the first bar to filter the pie only, and the second to filter the donut. I can do that with the serverFilters and clientFilters options as you mentioned right?

Is there a way to know for chart if it is filtered by another chart? I mean what filters are affecting a given chart?

#4

Hi @diego,

You can configure the filter interaction to do just that. Let’s assume your DOM elements are bars1, donut, bars2, pie, the configuration below will make it so that users can click on their bar charts and filter the donut and pie charts respectively.

// your filter coordination code
let rules = {
    'bars1': {receive: false },
    // replace bars1-attribute below with the bars1 group-by attribute
    'donut': { clientFilters: true, serverFilters: ["bars1-attribute"] },  
    'bars2': {receive: false },
    // replace bars2-attribute with the bars2 group-by attribute
    'pie': { clientFilters: true, serverFilters: ["bars2-attribute"]}. 
}
cf.create().fc().set('rules',rules).element('fc').execute();

The receive property is set to false for bars1 and bars2 so that filters triggered by other charts don’t affect them. That way, their bars are always available for selection.

The donut is configured to accept only filters triggered by bars1’s group-by attribute.

The pie is configured to accept only filters triggered by bars2’s group-by attribute.

The code to render the bars, donut and pie is the same as usual so I did not include it above.

To see what filters are affecting each chart, you can use the example below. Let’s say you want to display the filters affecting the donut:

let donutChart = cf..getVisualization('donut');
let config = donutChart.get('config');

The config object includes the filters array with all filters currently affecting this chart.

Hope this helps.

#5

Thanks @jorge, it did work! I was not able to find the last part (how to obtain the filters) in the doc. Maybe I missed it, but in case is not there I would recommend to include it since it’s very helpful.