Customise the Time Bar | Demos

Time bar type

Data grouping Background colour Histogram colour Histogram highlight colour Histogram mark colour Histogram mark highlight colour

Area colour

Font family & size

Control Bar Minor Scale Major Scale

Show Play Button Show Extend Button Show Fit Button Minimum scale Maximum range cannot be smaller than or equal to Minimum scale. Maximum range Sliders Play speed:

Animate histogram height Time:

Language:

Hours:

12-hour clock 24-hour clock

Date order:

Day, month, year Month, day, year

The KeyLines time bar provides a powerful way to explore when events occur. This demo shows you how you can customise the time bar to suit your use case and application styling.

The demo uses a dataset of generic transactions over a period of 20 days from July 20, 2010 to August 9, 2010.

Appearance tab

This tab includes options to show or hide the control bar, switch between histogram and area time bar types, customise the background, area and histogram colours, mark specific times in a different colour, and change the font family and axis scales.

Options tab

This tab shows you how you can control:

Whether the user can move the sliders to control the time range
The animation play speed (default is 60 pixels per second)
The speed at which the histogram height scales
Whether to offer an 'Extend' button, which shows a cumulative animation of events from a given start time
The minimum scale and maximum range which users can zoom to.

Localisation

Date and time formats are a prime source of misunderstanding – "11/7/2010" could mean either the 11th of July or the 7th of November depending on your country. The 'Localisation' tab shows how to switch between 12- and 24-hour clock formats; DD/MM/YY and MM/DD/YY date formats, and by a simple lookup, different language translations of month names.

Key functions used: