Webix Gantt Chart. Handy web tool for efficient project management

In a previous article on one of the most popular Agile approaches, I introduced you to such a Japanese project management tool as "Kanban". And today I'm going to move from the far east to the far west part of the world. In this publication, you will learn about the "Gantt" method, its history and modern implementations.

Background

The first prototype of the so-called "Gantt Chart" was invented, oddly enough, by the Polish engineer Karol Adamecki back in 1896. He developed a fundamentally new approach for visualizing and analyzing interrelated processes in production (steelmaking) and successfully used it in practice. Later, he named his invention the "harmonogram".

Since Adametsky published only in Russian and Polish, his work was not widely known in English-speaking countries. But in 1910, another American engineer, Henry Gantt, introduced his own analogue of a similar system in the United States. He used his invention to track the time that factory workers spent on the current tasks.

Subsequently, these two systems were combined into the solution we now know as "Gantt Chart".

Application

So, let's find out what kind of tasks can be covered using Gantt Chart. Generally, such a system allows one to solve several issues related to project management at once.

First of all, you will be able to plan each stage of the project with well-defined start and end dates of the workflow.

Besides, the Gantt Chart allows you to identify milestones, the most important events of the project. And thanks to the development of software, the Adamecki-Gantt chart allows you to track the progress of tasks, link dependent tasks, manage resources and costs, and improve collaboration between team members. But it was not always so.

Development

For a long time, such diagrams were drawn on paper by hand. As a consequence of any change to the graph, the entire diagram had to be redrawn.

Later, project managers started using paper tapes and special rectangles to indicate the columns of the chart. This approach made the analysis process significantly faster. The reason was that the key elements could be freely moved, rather than redrawing the diagrams again and again.

In a modern management environment, no one uses hand drawing for such analysis anymore. If you ask Uncle Google about the digital analogues of the Gantt Chart, the browser will show you a lot of ready-made apps, both paid and free. They will more than cover the basic needs of the average project manager.

But what if you are faced with the task to implement such a system in your own application? The answer is simple - you need to look not for a static app, but for a flexible widget that can be used both independently and as a plug-in.

In this article, I want to talk about one of such widgets. Next, we will dive into the JavaScript Gantt Chart developed by the Webix team. Let's see what it is and what its advantage is.

What is Webix Gantt Chart

Webix Gantt is a comprehensive JavaScript solution for Agile project management. In short, the widget functionality allows working with projects of any complexity, scheduling tasks and tracking their progress, marking important workflow milestones, managing resources, and much more. In fact, you can find all this functionality in the vast majority of such kinds of apps.

To save your time, I will skip the detailed description of trivial things related to the functionality. After all, if you are reading this article, you already have some idea of ​​​​the basic principles of working with Gantt Charts. But if you still want to refresh your knowledge, you can find all the information you need in the appropriate guide.

Now let's take a closer look at the benefits of the Gantt Chart widget and its configurations.

Advantages

On the Internet, you can find a lot of ready-made applications and services that allow you to create Gantt Charts and use them to manage your projects. But the weak side of such tools is their static state.

If we are talking about desktop apps, they need to be installed and used locally. When using the corresponding online services, you need to share all your data with a third-party resource. This approach is more flexible, but it doesn't look safe.

In both cases, you are limited to the initial functionality that was laid down by the developers of the respective products. The other side of the coin is that you need to use only 10 of the 100 features proposed. In this case, you have no way to shed the "extra ballast." And this, in turn, will affect the app's performance.

So now let's dive into the advantages of a similar solution offered to us by the Webix team. Based on the fact that Gantt Chart is a web application written in JavaScript and CSS, you can:

• use the widget as a separate app, or integrate it as a third-party module (with React, Angular, and other frameworks)
• flexibly configure the component, by adding only features that cover your project needs
• customize the appearance and behavior of the component, not limited to the basic functionality
• use the ready-made Node.js and Go backend, or connect your custom one.

If you don't see clear advantages in all I have mentioned above, and the flexibility of settings is not a priority for you, then you should look for another tool. As a variant, you can look at the GanttPro service.

The next part of the article is for those who think out of the box and are not limited to certain templates. I will tell you more about how to initialize, configure, customize, and localize the Gantt Chart widget.

How to Create a Widget with Basic Functionality

Let's start with the fact that Gantt Chart is an advanced extension of the Webix library. To use the widget, include the library resources first, and then the corresponding .js and .css files of the widget itself.

