Skip to content

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 parameter as described here.  However, sometimes we want to let the visualization to do the filtering in the most appropriate visual way.  For example, when users select a point in a Line Trend: Attribute Values chart, you may want to keep showing the line but convey to users the point selected as illustrated below:

CF1

To display the line trend in this fashion, we use the Aktive clientFilter() method passing a Filter object as a parameter. The code below illustrates how this is done. Note that the Region filter is applied to the data provider. That is why only one region shows in the chart. Note also that the Year filter is applied as a Client Filter. That is why the chart can render the trend line completely and highlight the selected year.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
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();

Another example of where to use client filters is the Vector Map.  When users select a region (e.g. Country) in the Vector Map, the selected Country name is included in the event only if that Country exists in the data series.  To accomplish this, we use the Aktive clientFilter() method passing the Filter object as a parameter as shown below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let provider = cf.provider("Elasticsearch");
let globalstats = provider.source("global_stats");
let filter144= cf.Filter('Country')
            .operation('IN')
            .value(["Sudan"]);
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)
            .set("legend", "left")
            .clientFilter(filter144)
            .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.

CF2