Timeline Chart Functionality in DHTMLX

If it is necessary to visually present data over a specific time span, a timeline chart (or diagram) is exactly what you need. This type of chart serves as an effective way to show various processes that are arranged in chronological sequence.

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

It is hard to imagine a modern B2B or enterprise application without a timeline functionality. In this article, we will consider possible usage scenarios of timeline controls in project management and find out how these data visualization components are employed in DHTMLX libraries.

Timeline View in DHTMLX Scheduler

When it comes to visualization of appointments, events or crucial milestones within the project without displaying its intricacies such as task relationships, then it is better to opt for the DHTMLX Scheduler.

The main peculiarity of DHTMLX Scheduler is the availability of 10 calendar views that cover all the needs of end-users regarding the display of important project undertakings. The Timeline view is one of the most widely used views designed to showcase events or tasks assigned to resources along the timeline. Under resources, we usually mean project members responsible for tasks, meeting rooms where appointments take place, or accommodation and vehicles available for booking.

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.

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.

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.

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.

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.

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.

Final Words

Time is a key metric in any business endeavor and timeline charts aid in organizing timeframes in such a way that projects can be delivered without delays. There are numerous software solutions for project management already available on the market. But integrating a ready-made component with a convenient API instead of using a costly external service can be a win-win for software development companies and their clients.

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.

Source: https://dhtmlx.com/blog/javascript-timeline-chart-functionality-dhtmlx/




Viktoria Langer

DHTMLX Scheduler .NET product care manager and customer manager since 2012. Interested in ASP.NET and trying to create valuable content.

Recent Blog Posts