<head>
  <!-- Webix resources -->
  <script src="codebase/webix.js" type="text/javascript"></script>
  <link rel="stylesheet" href="codebase/webix.css" type="text/css">

  <!-- Gantt Chart resources -->
  <script type="text/javascript" src="codebase/gantt.js"></script>
  <link rel="stylesheet" href="codebase/gantt.css" type="text/css">
</head>

After including the required scripts, you need to call the widget's constructor. To start executing the app code only after the page is fully loaded, pass it to the webix.ready(…) function.

<body>
  <script>
    webix.ready(function(){
      /*Gantt Chart constructor*/
      webix.ui({
        view:"gantt", 
        url:"your_backend"
      });
    });
  </script>
</body>

As you can see, to initialize the widget you only need to write a few lines of code. Now you can create and manage your projects using a convenient interface and basic functionality.

A few more words about licensing. Like other complex widgets, Gantt Chart depends on the Webix core and is distributed with the Pro version of the library.

You can download the trial Pro version with all complex widgets, which is free for 30 days. This will allow you to try all the benefits and flexibility of working with the Gantt Chart in practice. And after this, you can decide whether this tool is right for you or not.

Configuring

Webix Gantt Chart is a kind of constructor. It consists of several components of the core library. Each of them includes an API with which you can customize the appearance and behavior of certain parts of the interface. Besides, the widget has a set of its own configurations.

It is worth clarifying here that you can configure the widget using the simplest and most convenient JSON syntax. All you need is to set the necessary properties to the appropriate values. Let's look at some of the configurations in detail.

Connecting to Backend

To start working with your projects, you need to load the corresponding data. In a real case, the data will be stored on a remote server. When initializing the app, you should specify a link to the server script (your own or one of two solutions available on our github). Gantt will load your project data and send all changes back to the server if needed.

To connect Gantt Chart to the backend, use the url property. Read more about working with the server side in the corresponding article.

{
  view: "gantt", 
  url: "your_backend" // a link to your server script
}

Linking Tasks

Each project may include a huge number of additional tasks. Each of these tasks may directly depend on the readiness of other tasks. To visualize such dependencies, the widget provides special lines that allow you to link the tasks to each other.

This kind of linking is supported by default. To switch it off, you need to set the links property to false:

{
  view: "gantt", 
  …,
  links: false
}

Critical Path

Each project has certain time frames. To meet the deadline, it is necessary to complete each of the tasks timely and consistently.

To analyze the project deadline, the widget provides a special critical path. It allows you to display a chain of tasks that need to be completed on time to meet project deadlines.

Gantt Chart analyzes only the tasks with the "end-to-start" links. If the schedules of such tasks are overlapped or set without considering the margin of time (and real life can be unforeseeable), the widget will consider them critical and highlight in red.

To show the critical path, you need to set the criticalPath property to true:

{
  view: "gantt", 
  …,
  criticalPath: true
}

Split Tasks

Besides the links between different tasks, you can also create related subtasks within a specific task. The parts of a split task will be displayed in one row and connected to each other by a dotted line.

Unlike the basic tasks, subtasks of a split task are not displayed in the tree and cannot include nested items.

To enable split tasks, you need to set the split property to true:

{
  view: "gantt", 
  …,
  split: true
}

Working with Resources

One of the distinguishing features of Webix Gantt is the ability to work with resources. You can efficiently manage resources by assigning them to certain project tasks. You will also be able to view resources in the tree and chart using a special mode, as well as analyze the workload of resources via a special diagram.

To enable the resources support, you need to set the resources property to true:

{
  view: "gantt", 
  url: "your_backend",
  resources: true
}

The widget will load the required data by the specified url. After this, the users will be able to manage the corresponding resources via a suitable editor.

Resources View Mode

By default, the widget displays only the tasks in the tree and chart. In this way, you can view the projects, tasks and subtasks, as well as milestones (significant project events).

But you can switch to the resources view mode as well. In this mode, the widget displays only the tasks grouped by resources they are assigned to. There is also a separate Unassigned section that contains all the unassigned tasks.

To enable the resources view mode, you need to set the display property to a "resources" value:

{
  view: "gantt",
  …,
  resources: true, // required string!
  display: "resources"
}

Resources Diagram

