Making your own Gantt chart with Webix

In my previous article, I've introduced you the Webix Framework. You've discovered its basic features and learned how to create a very good-looking responsive web application with it. Now it's time to take a little step forward and see what else we can do with this promising framework.

In this article, I'll show you how to create your own Gantt chart application and to complete this task I'll use the Webix framework in combination with an open source JavaScript Gantt chart called dhtmlxGantt.

But why the Gantt chart, you might ask. Well, undoubtedly it has many pros. Firstly, these charts are widely used to visualize the working process of a project due to their intuitive way of representation. Secondly, dhtmlxGantt is a Gantt chart tool which has a big list of features such as export, customizable time scale, and so on. Finally, I found a post titled DHTMLX Gantt Chart in Webix Web Apps in the Webix developer's blog and it turned out that you can add a Gantt chart into a Webix application with just few lines of code. So, I thought that they could fit well together.
If you might need help, a bunch of step-by-step guides are available as well, so feel free to use them if in doubt.

Creating a Basic Gantt Chart

Let's now create our application. First, we'll take a look at a basic chart. Then, we'll add some features to increase its functionality.

Preparing the Files

First of all, we need to download the dhtmlxGantt library package and extract the “codebase” folder to the project directory. Since the ntegration with dhtmlxGantt isn't a built-in Webix feature, we need to download required files from this GitHub repository. We are interested in is the “gantt” directory that you should place into your project directory.
I've used the Webix CDN to include Webix to my project, but you can download the full library if you want. Moreover, we need the api.js file which will allow us to use the export feature.

Continue reading %Making your own Gantt chart with Webix%

by Sergey Laptick via SitePoint