Category / Section
How to create an example of Javascript Gantt Chart with bootstrap theme?
4 mins read
This article provides a step-by-step introduction to configure Syncfusion JavaScript (ES5) Gantt Chart control (Essential JS 2) in the bootstrap theme and build a simple HTML web application.
Dependencies
Following is the list of dependencies to use the Gantt with all features:
|
Setup for local environment
Refer to the following steps to setup your local environment:
Step 1: Create a root folder `myapp` for your application.
Step 2: Create `myapp/resources` folder to store local scripts and styles files.
Step 3: Create `myapp/index.js` and `myapp/index.html` files for initializing Essential JS 2 Gantt control.
Adding Syncfusion resources
The Essential JS 2 Gantt control can be initialized by using either of the following ways:
- Using local script and style.
- Using CDN link for script and style.
Using local script and style
You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)] build installed location.
After installing the Essential JS 2 product build, you can copy the Gantt and its dependencies scripts and style file into the `resources/scripts` and `resources/styles` folder.
Refer to the following code to find the location of Gantt script and style file.
Syntax:
Script: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Styles: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/styles/bootstrap4.css
Example:
Script: C:/Program Files (x86)/Syncfusion/Essential Studio/16.4.40/Essential JS 2/ej2-gantt/dist/global/ej2-gantt.min.js Styles: C:/Program Files (x86)/Syncfusion/Essential Studio/16.4.40/Essential JS 2/ej2-gantt/styles/bootstrap4.css
After copying the files, then you can refer the Gantt’s scripts and styles into the index.html file.
The below html code example shows the minimal dependency for Gantt.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Essential JS 2 Gantt</title> <!-- Essential JS 2 gantt's dependent bootstrap theme --> <link href="resources/base/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="resources/buttons/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="resources/popups/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="resources/navigations/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="resources/lists/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="resources/dropdowns/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="resources/inputs/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="resources/calendars/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="resources/layouts/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="resources/richtexteditor/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="resources/grids/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="resources/treegrid/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <!-- Essential JS 2 material theme --> <link href="resources/gantt/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <!-- Essential JS 2 Gantt's dependent scripts --> <script src="resources/scripts/ej2-base.min.js" type="text/javascript"></script> <script src="resources/scripts/ej2-data.min.js" type="text/javascript"></script> <script src="resources/scripts/ej2-buttons.min.js" type="text/javascript"></script> <script src="resources/scripts/ej2-popups.min.js" type="text/javascript"></script> <script src="resources/scripts/ej2-navigations.min.js" type="text/javascript"></script> <script src="resources/scripts/ej2-lists.min.js" type="text/javascript"></script> <script src="resources/scripts/ej2-dropdowns.min.js" type="text/javascript"></script> <script src="resources/scripts/ej2-inputs.min.js" type="text/javascript"></script> <script src="resources/scripts/ej2-calendars.min.js" type="text/javascript"></script> <script src="resources/scripts/ej2-layouts.min.js" type="text/javascript"></script> <script src="resources/scripts/ej2-richtexteditor.min.js" type="text/javascript"></script> <script src="resources/scripts/ej2-grids.min.js" type="text/javascript"></script> <script src="resources/scripts/ej2-treegrid.min.js" type="text/javascript"></script> <!-- Essential JS 2 Gantt's global script --> <script src="resources/scripts/ej2-gantt.min.js" type="text/javascript"></script> </head> <body> <script src="index.js" type="text/javascript"></script> <!-- Add the HTML <div> element for Gantt --> <div id="Gantt"></div> </body> </html>
Using CDN link for script and style
Using CDN link, you can directly refer to the Gantt control's script and style in the `index.html`.
Refer to the Gantt's CDN links as follows.
Syntax:
Script: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Styles: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/bootstrap4.css
Example:
Script: http://cdn.syncfusion.com/ej2/ej2-gantt/dist/global/ej2-gantt.min.js Styles: http://cdn.syncfusion.com/ej2/ej2-gantt/styles/bootstrap4.css
The below html code example shows the dependency of Gantt.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Essential JS 2 Gantt</title> <!-- Essential JS 2 gantt's dependent bootstrap theme --> <link href="http://cdn.syncfusion.com/ej2/ej2-base/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="http://cdn.syncfusion.com/ej2/ej2-buttons/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="http://cdn.syncfusion.com/ej2/ej2-popups/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="http://cdn.syncfusion.com/ej2/ej2-navigations/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="http://cdn.syncfusion.com/ej2/ej2-lists/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="http://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="http://cdn.syncfusion.com/ej2/ej2-inputs/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="http://cdn.syncfusion.com/ej2/ej2-calendars/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="http://cdn.syncfusion.com/ej2/ej2-layouts/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="http://cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="http://cdn.syncfusion.com/ej2/ej2-grids/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <link href="http://cdn.syncfusion.com/ej2/ej2-treegrid/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <!-- Essential JS 2 material theme --> <link href="http://cdn.syncfusion.com/ej2/ej2-gantt/styles/bootstrap4.css" rel="stylesheet" type="text/css"/> <!-- Essential JS 2 Gantt's dependent scripts --> <script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-layouts/dist/global/ej2-layouts.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-richtexteditor/dist/global/ej2-richtexteditor.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/ej2/ej2-treegrid/dist/global/ej2-treegrid.min.js" type="text/javascript"></script> <!-- Essential JS 2 Gantt's global script --> <script src="http://cdn.syncfusion.com/ej2/ej2-gantt/dist/global/ej2-gantt.min.js" type="text/javascript"></script> </head> <body> <!-- Add the HTML <div> element for Gantt --> <div id="Gantt"></div> <script src="index.js" type="text/javascript"></script> </body> </html>
The following located script and style file contains all the Syncfusion JavaScript (ES5) UI control resources in a single file.
Scripts: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js
Styles: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\bootstrap4.css
Adding Gantt control
Now, you can add the Gantt control to the application. For getting started, add a ‘div’ element to the Gantt control in index.html. Then, refer to the`index.js file in the index.html file.
In this document context, ej2.min.js and bootstrap4.css which includes all the Essential JS 2 components and its dependent scripts and theme files are used.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Essential JS 2 Gantt</title> <!-- Essential JS 2 all material theme --> <link href="https://cdn.syncfusion.com/ej2/bootstrap4.css" rel="stylesheet" type="text/css"/> <!-- Essential JS 2 all script --> <script src="http://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> </head> <body> <!-- Add the HTML <div> element for Gantt --> <div id="Gantt"></div> <script src="index.js" type="text/javascript"></script> </body> </html>
Place the following code in the index.js file.
<script type="text/javascript">
<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: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, 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 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
],
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks',
}
});
ganttChart.appendTo('#Gantt');
</script>
The Gantt Chart created with bootstrap theme will be displayed as follows:
Also, you can download and run the sample from this link. Refer to our documentation and online samples for more features.
If you have any queries, please let us know in the comments section below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
