Create a Gantt Chart

To create an easy Gantt chart, you must have two objects:

1. Edo. Project. ganttview: Gantt Chart display component

2. Edo. Data. dataproject: Gantt chart data component

The ganttview component is a general easy-to-use Gantt Chart component. It is an interface display component, a left-side tree task and a right-side bar chart component.

Dataproject is a Gantt chart data component that provides the Gantt chart display and operation logic data functions. It is an invisible component.

The two work together to implement a complete Gantt chart application,

In addition, you have to say another key component: Edo. util. Ajax.

Our Gantt chart data is often stored on the server in XML or JSON static mode, or in a database mode. When the Gantt chart is displayed on the page, you need to extract the data from the server to generate a dataproject data object before ganttview can display it correctly.

Here, Ajax is responsible for obtaining data from the server to display and operate the Gantt chart on the client page. After the Gantt chart operation, it transfers the Gantt chart data to the server in XML or JSON format, new database features.

The following uses a standard example to describe the entire process of creating an easy-to-use Gantt chart application on the page:

First, we need to reference the CSS and Js of the easy Gantt chart on the page:

<!--edogantt css-->
<link href="../scripts/edo/res/css/base.css" rel="stylesheet" type="text/css" />
<link href="../scripts/edo/res/css/core.css" rel="stylesheet" type="text/css" />
<link href="../scripts/edo/res/css/skin.css" rel="stylesheet" type="text/css" />
<link href="../scripts/edo/res/product/project/css/project.css" rel="stylesheet" type="text/css" />
<!--edogantt javascript-->
<script src="../scripts/edo/edo.js" type="text/javascript"></script> 

Note: Check whether the CSS and JS paths are correct.

Then, we can use ajax to obtain Gantt chart data, create dataproject, create ganttview, and finally generate a web Gantt chart application:

VaR dataproject, project;

Edo. util. Dom. On (window, 'load', function (e ){
// Create the easy degree Gantt Chart component
Project = Edo. Create ({
Type: 'ganttview ',
Width: 700,
Height: 400,
Render: Document. getelementbyid ('example-view ')
});

// Obtain the Gantt chart data string from the server using Ajax
Edo. util. Ajax. Request ({
URL: '../data/Project. xml', // Data Source Address: note the path
Onsuccess: function (text ){
// Use an XML string to create an Edo. Data. dataproject Data Object
Dataproject = new Edo. Data. dataproject (text );

// Dataproject can be displayed and operated only when the data attribute of the ganttview object is set.
Project. Set ('data', dataproject );
},
Onfail: function (ERR ){
Alert ("failed to load XML data, error code:" + ERR );
}
});
});

The above is an example of loading XML data format from the server. If you are loading JSON format, refer to the following code:

Edo. util. Ajax. Request ({
URL: '../data/project.txt ',
Onsuccess: function (text ){
// Create an Edo. Data. dataproject data object from JSON
VaR JSON = Edo. util. JSON. Decode (text );
Dataproject = new Edo. Data. dataproject (JSON. Result );

Project. Set ('data', dataproject );
},
Onfail: function (ERR ){
Alert ("failed to load XML data, error code:" + ERR );
}
});

It is only different processing when Edo. Data. dataproject is created.

After creating an easy-to-use Gantt chart, the easy-to-use Gantt Chart component provides a series of functional operations. For example, you can click the cell in the task tree to edit the task, and drag and drop the mouse to adjust the task start date, completion date, and completion percentage in the bar chart area on the right, and "add, delete, modify, upgrade, downgrade" and other task operations in the right-click menu.

Note! If you do not listen to any events that process a Gantt chart after creating a display Gantt chart, the status of the task after the task operation will not change, and the operation results of all tasks will all pass the Gantt chart event, open to users. Users can monitor and process the status of tasks.

That is to say, the Yidu Gantt Chart Only encapsulates the display and operation functions. However, the operation results are completely controlled by the user without interference.

For example, if you modify the completion date of a task on the page, the taskchange event is triggered. You can listen to the task change event and find out which task is the task.
What attributes should be changed. You can simply set it to a task (refer to the Gantt chart task operations), or perform a series of complex data logic computing and processing to determine whether the task is feasible.
After the modification, how can the dates of other tasks associated with the task be processed together.

Gantt chart data processing is completely handed over to developers, allowing developers to have 100% control over data processing.

Yidu Gantt chart provides official event monitoring data processing examples. For details, refer to the data operation processing logic of Microsoft Project. For details, refer to the online example of www.edogantt.com.