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.

//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('Range Filter')
    .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:

Note

Metrics defined for range filters don't need min or max functions. The Range Filter automatically queries these two values. You can use any defined metric even when it has a function defined such as "sum". The Range Filter doesn't work with the special metric "Count". If included, it is ignored.