How To Create Gantt Chart
Posted By : Sagar Watts | 27-Nov-2017
We can represent the project schedule using the Gantt chart. To draw Gantt chart we can use a simple plugin jsGantt. It is a basic plugin which provides us most of the features which are required for gantt chart. Here is the list of some feature that are provided by the plugin : -
-
Show multiple Dependencies.
-
Show task completion percentage.
-
Different colors for Different Tasks.
-
Create task groups.
-
Different time duration for tasks.
To create a gantt chart , we need to follow these steps :
-
Include the required JS and CSS in page.
jsgantt.js
path/jsgantt.css
These are the two important files which needs to be included in your page to draw the chart effectively.
2. Create a div for gantt chart.
3. Write script for Gantt chart. We need to create a script block for Gantt Chart.The processing of data and chart creation will be done in script block, which will be rendered in above created div.
4. The initiation of Gantt chart is done in script block we have created in 3rd step.
GanttChart(pGanttVar, pDiv, pFormat)
pGanttVar: variable name.
pDiv: DIV in HTML
pFormat: duration format for chart.
All the three properties are required. Format could be "day", "week", "month", or "quarter".The complete code will look like this.
var chart = new JSGantt.GanttChart('chart ',document.getElementById(GanttChart), 'week');
chart .AddTaskItem(new JSGantt.TaskItem(pID, pName, pStart, pEnd, pColor, pLink, pMile, pRes, pComp, pGroup, pParent, pOpen, pDepend));
pID, pName, pStart, pEnd, pColor, pComp and pParent are the required properties and rest are the optional properties. pStart and pEnd is for date.
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Sagar Watts
Sagar is a bright Web App Lead Developer , he has great knowledge of core Java and advance Java. His hobbies are Net Surfing, Listen Music and Reading Books.