Skip to content

Time Slider

The Time Slider (TS) allows users to filter data based on time windows. It also allows to play data by fixed time frames providing a better vision on how the data changed over time.

We can create this component by using a time field:  

1
2
3
4
5
6
7
8
9
var field = cf.Attribute('saletime')
                    .func('DAY');
var myChart = cf.provider('Elasticsearch')
                .source('ticket_sales')
                .timeField(field)
                .graph('Time Slider')
                .element('chart')

myChart.execute()

It is important to mention that the Time Slider will only trigger a min() and max() query for the given field. That's why for this specific visual, the limit() and the sort() function are not needed.

Then, we'll see the visualization as follows:

TS1

TS Components

Header

The header area which displays the min and max dates for a given fields in the data provider. These are displayed at the top right and top left of the visualization. At the center, the selected range is displayed along with the name of the field used to display the visualization. The selected range initially is the same as the full range if no initial filter or preset was defined.

Slider

The slider area contains the date ticks (divisions) which are automatically generated depending on the range. In this area we can zoom-in or zoom-out by using the mousewheel or the zoom control. The ticks will be re-calculated to display the range in a higher granularity for a better precision.

Controls

The bottom bar is the control area. Here 3 controls will be displayed: The player info control, the player and the zoom.

The first one is the small gear icon at the bottom left that will show the current player configuration (if any) when clicked. It also allows the user to change them from there without having to modify the AQL.

Any modification done from this window WILL NOT modify the AQL.

If no player configuration is provided, the gear icon will not be shown.

In the middle of the controls we'll find the player.

If no player configuration is provided, the player controls won't be displayed.

And in the bottom right, we can see the zoom control, that as explained before, allows the user to zoom-in or out the time slider.

Selection

In the TS we can manually select a range of dates in several ways, the first one and the most common is by dragging the cursor when positioned over the top bar in the slider area. The other one is by clicking on the middle labels (those at each side of the field name) in the header area and using the date pickers.

There are two types of date pickers: absolute and relative.

For the absolute picker, the highest time granularity (YEAR, MONTH ...) shown in the picker will depend in the granularity used in the aql used for the definition. In the picture above we can see that the highest is DAY.

And the relative picker:

The pickers allow a higher level of accuracy when selecting a range. Once the selection is done, we'll se the range as the image below:

The range can be moved by dragging it or resized by using the handles.

The other way to select accurate dates is by using the presets as explained below.

The Player

The player as mentioned before allows to play data by moving a previous selection frame by frame depending on the desired mode. This means that for the player to work there must be a range already selected so it knows from where to where it should start playing.

It has several options that will define its behaviour. Let's see the example that matches the previous player info picture:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var player = {
    'step-unit' : 'DAY',
    'step': 1, 
    'refresh': 'immediate', 
    'pin-left': true,   
    'live': true,
    'autoplay': true,
    'preset': 'last-3-years'
}

tslider.set('player', player)

step-unit

Required. The unit or granularity of the frame used to move the selection. It could be any of the commonly used: YEAR, MONTH, DAY, HOUR, MINUTE, SECOND. This setting applies to historical playing only. IMPORTANT: This the only parameter without a default value, which means that is required for the player to work. If this configuration is not set, the player will be shown as disabled.

step

The frame or step size. It could be any number equals or bigger than 1. It works along with the step-unit, so it can be translated as 1 day, 3 years, 30 minutes, etc. By default is 1. This setting applies to historical playing only.

refresh

The refresh time in seconds. It represents how frequently the server will be queried. Values can be any number equals or bigger than 1 or the word immediate, which means that the query should be triggered as soon as all previous queries are resolved. Default value is 1.

pin-left

If true, this option will pin the left handle of the selection ('from' date) and it will be colored darker. The data queried will be accumulative. If false, then 'from' and 'to' date will equaly advance keeping the same amount of time between the two dates. By default is false.

live

True or false. If true, this option will keep playing until the current date and time and the player won't stop playing. Once the right handle reaches the current date it will keep playing according to the refresh time. No matter what granularity is used for the time field in the aql, it will automatically switch to SECONDS. False by default.

This option should be used only for near real time sources, otherwise it will create unnecesary queries. If the option is false then as soon as the right handle reaches the end of data, the player will stop playing. False by default.

autoplay

If true, as soon as the application is ready it will start playing. The user won't have to manually click on the play button. False by default.

preset

A preset represents an specific range of dates that will be applied as a filter.

It can be used for an initial range selection when the application loads and used to play from there or to set a very specific filter after the visualization is loaded by using the preset window.

They can be specified dynamically with the help of 4 terms (This, Prev, Last and to date) and the name of the unit. There are only 2 presets that are different: yesterday and today. They are nothing else that intuitive shortcuts for prev-day and Day to date respectively. Here is how they work:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    // Using to date
    ['Year to date', 'Month to date', ...]

    // Using this
    ['This year', 'This month', ...]

    // Using prev
    ['Prev year', 'Prev month', ...]

    // Using last 
    ['Last year', 'Last minute', ...]

    // Last can be used also to specify any past 
    // date until the present time in the form: last x units
    ['Last 30 days', 'Last 2 years', 'Last 40 secs', ...]

The presets may behave differently depending on the pin-left option.

unit to date / today

Pinned: As soon as the next unit (year, month....) is reached by the right handle, the left will automatically jump to it to keep playing from the current unit to the present moment.

Not pinned: It will play normally according to the player configuration. After reaching the end of the current unit it won't represent the unit to date anymore.

this unit

Pinned: As soon as the next unit (year, month....) is reached, the left handle will automatically jump to it to keep playing the current unit.

Not pinned: It will play normally according to the player configuration. It won't represent the current time unit anymore.

prev unit / yesterday

Pinned: The left handle will stay and the right handle will advance according to the current configuration. It won't play the prev-unit anymore.

Not pinned: It will play both handle normally according to the player configuration. It won't represent the prev time unit anymore.

last-unit / last-x-units

Pinned: The left handle will stay and the right handle will advance according to the current configuration. It won't play the last time unit(s) anymore.

Not pinned: It will advance both handle on every refresh so it will always play the last time unit(s)

Note

A Preset filter will last only until the respective time filter is changed or removed. You will need to add this preset again if needed, either using AQL or the info window.

Custom colors

We can use custom colors to change the look of the slider area:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
let theme = {
    top: '#67a967', // Top bar of the slider
    mid: '#398439', // Middle bar
    bottom: '#18510b', // Bottom bar and field name background
    ticks: '#a5b72b', // Ticks and ticks labels
    selection: '#e9e9e9' // Range selection
}

let color = cf.Color().theme(theme)

ts.set('color', color)

The result will be as shown below: