gantt
gantt copied to clipboard
DHTMLX
GPL version of Javascript Gantt Chart
dhtmlxGantt
Getting started | Features | Follow us | License | Useful links
dhtmlxGantt is an open source JavaScript Gantt chart that helps you illustrate a project schedule in a nice-looking chart.
It can show the dependencies between tasks as lines and allows you to set up different relationships between tasks (finish-to-start, start-to-start, finish-to-finish, start-to-finish).
dhtmlxGantt provides a flexible API and a large number of event handlers, which gives you the freedom to customize it for your needs.
Getting started
Add files:
<script src="dhtmlxgantt.js" ></script>
<link rel="stylesheet" href="dhtmlxgantt.css" type="text/css">
Add markup:
<div id="gantt_here" style='width:100%; height:100vh;'></div>
And initialize:
gantt.config.date_format = "%Y-%m-%d %H:%i";
gantt.init("gantt_here");
gantt.parse({
data: [
{id: 1, text: "Project #1", start_date: null, duration: null, parent:0, progress: 0, open: true},
{id: 2, text: "Task #1", start_date: "2019-08-01 00:00", duration:5, parent:1, progress: 1},
{id: 3, text: "Task #2", start_date: "2019-08-06 00:00", duration:2, parent:1, progress: 0.5},
{id: 4, text: "Task #3", start_date: null, duration: null, parent:1, progress: 0.8, open: true},
{id: 5, text: "Task #3.1", start_date: "2019-08-09 00:00", duration:2, parent:4, progress: 0.2},
{id: 6, text: "Task #3.2", start_date: "2019-08-11 00:00", duration:1, parent:4, progress: 0}
],
links:[
{id:1, source:2, target:3, type:"0"},
{id:2, source:3, target:4, type:"0"},
{id:3, source:5, target:6, type:"0"}
]
});
Complete guides
- Vue.js
- Angular
- React
- Node
- ASP.NET
- PHP
- Ruby on Rails
All tutorials
https://docs.dhtmlx.com/gantt/desktop__howtostart_guides.html
Video guides
https://www.youtube.com/user/dhtmlx/videos
Features
| Functionality | GNU GPL v2 | Commercial | Enterprise | Ultimate |
|---|---|---|---|---|
| Standard features | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Auto scheduling | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Baselines, deadlines and other custom elements | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Critical path calculation | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Custom content in the overlay | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Custom tasks types | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Decimal units for tasks durations | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Dynamic loading | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Expanding/collapsing split tasks | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Free local module for MS Project export/import | :x: | :x: | :x: | :heavy_check_mark: |
| Free local PDF/PNG export module | :x: | :x: | :heavy_check_mark: | :heavy_check_mark: |
| MS Project link formatting | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Multiple resources per task | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Online export to PDF/PNG without watermark | :x: | 1 year | 1 year | Perpetual |
| Project-level work calendars | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Project and milestones task types | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Resizing grid columns and the grid itself from the UI | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Resource histogram | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Resource management | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| S-curve to show the progress of a project | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Setting task types automatically | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Several Gantt charts on 1 page | :x: | :x: | :heavy_check_mark: | :heavy_check_mark: |
| Simple API for hiding/showing columns of the grid | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Splitting tasks into subtasks | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Tasks grouping | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Time constraints for tasks | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Working calendar for the whole project | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
Follow us
Star our GitHub repo :star:
Check our roadmap for future updates :wrench:
Read us on Medium :newspaper:
Follow us on Twitter :bird:
Like our page on Facebook :thumbsup:
License
dhtmlxGantt v.7.1.12 Standard
This version of dhtmlxGantt is distributed under GPL 2.0 license and can be legally used in GPL projects.
To use dhtmlxGantt in non-GPL projects (and get Pro version of the product), please obtain Commercial/Enterprise or Ultimate license on our site https://dhtmlx.com/docs/products/dhtmlxGantt/#licensing or contact us at [email protected]
(c) XB Software Ltd.
DHTMLX