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

DHTMLX Gantt Chart in Webix Web Apps

Modern project managers need a fast and easy-to-use tool that will allow them to manage projects: add new tasks, set time limits for them, create different relationships between the set tasks and etc.
Update of October 8, 2020

With the release of Webix 8.0 the original JavaScript Gantt Chart component has become available. Now Webix users can enjoy the native Webix Gantt. This component is created according to the canons of the Webix framework and it is intended for the integration into any business applications regardless of their architecture and system platform. 

Webix Gantt

You can download the free version of Gantt by following this link. You can find more detailed information on the Gantt home page, on the JS Gantt documentation page or in the Gantt source code sample catalog

DHTMLX Ganttis that very widget which has all the above mentioned features and even more. The uplifting news is that Webix can be used with DHTMLX Gantt Chart.

You can add DHTMLX Gantt Chart into a Webix app in a few lines of code. As a result, you’ll combine the features of both products in one powerful web app.


gantt chart+webix

The main Gantt features are:

  • Intuitive UI
  • Full customization
  • Sorting and filtering
  • Flexible API
  • 3 types of linking tasks: finish-to-start, start-to-start, finish-to-finish

To learn more about DHTMLX Gantt Chart you should read its detailed description.

So let’s integrate DHTMLX Gantt Chart into your Webix app.

Firstly, download all necessary files from open third-party components repository to connect your app to this third-party library.

Secondly, you need to add a Gantt component into your app with this code line:

<script type="mce-text/javascript" src="components/gantt/gantt.js"></script>

Thirdly, init the view:

 webix.ui({
    view:"dhx-gantt",
    init:function(){...},
    ready:function(){
        gantt.parse(tasks); //adding tasks
    }
});

Gantt Properties:

  • init – functions to implement initialization;
  • ready – specifies a function that is triggered when the component is fully loaded.

As you see, by making several painless manipulations you’ll be able to add DHTMLX Gantt Chart into your Webix app. It will be an excellent symbiosis.

Try to develop your own web app with Gantt. Read the detailed technical info in Webix Documentation and DHTMLX Documentation.