dhtmlxGantt is a full-featured Gantt chart for cross-browser and cross-platform applications. The most complete Gantt chart library for all project management application needs. Gantt charts remain one of the most requested tools in project management applications, and the DHTMLX Gantt component provides the essential tools needed to enhance the functionality of R&D Gantt charts.
In this article, you will learn how to add a basic JavaScript Gantt chart to a web application, and use pure JS/HTML/CSS and configure some common functions to manage the project.
Download and install DHTMLX Gantt
Prerequisites: First it is necessary to create a simple HTML page where your Gantt chart items will be placed.
In this tutorial, we will explain how to add Gantt components to web pages via script tags so that no build tools or configuration is required to run the examples. Note that Gantt can also be imported as an ES6 module, we'll discuss that later.
The easiest way to get started with Gantt is to enable an open source version on your server:
<link rel="stylesheet" type="text/css" href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css">
<script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>You can also download DHTMLX Gantt and use it locally.
DHTMLX Gantt official version download
After downloading your preferred version of Gantt, install Gantt by unzipping the downloaded package into a folder in your project, and add links to the JS and CSS files in the HTML documentation:
<head>
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>Gantt initialization
Before you can perform this important step, you must create the div container on your page, which is required when Gantt is initialized.
<body>
<div id="gantt_here" style='width:100vw; height:100vh;'></div>
</body>Now you should initialize Gantt in the div container using the init method, which takes the container's ID as a parameter.
<script>
window.addEventListener("DOMContentLoaded", function () {
gantt.init("gantt_here");
});
</script>At this point you're ready to start using the JavaScript Gantt chart, but for clarity, let's add some project data.
Add Gantt chart data
After the initialization is complete, you can directly add Gantt chart data in the HTML document or JS file, and these data will be used as the basis for constructing the Gantt chart. In our example, add two projects and two embedded tasks for each project:
- Planning social research: 1) choosing a research question 2) developing a research design
- Conduct social research: 1) data collection 2) analysis of results
Here you can also specify the start/end dates, execution order and progress of the project and related tasks.
gantt.parse ({
"data": [
{ "id": "10", "text": "Social Research Planning", "start_date": "01-04-2023", "duration": 5, "order": 10, "progress": 0.4, "open": true },
{ "id": "1", "text": "Choosing Research Problems", "start_date": "01-04-2023", "duration": 2, "order": 10, "progress": 0.6, "parent": "10", "priority": "high" },
{ "id": "2", "text": "Formulating Research Design", "start_date": "03-04-2023", "duration": 3, "order": 20, "progress": 0.6, "parent": "10", "priority": "high" },
{ "id": "20", "text": "Conducting Research", "start_date": "06-04-2023", "duration": 5, "order": 10, "progress": 0.4, "type": "project", "open": true },
{ "id": "3", "text": "Data Collection", "start_date": "06-04-2023", "duration": 2, "order": 10, "progress": 0.6, "parent": "20", "priority": "low" },
{ "id": "4", "text": "Results Analysis", "start_date": "08-04-2023", "duration": 3, "order": 20, "progress": 0.6, "parent": "20", "priority": "medium" }
],
"links": [
{ "id": 1, "source": 1, "target": 2, "type": "0" },
{ "id": 2, "source": 2, "target": 3, "type": "0" },
{ "id": 3, "source": 3, "target": 4, "type": "0" },
{ "id": 4, "source": 2, "target": 5, "type": "0" }
]
})
That's how to add a basic JavaScript Gantt chart to your project.
When it comes to the use of DHTMLX Gantt with popular JavaScript frameworks, it should be noted that Gantt charts are imported as JS modules and not added via script tags.