Besides the view mode, you can also display resources on a special diagram. It allows you to analyze the workload of each resource by hours and tasks for each work day. If the resource limit is exceeded, the Gantt will highlight it in red on the diagram.

To display the resources diagram, you need to enable the resources support and set the resourcesDiagram property to true:

{
  view: "gantt",
  url: "your_backend",
  resources: true, // required string!
  // show the diagram under the main chart
  resourcesDiagram: true
}

In the sections above, I described only a small part of all the Gantt Chart settings. You can find the full list of widget configurations in the corresponding article.

Customization

Besides configuring via the built-in settings, you have an ability to customize almost any part of the interface and its behavior. But for this, you need to understand what is going on under the hood of Gantt Chart.

The structure of the widget is built as a SPA application based on the MV pattern of the Webix Jet framework. In this case the interface (View) is separated from the business logic (Model). Each of the interface elements is a separate component of the Webix library (button, select, toolbar, and others).

Significant parts of the interface (tree, chart, and others) are stored in separate classes inherited from the JetView class. And the business logic, which is a model, is also stored separately in the form of modules. In the context of framework, these modules are called services.

To customize the interface and logic of the app, all you need to do is get a PhD in programming and then dig into the widget code a bit :) And even for this, you need to know at least the key principles of working with the Webix Jet framework.

Read the "Webix Jet framework through the eyes of a freshman" article to find out the basic principles of working with the framework, or refer to the documentation for more detailed information.

How to Customize the Interface

And now let's move on to the customization itself. As I mentioned above, each element of the interface is a separate component of the Webix library. Each significant part of the interface is a class that consists of these components. You can easily change, add, or completely remove any part of the interface.

Let's imagine that you have to add an extra column to the task tree. First, you need to create a new CustomTree class by inheriting it from the class that stores the task tree interface settings (gantt.views.tree).

In this case, we are going to use the config() method included into all non abstract classes of the widget. This method defines a module view. To change the module interface, you need to override either the config() or init() methods. The common rule works in the following way: if you are sure that all changes in the UI don't break the inner logic, you can use the config() method. Otherwise, you need to use the init() one.

The config() lifecycle method is inherited from the JetView class. It is responsible for customizing the part of the interface that you want to change.

Inside this method, you should get the configuration object of the new class. It corresponds to the configurations of the treetable component.

After this, you can add a new column template into the array of the columns property and return the new settings. In code, it looks like this:

class CustomTree extends gantt.views.tree {
    config() {
      const ui = super.config(); // get config object of treetable
    // add a new column template
      ui.columns.splice(3, 0, {
        id: "progress",
        header: "%",
        template: "#progress#%",
        width: 50,
      });
    // return new settings
      return ui;
    }
}

Next, you need to replace the class you inherited with the one you created. This can be done using the override property in the widget constructor:

{
    view: "gantt",
    url: "https://docs.webix.com/gantt-backend/",
    override: new Map([[gantt.views.tree, CustomTree]])
}

This is a simple way to change the interface of Gantt Chart. To learn more about the widget customization, refer to its documentation.

Localization

The ease of localization is one of the nice bonuses of the Gantt widget. By default, all the interface labels are displayed in English. But you can easily create several custom locales and switch between them.

To translate labels in a particular language, you should create a separate locale and specify the necessary translations there.

gantt.locales.ua = {
  "Add task": "Добавити завдання",
  "Add project": "Добавити проект",
  …
};

When the locale with custom translations is ready, you should apply it to the entire app. This can be done using the locale property in the widget constructor:

{
  id: "gantt_id",
  view: "gantt",
  url: "your_backend",
  locale: {
    lang: "ua"
  }
}

If you want to create an international app, you should provide several locales and switch between them dynamically. To do this, you need to access the locale service of the Jet framework using its getService() method. After this, call the setLang() method of the locale service. It takes the name of the locale to be applied as a parameter.

const locale = $$("gantt_id").getService("locale");
locale.setLang(/* your locale */); // ua, en, ru, custom_one 

Note that the widget is distributed only with the English locale by default. But the library provides a special place where users can post custom locales as well. These translations can be found on the webix-hub.

Conclusion

In this article, I introduced you to the Webix Gantt widget and its main features. As you can see, it is a very functional and flexible component in terms of configuration and customization. Among other things, you can integrate it with any framework or library. To find more information about the capabilities and settings of Gantt Chart, refer to the widget documentation.