Client Filters

Most of the time, when filtering data, we want to apply filters directly to the big data or analytical server.  To do that, we use the Aktive filter() method passing a Filter object. This action will bring only the filtered data.

However, sometimes we want to let the visualization to do the filtering in the most appropriate visual way. For example to keep the original data and just highlight the filtered one. Sometimes this is more effective visualy speaking for comparison. Let's take a look at the following example filtered by 'Lyric Opera House':

The bar looks great and it shows what it's supposed to. But if instead of filtering we do client-filtering:

Then we get a better perspective comparing "Lyric Opera House" agains other venues.

Enabling client filters

There are two ways you can use client filters in your visualizatiion (when supported):

• The first one by using the AQL .clientFilter() property for the given filter instead of .filter().

  const filter = cf.Filter('venuename').in('Lyric Opera House');
  
  myChart.clientFilter(filter).execute()
  

• The second one is through the Interaction Manager. In this case, the Interaction Manager automatically takes care of building and setting client filters for the visualizations that you specify the clientFilters rule. See Interaction Manager's Filter Rules for more information.

Supported visualizations

The following visualizations support client filters when configured with one group-by attribute:

• Bars
• Pie
• Donut
• Scatter Plot
• Floating Bubbles
• Tree Map
• Word Cloud
• Disk
• Slicer
• Vector Map
• Geo Map

The following visualization supports client filters when configured with one group-by attribute and/or one column-group-by attribute:

• Heat Map

Note

• Client filters will ONLY apply as long as the filter's path (the filter's field name) matches the group-by attribute of the visualization
• Visualizations with two or more group-by attributes (e.g. Tree Map 2D) do not support client filters

Special Interaction Manager behavior

The Interaction Manager defaults client filters for the following special cases:

Trend and Area Line

Trend and Area Line visualizations are grouped by an attribute and time. When users select a point in these visualizations, the Interaction Manager always applies the selected date/time as a client filter. The effect is that the chart keeps showing the line but convey to users the point selected as illustrated below:

Internally, to display the line trend in this fashion, the Interaction Manager uses the Aktive clientFilter() method for the time field passing a Filter object as a parameter. The code below illustrates how this is done. Note that the Region filter is applied as a normal filter. This is why only one region shows in the chart. Note that the Year filter is applied as a Client Filter. This is why the chart can render the trend line completely and highlight the selected year.

let provider = cf.provider("Elasticsearch");
let globalstats = provider.source("global_stats");
let filter129= cf.Filter("year")
            .operation("BETWEEN")
            .value(["1993-01-01 00:00:00.000","1993-12-31 23:59:59.999"]);
let filter130= cf.Filter('region')
            .operation('IN')
            .value(["Asia & Pacific"]);
let metric0 = cf.Metric("gdp","sum");
let group1 = cf.Attribute("region")
            .limit(10)
            .sort("desc",metric0);
let group2 = cf.Attribute("year")
            .limit(1000)
            .func("YEAR")
            .sort("asc","year");
let myData = globalstats.groupby(group1,group2)
            .metrics(metric0);
myData.filter(filter130);
let myChart = myData.graph("Line Trend: Attribute Values")
            .clientFilter(filter129)
            .execute();

Vector Map and Geo Map

When region in the map is selected (e.g. Country), the Interaction Manager will apply the selected region as a filter. For the case of the Vector Map, it will use a client filter by default while the Geo Map needs the clientFilter rule to treat it as a one.

The selected region is highlighted while keeping the other regions available for selection. Internally, the Interaction Manager uses the Aktive clientFilter() method passing the Filter object as a parameter as shown below:

let provider = cf.provider("Elasticsearch");
let globalstats = provider.source("global_stats");
let filter144= cf.Filter("country")
            .operation('IN')
            .value(["China"]);
let filter129= cf.Filter("year")
            .operation("BETWEEN")
            .value(["1993-01-01 00:00:00.000","1993-12-31 23:59:59.999"]);
let metric0 = cf.Metric("gdp","sum");
let group1 = cf.Attribute("country")
            .limit(1000)
            .sort("desc",metric0);
let myData = globalstats.groupby(group1)
            .metrics(metric0);
myData.filter(filter129);

let myChart = myData.graph("Vector Map")
            .set("map", "world")
            .set("min", 0)
            .set("colorMetric", metric0)
            .clientFilter(filter144)
            .set("zoom", 1.5058268500000065)
            .set("center", [87.21562669322878,35.678927619179134])
            .execute();

The example code above renders the world map coloring only the country(ies) selected by the client filter and allowing users to select other countries as needed.