Click here to Skip to main content
14,984,032 members
Articles / Programming Languages / Javascript
Article
Posted 15 Jun 2015

Tagged as

Stats

30.2K views
17 bookmarked

Creating your own online Gantt application with dhtmlxGantt

Rate me:
Please Sign up or sign in to vote.
5.00/5 (9 votes)
15 Jun 2015GPL36 min read

In this article I want to tell you how to build your own online Gantt chart application. I’ll use dhtmlxGantt for that purpose. I will show you how you can create a basic Gantt chart and what extra features you can add. You should have a local web-server (Apache or nginx, for example) with PHP and database (MySQL in my case) running to make everything work.

What for?

To make a long story short, Gantt charts are pretty useful, if you want to manage a complex project. The main aim is to visualize the working process. But if the existing functionality of Gantt applications is not enough, you may want to create your own one. Well, this article can be pretty handy then.

It’s quite easy to initialize a basic dhtmlxGantt chart and add some handy features to it. Definitely easier than to pronounce its name. JavaScript API allows you to customize any chart element you want. There is also a possibility to export your data to different file formats such as PDF or PNG. To see all the features available, check the project’s home page. A bunch of demos are available there as well. 

Basic chart initialization

Let’s now create our application. First, we should create some data to visualize. Then we’ll initialize the Gantt chart with this data.

First of all, you need to download the library package, of course. Then you should extract the codebase folder to the root directory of your local web server. And now, it’s time to code…

Phase one. Preparing the data

All the boring work first. We should create some data to work with. There is a possibility to use an inline data source. XML and JSON formats are available. But it’s useful for demonstration purposes only. To see how the actual application works we’ll use a database.

We should create a new database and then add two tables to it:

CREATE DATABASE gantt;
USE gantt;
CREATE TABLE `gantt_links` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `source` int(11) NOT NULL,
  `target` int(11) NOT NULL,
  `type` varchar(1) NOT NULL,
  PRIMARY KEY (`id`)
);
CREATE TABLE `gantt_tasks` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `text` varchar(255) NOT NULL,
  `start_date` datetime NOT NULL,
  `duration` int(11) NOT NULL,
  `progress` float NOT NULL,
  `sortorder` int(11) NOT NULL,
  `parent` int(11) NOT NULL,
  PRIMARY KEY (`id`)
);

Seems that everything went well:

gantt-database

 

Now we need to use some PHP functionality to handle our new database. We’ll use the dhtmlxConnector library for that purpose. Create the data.php file and add the proper code into it:

 

PHP
<?php

include ('codebase/connector/gantt_connector.php');

$res=mysql_connect("localhost","root","");
mysql_select_db("gantt");

$gantt = new JSONGanttConnector($res);
$gantt->render_links("gantt_links","id","source,target,type");
$gantt->render_table(
    "gantt_tasks",
    "id",
    "start_date,duration,text,progress,sortorder,parent"
);
?>

As you can see, it selects our previously created gantt database and uses two tables from it.

Data handling is done. Let’s move to the index.html file and make our chart work.

Phase two. Chart initialization

To make a basic Gantt chart work we need to include the dhtmlxgantt.js and dhtmlxgantt.css files into our project. You can find them inside the codebase folder. I’ve added some CSS code to make sure everything will work fine in the full-screen mode. Check the <style></style> tags content to see what I’ve done here. All the chart code is placed within the <body></body> tags. The <div></div> pair of tags contains the chart. I’ve set its height and width properties to 100% to make sure that chart will take all available space. Don’t forget to set the id attribute. We’ll use its value later to initialize our chart. Here’s my index.html file:

HTML
<!DOCTYPE html>
<html>
<head>
    <title>My Own Gantt Chart</title>
    <script src="codebase/dhtmlxgantt.js"></script>
    <link href="codebase/dhtmlxgantt.css" rel="stylesheet">
    <style type="text/css">
        html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;}
    </style>
</head>
<body>
    <div id="my_gantt" style="width:100%; height:100%;"></div>
    <script>
    //All the Gantt chart code goes here
    </script>
</body>
</html>

Now it’s time to breathe some life into our project. All the code below should be added inside the <script></script> tags of our index.html file.

We need to make the format of output data compatible with the format of dhtmlxGantt:

JavaScript
gantt.config.xml_date = "%Y-%m-%d %H:%i"; 

Now we can initialize our chart:

JavaScript
gantt.init("my_gantt");

Load the previously created data:

JavaScript
gantt.load('data.php');

And the final step is to provide the ability to update our data. The dhtmlxDataProcessor helper library is what we need here and now:

JavaScript
var dp=new dataProcessor("data.php");   
dp.init(gantt);

Well, that’s all. These are the five steps that we need to initialize the chart. Let’s check the result:

gantt-init

“I can’t see any charts!” you may say. Don’t worry. As we’ve created an empty database, there’s no data by default. But we can simply create some tasks using the “+” button at the top:

new-task-gantt

The triangle in the bottom left corner of a task will help you to set the current task’s status. By dragging the circle at the task’s edge, it’s possible to set a dependency with another task.
There is another “+” button on the right side of the task description as you can see. It allows you to create a subtask.

