Skip to content

Range Filter

The Range Filter allows to display metrics as horizontal sliders and whenever they are moved, the Range Filter will trigger a filter with an operation of type "BETWEEN"  with the slider's metric and the selected range. Each slider will have a start and stop value, that will be represented by the min() and max() aggregation functions done over that metric. So the first requisite for the Range Filter to work is that the source provider allows these two aggregations.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//First let's define the metrics
var bytes = cf.Metric('bytes');
var memory = cf.Metric('memory');
var phpmemory = cf.Metric('phpmemory');

var rf= cf.provider('Elasticsearch')
    .source('logstash-2015.05.18')
    .metrics(bytes, memory, phpmemory)
    .graph('Text Search')
    .element('rf-div')

// Add the listener
ts.on('rangefilter', function(event){
    var filter = event.data;
    // Get all the visuals
    var charts = cf.getAllVisualizations();
    // Apply the filter to each one of the charts
    charts.forEach(function(c){
        // Use c.filter instead of c.filters to add instead of replace filters
        c.filter(filter).execute();
    })
})

rf.execute()

This code will render the Range Filter:

RF

Note

That the metrics defined don't have the functions min or max. This means that the Range Filter will automatically query these two functions. So you can use any defined metric even though if it has a function defined like "sum". The Range Filter doesn't work with the special metric "Count", so there's no need to include, and if it is, it will be ignored.