NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

Webix Javascript Timeline Widget

This is a widget for creating scalable infographics. Timeline is very useful for displaying logs, highlights, and minimalist roadmaps. You can define colors, configure the content and position of timeline points, load and process data within it.

live demo

01 Aug, 2019
Found
Found a red mouse. Very currious. Wonderring if it is worrthy of obserrvation.
02 Aug, 2019
Observed
Worrthy. Was obserrving the object for 2.4 hours, then Ms. Higgins called for supper. Obserrvation paused.
03 Aug, 2019
Initial Hypothesis
Started thinking on the hyposesis. Then had to pause thinking, because Ms Higgins called for brreakfast.
04 Aug, 2019
Observation and initial testing
The subject is cleverr: doesn't fall for fake grrains and seeds.
05 Aug, 2019
Hunting strategies
Starrted to plot my hunting strategies. Had to pause, because Ms. Higgins brrought some meat. Delicious.
06 Aug, 2019
Hunting: First stage
The subject is extrremely agile and fast. Have to rethink the hunting strrategies.
07 Aug, 2019
Puzzled
The subject behaves in an unexpected manner: when I put Ms. Higgins' enamel pan as a trap, the subject pourred milk and left a letter. The subject is a wonderful strategist. Cleverr trrap.
08 Aug, 2019
Rethinking strategies
Ah, Ms. Higgins calls for dinner, no time. Tomorrow.
09 Aug, 2019
New strategies
What if my strategies are wrong?
10 Aug, 2019
The end
Drrinking milk together with Mr. Reddie the Mouse, my friend.
  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Support of All Modern browsers
  • Works on Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Other Webix widgets for planning tasks:

Overview

The Timeline widget is a ready-made solution for displaying elegantly simple infographics. You can adapt every part of the widget and configure user interaction with them.

Changing the look and content

You can configure text labels of every Timeline point with templates and apply you CSS to any part of the widget.

01 August 2019
Log entry 1: Found

Found a red mouse. Very currious. Wonderring if it is worrthy of obserrvation.

End of entry
02 August 2019
Log entry 2: Observed

Worrthy. Was obserrving the object for 2.4 hours, then Ms. Higgins called for supper. Obserrvation paused.

End of entry
03 August 2019
Log entry 3: Initial Hypothesis

Started thinking on the hyposesis. Then had to pause thinking, because Ms Higgins called for brreakfast.

End of entry
04 August 2019
Log entry 4: Observation and initial testing

The subject is cleverr: doesn't fall for fake grrains and seeds.

End of entry
05 August 2019
Log entry 5: Hunting strategies

Starrted to plot my hunting strategies. Had to pause, because Ms. Higgins brrought some meat. Delicious.

End of entry
06 August 2019
Log entry 6: Hunting: First stage

The subject is extrremely agile and fast. Have to rethink the hunting strrategies.

End of entry
07 August 2019
Log entry 7: Puzzled

The subject behaves in an unexpected manner: when I put Ms. Higgins' enamel pan as a trap, the subject pourred milk and left a letter. The subject is a wonderful strategist. Cleverr trrap.

End of entry
08 August 2019
Log entry 8: Rethinking strategies

Ah, Ms. Higgins calls for dinner, no time. Tomorrow.

End of entry
09 August 2019
Log entry 9: New strategies

What if my strategies are wrong?

End of entry
10 August 2019
Log entry 10: The end

Drrinking milk together with Mr. Reddie the Mouse, my friend.

End of entry

Timeline types

You can choose one of the three available types of arranging timeline elements: left, right, and alternate.

Click tabs to see all types.

01 Aug, 2019
Found
Found a red mouse. Very currious. Wonderring if it is worrthy of obserrvation.
02 Aug, 2019
Observed
Worrthy. Was obserrving the object for 2.4 hours, then Ms. Higgins called for supper. Obserrvation paused.
03 Aug, 2019
Initial Hypothesis
Started thinking on the hyposesis. Then had to pause thinking, because Ms Higgins called for brreakfast.
04 Aug, 2019
Observation and initial testing
The subject is cleverr: doesn't fall for fake grrains and seeds.
05 Aug, 2019
Hunting strategies
Starrted to plot my hunting strategies. Had to pause, because Ms. Higgins brrought some meat. Delicious.
06 Aug, 2019
Hunting: First stage
The subject is extrremely agile and fast. Have to rethink the hunting strrategies.
07 Aug, 2019
Puzzled
The subject behaves in an unexpected manner: when I put Ms. Higgins' enamel pan as a trap, the subject pourred milk and left a letter. The subject is a wonderful strategist. Cleverr trrap.
08 Aug, 2019
Rethinking strategies
Ah, Ms. Higgins calls for dinner, no time. Tomorrow.
09 Aug, 2019
New strategies
What if my strategies are wrong?
10 Aug, 2019
The end
Drrinking milk together with Mr. Reddie the Mouse, my friend.

Horizontal Layout

Timeline data can be organized as a horizontal layout.

Click tabs to see all types.

01 Aug, 2017
Available
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
10 Sep, 2017
Taken
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
11 Dec, 2017
Broken
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
10 Feb, 2018
Fixed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
15 Mar, 2018
Available
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
21 Mar, 2018
Taken
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
16 May, 2019
Broken
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
02 Jun, 2019
Fixed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
10 Sep, 2019
Available
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
23 Sep, 2019
Deprecated
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.

Timeline API

Timeline has the API for data operations, such as adding, updating, removing, filtering, and sorting points.

Click 'Start' to start log writing.

30 Jul, 2019
Good dinner
Ms. Higgins perfected her skills in making souffle
31 Jul, 2019
Butter flies
Let butter fly like butterflies. I wish Ms. Higgins appreciated the poetry of a broken butter bowl as much as I do.