Skip to content

Time Range Picker

The Time Range Picker (TRP) is a custom component, basically an HTML / CSS component. It is, as the Time Range Filter , used as time utility to filter data based in time, but it provides a more flexible way to do it. To create the TRP we only need a time field. Technically the field time that will be used to filter other visualizations.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var timeGroup = cf.Attribute('saletime')
                    .limit(10)
                    .sort('asc','saletime')
                    .func('MONTH');

var myChart = cf.provider('Elasticsearch')
    .source('ticket_sales')
    .groupby(timeGroup)
    .graph('Time Range Picker')
    .element('chart')

myChart.execute()

After this, we’ll see something like this:

TRP

Once rendered, this visualization component is self-explanatory. Users just need to select it and they will get a wide set of options on how to set a certain range of time.

TRP1

Connect to other visualizations

To filter other visuals based on the time field used to build the TRP, we need to do exactly the same as the Time Range Filter: susbcribe to the timefilter event. After this, we’ll have the data available every time the we click the ‘Apply’ button.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
var applyFilter = function(e){
    var f = e.data;                    
    var filter = cf.Filter(f.path)
                    .operation(f.operation)
                    .values(f.value);
    var charts = cf.getAllVisualizations();
    charts.forEach(c => {
        // Don't apply the filter to itself 
        var vis = c._chartType;
        if (e.nativeData.from != vis) {
            c.filters(filter).execute().
        } 
    });
}

myChart.on('timefilter',applyFilter)