Powered by Blogger.

vTiger Project Gantt Chart Customization [Add-on]

One important feature of every project management software is managing the tasks of each project. To do so, the most common way is to use a gantt chart , a type of bar chart that illustrates a project schedule over a period of time.

In our last post we’ve showed how to create a project Management workflow within vtiger. Now it is time to seriously improve vtiger’s project management capabilities by adding a new charting and project plotting library called dhtmlxGantt.

dhtmlxGantt is an open source JavaScript Gantt chart that helps you illustrate a project schedule in a nice-looking chart. Having a drag and drop functionality to move or resize each task makes it really easy to manage one or all of your projects within vtiger.

In this customization we have added a new link in vtiger project module that will plot all the projects and their respective tasks in one big gantt chart. This allows you to review all the projects you are working on from one central location.

This new link will show the projects and tasks from the ListView filter marked in red in the following image:


Once you click the button you will be shown the gantt chart of the list of projects, as follows:


As you can see in the image above, each project is shown as a folder in the gantt chart, and inside each folder you may see the project tasks with all its information. By collapsing each folder, you can easily focus your attention in each particular project, instead of seeing your entire portfolio of projects.

One of the most useful features of the dhtmlxGantt library is to move, resize and set the progress for each task directly in the gantt chart. This information will be updated in vtiger database using AJAX calls. This means that without leaving the screen you can re-schedule or change the progress, start date or length of each task.


In order to deploy this customization in your vtiger install, you need to download the open source version of dhtmlxgantt library, create a JSON array of your projects tasks, and follow the documentation published here.

If you are interested in trying a demo or purchasing this module please checkout the module at our Extension Store

Meet you in our next post!
    Blogger Comment
    Facebook Comment