Time Range Picker

The Time Range Picker (TRP) is a HTML/CSS component that allows users to filter data based on time. To create a TRP we only need a time field.

var timeGroup = cf.Attribute('saletime')
                    .limit(10)
                    .sort('asc','saletime')
                    .func('MONTH');

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

myChart.execute()

After this, you will see the view below where you can select "From" and "To" date/times within the available data.

You can also use the relative view to select a date/time window in a relative fashion.

Finally, you can also use the presets view to select from collection of quick time window presets.

Color themes

If you want to change the theme and styles of the Time range picker you can refer to Time range picker theme configuration

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.

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)