# Create GanttSheet

## Content

To create a GanttSheet, follow the below steps:

1. Add the following script files to use the GanttSheet.

    ```
    <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script>
    <script src='.../spreadjs/plugins/gc.spread.sheets.tablesheet.x.x.x.min.js' type='text/javascript'></script>
    <script src='.../spreadjs/plugins/gc.spread.sheets.ganttsheet.x.x.x.min.js' type='text/javascript'></script>
    ```

1. Generate a spread container, then add a sheet tab with the ganttSheet type.

    ```javascript
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spread");
    var ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);
    ```
2. Initialize the data manager using the [DataManager](/spreadjs/api/v17/classes/GC.Data.DataManager) method.

    ```javascript
    var dataManager = spread.dataManager();
    ```
3. Add a table in the Data Manager using the [addTable](/spreadjs/api/v17/classes/GC.Data.DataManager#addTable) method. This method accepts the table name as a string and the [IDataSourceOption](/spreadjs/api/v17/modules/GC.Data#idatasourceoption) interface options.

    ```javascript
    var myTable1 = dataManager.addTable("myTable1", {
        batch: true,
        remote: {
            read: {
                    url: apiUrl
                  }
    },
    ```

    > **Note**: Since the data has a relation to the GanttSheet, you should use batch mode to save them.
4. Define the required hierarchy schema based on your data source structure.

    ```javascript
    schema: {
        hierarchy: {
            type: "Parent",
                column: "parentId"
                },
                columns: {
                    id: { isPrimaryKey: true },
                    taskNumber: { dataType: "rowOrder" }
                }
    }
    ```

    To know more about different hierarchy types, please refer to the "Hierarchy Types" page.
5. Add a view to the table of the Data Manager using the [addView ](/spreadjs/api/v17/classes/GC.Data.Table#addView)method and define column info to initialize a GanttSheet.

    ```javascript
    ganttSheet = spread.addSheetTab(0, "GanttSheet1", 
    GC.Spread.Sheets.SheetType.ganttSheet);
    var view = myTable1.addView("myView1", [
        { value: "taskNumber", caption: "NO.", width: 60 },
        { value: "name", caption: "Task Name", width: 200 },
        { value: "duration", caption: "Duration", width: 90 },
        { value: "predecessors", caption: "Predecessors", width: 120 , visible: false}
    ]);
    ```
6. Fetch using the [fetch](/spreadjs/api/v17/classes/GC.Data.Table#fetch) method of the Data Manager table and then bind the fetched view to the GanttSheet using the bindGanttView method.

    ```javascript
    view.fetch().then(function () {
    ganttSheet.bindGanttView(view);
    });
    ```