Image 4

So, what do we have by default? You can edit your tasks by double-clicking them, drag tasks horizontally to change the start date, resize tasks to change their duration. It’s easy to define dependencies between the existing tasks. Besides, we’ve created this chart using less than 50 lines of code.

Adding extra features

There is a guides page that will help you to add new features to your Gantt chart. Let’s try a couple of them to see how it all works.

Exporting

With dhtmlxGantt you can export your chart to a file. It may be useful if you want to show someone your project’s current progress, for example. There are PDF, PNG, Excel and iCal output formats available. To make the export feature available you should include api.js to your file:

JavaScript
<script src="http://export.dhtmlx.com/gantt/api.js"></script>  

Now you’re free to use export functions. As an example, I’ve created a simple drop-down list and a JavaScript handler for it. Add this code before the <div id="myGantt"></div> tag:

JavaScript
<select id="export" style='margin:10px;' onchange='exportTo()'>
  <option>Export to...</option>
  <option value="pdf">PDF</option>
  <option value="png">PNG</option>
  <option value="excel">Excell</option>
  <option value="ical">iCal</option>
</select> 

As you can see, it allows you to choose one of the available file formats. Now, let’s handle a user’s choice. Here’s my even-baby-will-understand handler. Insert it within the <script></script> tags.

JavaScript
var exportTo = function() {
    var output = document.getElementById("export").value;
    switch (output) {
        case "pdf": gantt.exportToPDF(); break;
        case "png": gantt.exportToPNG(); break;
        case "excel": gantt.exportToExcel(); break;
        case "ical": gantt.exportToICal(); break;
        default: alert("Wrong file format");
        }
};

export-pdf-gantt

As you can see, all you need to export a Gantt chart to a file is a single method.

Important tasks

You can highlight partially completed tasks. If there are a lot of them, you should work harder. But not on your weekends, off course! So, let’s highlight them too. We’ll use the gantt.templates object for this task. It allows us to configure the templates for dates and labels used in the Gantt chart.

Let’s start with the styling work. Add this code between the <style></style> tags:

CSS
.important{
    border:2px solid red;
    color:red;
    background:red;
}
.important .gantt_task_progress{
    background: #ff5956;
}
.weekend{ 
    background: #f4f7f4 !important;
}

This CSS code defines the style to highlight critical tasks and weekends. Now we need to change the chart behaviour. You should add this code before the gantt.init() line. First, the weekends:

JavaScript
gantt.templates.scale_cell_class = function(date){
    if(date.getDay()==0||date.getDay()==6){
        return "weekend";
    }
};
gantt.templates.task_cell_class = function(item,date){
    if(date.getDay()==0||date.getDay()==6){ 
        return "weekend" ;
    }
};

We used the scale_cell_class template to highlight the timescale area and the task_cell_class for the chart area.

Now, the tasks:

JavaScript
gantt.templates.task_class=function(start,end,task){
    if(task.progress > 0.5){
         return "";
    }else{
        return "important";
    }
};

Let’s see how it looks like now.

Image 6

As you can see, all critical tasks and weekends are highlighted now.

Single line features

Let’s now add some more features. We’ll use the gantt.config object.
This code:

JavaScript
gantt.config.order_branch = true;

Enables drag-n-drop reordering. So, you can change the order for a single subtask in case of a force majeure of any kind.

To enable sorting you should set the sort property to true:

JavaScript
gantt.config.sort = true; 

Which will allow you to define the most exhausting tasks:

Image 7

And finally, my favorite one. Changing the skin. There are four of them available: Terrace, Skyblue, Meadow and Broadway. To change the skin, you need to include a proper .css file to your project:
<link rel="stylesheet" href="codebase/skins/dhtmlxgantt_broadway.css" type="text/css">

Here’s how it looks like now:

Image 8

In total

dhtmlxGantt is an easy coding and good looking application. Default chart is pretty simple and low functional, but there is a lot of handy features that can turn it into an advanced one. Guides page will help you with that. I’ve created a simple Gantt chart app and it’s already allows me to make this:

Image 9

So, I hope that this tutorial will help those developers who start exploring dhtmlxGantt and need simple explanation on how to implement this project management library to their applications. I've tried to describe it as easy as possible not diving deep into details. You're welcome with your questions. Thanks for reading.

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

Share

About the Author

Stas Wolski
Software Developer (Senior)
Russian Federation Russian Federation
Building web apps since 2001. Rich experience in HTML frontends for different platforms.

Comments and Discussions

 
QuestionGantt.$resourcesStore.parse() Pin
Member 1462797118-Oct-19 20:57
MemberMember 1462797118-Oct-19 20:57 
QuestionPlease post a working demo example with full code Pin
Member 1434560229-Apr-19 2:47
MemberMember 1434560229-Apr-19 2:47 
QuestionTOTALLY DOESN'T WORK MAN Pin
noRTH121223-Oct-17 9:03
MembernoRTH121223-Oct-17 9:03 
Questionreally nice Pin
William Tian1-Aug-16 19:52
MemberWilliam Tian1-Aug-16 19:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.