How to get started easily with HTML/JavaScript Gantt Chart
This article explains you the steps required to create a simple Essential JS 2 Gantt chart in a JavaScript application. The following are the dependencies required to run Gantt sample.
Dependencies
Following is the list of minimum dependencies required to use the Gantt.
|-- @syncfusion/ej2-gantt |-- @syncfusion/ej2-treegrid |-- @syncfusion/ej2-base |-- @syncfusion/ej2-data |-- @syncfusion/ej2-popups |-- @syncfusion/ej2-grids
Setup for local development
Clone the Essential JS 2 quickstart application project from GitHub and install the necessary npm packages using the following command line scripts.
git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install
Adding CSS and Script reference
Combined CSS and script files are available in the Essential JS 2 package root folder. This can be referenced in your index.html using the following code.
Scripts: **(installed location)**\Syncfuion\Essential Studio\Javascript – EJ2\ {RELEASE_VERSION}\Web(Essential JS 2)\JavaScript\ej2\dist\ej2.min.js
Style: **(installed location)**\Syncfusion\Essential Studio\JavaScript – EJ2\ {RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\material.css
The below hosted CDN links contains all Syncfusion JavaScript (ES) control resources in a single file.
Scripts: https://cdn.syncfusion.com/ej2/dist/ej2.min.js Styles: https://cdn.syncfusion.com/ej2/material.css
Adding Gantt component
You can start adding Essential JS 2 Gantt component to the application. To get started, add the Gantt component HTML file using the following code.
Place the following Gantt code in the script section.
<script type="text/javascript">
var ganttChart = new ej.gantt.Gantt({
dataSource: [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [2, 3, 5] },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4,Predecessor:"2FS", Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, resources: [4] },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, resources: [4, 8], },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0,Predecessor:"6SS", Progress: 50, resources: [12, 5] }
]
},
],
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
}
});
gantt.appendTo('#Gantt');
</script>
Now, add an HTML div element to act as the Gantt element using the following code.
<!DOCTYPE html> <html lang="en"> <head> <title>Essential JS 2</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta name="description" content="Essential JS 2" /> <meta name="author" content="Syncfusion" /> <link rel="shortcut icon" href="resources/favicon.ico" /> <!--style reference from app--> <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> <!--system js reference and configuration--> <script src="https://cdn.syncfusion.com/ej2/17.3.9-beta/dist/ej2.min.js" type="text/javascript"></script> </head> <body> <!--Element which will render as Gantt--> <div id="Gantt"></div> </body> </html>
Please refer the example from the following GitHub link.
Example – Getting Started with EJ2 Gantt
Please refer demos and UG documentation to know about Gantt Chart control.
