This data visualization tool has a wide range of applications. It is commonly used for educational purposes, in historical studies, and natural sciences. With the rapid development of computer technologies, timeline charts have also gained great popularity in the business area.
That’s how a standard timeline chart looks like. This timeline is made with the help of DHTMLX Diagram editor. Check and edit the DHTMLX timeline example >
Using timelines has become a key pillar for business-oriented apps, as any project usually consists of time-related tasks and events. The holistic view of project activities gives a clear insight into the past and current situation on the project and allows making plans for the future.
That is why business people, and project managers in particular, often rely on timeline functionality for road mapping or portfolio management, but more frequently utilize it in planning tools such as project calendars and Gantt charts.
A Gantt chart, in fact, is a form of a timeline that depicts the project workflow. It helps project managers to schedule tasks, allocate them between employees, and monitor their completion. But most importantly, Gantt charts give a chance to specify dependencies between tasks and calculate the critical path, thereby providing the management team with all necessary data to finish the project in time.
Gantt chart based on DHTMLX Gantt
To make the work with large amounts of data more convenient, the DHTMLX Gantt widget allows swiftly navigating through the timeline using a mouse scroller.
Navigating the timeline with a mouse scroller. Check the sample >
Taking advantage of a special zooming module, users are able to toggle between Gantt chart scales or even zoom the timeline using the mouse wheel.
Zooming the timeline using the mouse wheel. Check the sample >
Other aspects of the timeline scale such as height, date format, and styling can also be modified according to the needs of users.
Not showing weekends on the timescale. Check the sample >
Thanks to a flexible layout, Gantt charts can be complemented with additional grids and timelines. For example, the resource panel can be added to the default timeline for managing project resources. It contributes to achieving more productive resource allocation and balanced workload intensity.
Gantt chart with the resource panel. Check the sample >
DHTMLX Gantt supports the right-to-left (RTL) mode. In other words, the Gantt timeline can display textual data written in languages belonging to left-to-right writing systems (Arab, Persian, Hebrew, etc).
Gantt Chart in the RTL mode. Check the sample >
Timeline view of the Scheduler. Check the sample >
The Timeline view has four modes: bar, days, cell, and tree. In the bar mode events are drawn with the help of bars, which may occupy several time slots. The days mode enables developers to show days as timeline rows. The cell mode illustrates events in a matrix of cells. Several events can be appointed on the same day with the number of appointed events shown inside cells.
Cell mode of the Timeline view. Check the sample >
The tree mode allows organizing resources in a hierarchical tree structure on the Y-axis. For example, the Timeline view can demonstrate the work of departments and employees engaged in each department.
Tree mode of the Timeline view. Check the sample >
Moreover, it is possible to apply custom HTML content in all modes of the Timeline view. The sample below shows custom elements revealing the total quantity of tasks assigned to each manager.
Custom HTML content in the Timeline view. Check the sample >
The view comes with a horizontal scroll that makes it easier to browse through the whole calendar and find a specific event in no time. More than that, there is the auto-scroll feature, enabling project managers to change the time frames of calendar appointments by simply dragging them along the timeline.
Navigating through the calendar using the horizontal scroll. Check the sample >
The Scheduler component also allows setting up the second scale (X-axis) in the calendar timeline. An additional time scale is intended for grouping time spans of the default scale.
As the Gantt chart library, DHTMLX Scheduler supports smart rendering, thereby significantly enhancing the performance of the Timeline view. It can be very useful in data-intensive projects.
While dealing with different events, the project management office can take advantage of numerous helpful features embedded in DHTMLX Scheduler such as recurring events, custom tooltips, multisection events, multilanguage support, etc.
DHTMLX provides out-of-the-box controls with rich timeline functionality, which can be easily embedded into web applications. Extensive API and full customization of the DHTMLX planning tools enable programmers to adjust the components to their requirements. Thanks to a short learning curve and rapid technical support, developers won’t need much time to master DHTMLX.
DHTMLX libraries can be purchased separately as well as in a bundle complemented with the PDF/PNG and MS Project export modules at a discount.
- Timeline Example with DHTMLX Diagram
- DHTMLX Gantt Documentation
- DHTMLX Gantt Samples
- DHTMLX Scheduler Documentation
- DHTMLX Scheduler Timeline Samples