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.

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.