JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Gantt How to create a Multiple hierarchies in gantt chart

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #109634
    Sakthivel
    Participant

    Hi,
    I wanted to create a Gantt chart with multiple hierarchies like in this link using the DataSource which will be in the form of array of JSON objects..

    If I use JSON in the below structure I can able to get the hierarchy.

    dataSource:[
    {
    label: ‘Project 1’,
    synchronized: true,
    expanded: true,
    type: ‘project’,
    connections: [
    {
    target: 1,
    type: 0
    }
    ],
    tasks: [
    {
    label: ‘Task 1.1’,
    dateStart: ‘2020-06-10’,
    dateEnd: ‘2021-01-10’,
    type: ‘task’,
    connections: [
    {
    target: 2,
    type: 1
    },
    {
    target: 4,
    type: 1
    }
    ]
    },
    {
    label: ‘Task 1.2’,
    dateStart: ‘2020-10-10’,
    dateEnd: ‘2021-2-31’,
    type: ‘task’,
    connections: [
    {
    target: 3,
    type: 1
    }
    ]
    },
    {
    label: ‘Project 1.1’,
    dateStart: ‘2021-2-31’,
    dateEnd: ‘2021-6-1’,
    expanded: true,
    type: ‘project’,
    connections: [
    {
    target: 4,
    type: 0
    }
    ],
    tasks: [
    {
    label: ‘Task 1.1.1’,
    dateStart: ‘2021-3-10’,
    dateEnd: ‘2021-4-1’,
    type: ‘task’,
    connections: [
    {
    target: 6,
    type: 1
    }
    ]
    },
    {
    label: ‘Task 1.1.2’,
    dateStart: ‘2021-4-2’,
    dateEnd: ‘2021-6-1’,
    type: ‘task’,
    connections: []
    },
    {
    label: ‘Project 1.1.1’,
    dateStart: ‘2021-06-1T12:30:00’,
    dateEnd: ‘2021-9-1’,
    expanded: true,
    type: ‘project’,
    connections: [],
    tasks: [
    {
    label: ‘Task 1.1.1.1’,
    dateStart: ‘2021-07-10’,
    dateEnd: ‘2021-08-30’,
    type: ‘task’,
    connections: [
    {
    target: 8,
    type: 1
    }
    ]
    },
    {
    label: ‘Task 1.1.1.2’,
    dateStart: ‘2021-08-30’,
    dateEnd: ‘2021-10-1’,
    type: ‘task’
    }
    ]
    }
    ]
    }
    ]
    },
    {
    label: ‘Task 2’,
    dateStart: ‘2020-03-10T15:30:00’,
    dateEnd: ‘2021-08-10’,
    type: ‘task’,
    connections: [
    {
    target: 10,
    type: 1
    }
    ]
    },
    {
    label: ‘Milestone 1’,
    dateEnd: ‘2021-05-24’,
    type: ‘milestone’,
    connections: [
    {
    target: 11,
    type: 1
    }
    ]
    },
    {
    label: ‘Task 3’,
    dateStart: ‘2021-02-05’,
    dateEnd: ‘2021-07-08’,
    progress: 50
    }
    ]

    But if I use the below format then am not able to get the proper hierarchy.
    dataSource: new window.Smart.DataAdapter({
    dataSource:
    [{
    id:0,
    label: ‘Project 1’,
    synchronized: true,
    expanded: true,
    type: ‘project’,
    connections: [
    {
    target: 1,
    type: 0
    }
    ] ,
    },
    {
    id:1,
    label: ‘Project 1.1′,
    reportsTo:’0’,
    dateStart: ‘2021-2-31’,
    dateEnd: ‘2021-6-1’,
    expanded: true,
    type: ‘project’,
    connections: [
    {
    target: 4,
    type: 0
    }
    ]
    },
    {
    id:2,
    reportsTo:1,
    label: ‘Task 1.1.1’,
    dateStart: ‘2021-3-10’,
    dateEnd: ‘2021-4-1’,
    type: ‘task’,
    },
    {
    id:3,
    reportsTo:1,
    label: ‘Task 1.1.2’,
    dateStart: ‘2021-4-2’,
    dateEnd: ‘2021-6-1’,
    type: ‘task’,
    connections: []
    },
    {
    id:4,
    reportsTo:2,
    label: ‘Task 1.1.1.1’,
    dateStart: ‘2021-07-10’,
    dateEnd: ‘2021-08-30’,
    type: ‘task’,
    },
    {
    id:5,
    reportsTo:2,
    label: ‘Task 1.1.1.2’,
    dateStart: ‘2021-08-30’,
    dateEnd: ‘2021-10-1’,
    type: ‘task’
    }
    ],
    keyDataField: ‘id’,
    parentDataField: ‘reportsTo’,
    id: ‘id’,
    dataFields: [
    ‘id: number’,
    ‘label: string’,
    ‘dateStart: date’,
    ‘dateEnd: any’,
    ‘type: string’,
    ‘duration: any’,
    ‘progress: any’,
    ‘reportsTo: any’,
    ‘synchronized: boolean’,
    ‘expanded: boolean’,
    ]
    })
    How to get the proper hierarchy by using this windoww.dataaddapter.

    Thanks in advance.

    </div>
    </div>

    • This topic was modified 5 months, 1 week ago by Sakthivel.
    #109646
    Markov
    Keymaster

    Hi,

    I checked the code and below is a full example based on your data source. Hope it helps.

    /// <reference path=”../../../source/typescript/smart.elements.d.ts” />

    window.Smart(
        "#gantt",
        class {
            get properties() {
                return {
                    theme: 'bootstrap',
    
                    height: 'auto',
    
                    width: 'auto',
    
                    view: 'month',
    
                    dayFormat: 'short',
    
                    firstDayOfWeek: 1, //Monday
    
                    nonworkingDays: [6],
    
                    adjustToNonworkingTime: true,
    
                    durationUnit: 'day',
    
                    monthScale: 'day',
    
                    autoSchedule: true,
    
                    disableTaskProgressChange: true,
    
                    //resourceTimelineMode: 'histogram',
    
                    //disableWindowEditor: true,
    
                    //groupByResources: true,
    
                    hideTimelineHeaderDetails: true,
    
                    snapToNearest: true,
    
                    taskColumns: [
    
                        {
    
                            label: 'Tasks',
    
                            value: 'label',
    
                            sort: 'asc',
    
                            size: '60%'
    
                        },
    
                        {
    
                            label: 'Duration (days)',
    
                            value: 'duration',
    
                            formatFunction: (date) => parseInt(date)
    
                        }
    
                    ],
    
                    dataSource: new window.Smart.DataAdapter({
                        dataSource:
                            [{
                                id: 0,
                                label: 'Project 1',
                                synchronized: true,
                                expanded: true,
                                type: 'project',
                                connections: [
                                    {
                                        target: 1,
                                        type: 0
                                    }
                                ],
                            },
                            {
                                id: 1,
                                label: 'Project 1.1',
                                reportsTo: '0',
                                dateStart: '2021-2-31',
                                dateEnd: '2021-6-1',
                                expanded: true,
                                type: 'project',
                                connections: [
                                    {
                                        target: 4,
                                        type: 0
                                    }
                                ]
                            },
                            {
                                id: 2,
                                reportsTo: 1,
                                label: 'Task 1.1.1',
                                dateStart: '2021-3-10',
                                dateEnd: '2021-4-1',
                                type: 'task',
                            },
                            {
                                id: 3,
                                reportsTo: 1,
                                label: 'Task 1.1.2',
                                dateStart: '2021-4-2',
                                dateEnd: '2021-6-1',
                                type: 'task',
                                connections: []
                            },
                            {
                                id: 4,
                                reportsTo: 2,
                                label: 'Task 1.1.1.1',
                                dateStart: '2021-07-10',
                                dateEnd: '2021-08-30',
                                type: 'task',
                            },
                            {
                                id: 5,
                                reportsTo: 2,
                                label: 'Task 1.1.1.2',
                                dateStart: '2021-08-30',
                                dateEnd: '2021-10-1',
                                type: 'task'
                            }
                            ],
                        keyDataField: 'id',
                        parentDataField: 'reportsTo',
                        id: 'id',
                        dataFields: [
                            'id: number',
                            'label: string',
                            'dateStart: date',
                            'dateEnd: any',
                            'type: string',
                            'duration: any',
                            'progress: any',
                            'reportsTo: any',
                            'synchronized: boolean',
                            'expanded: boolean'
                        ]
                    })
                }
            }
        }
    );
    export { };

    Best regards,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

    #109652
    Sakthivel
    Participant

    We need to get the hierarchy as shown below.

    Project 1
    —-Project 1.1
    ——–Task 1.1.1
    ——–Task 1.1.2
    Project 2
    —-Project 2.1

    But we are not getting the proper hierarchy for the given solution. getting as below

    Project 1
    —-Project 1.1
    Project 1.1
    —-Task1.1.1
    —-Task1.1.2
    Project 2
    —-Project 2.1

    Creates a duplicate for project 1.1.
    Is there any way to get proper hierarchy without using the task array in the data source.
    Kindly share the other ways.
    Thanks in advance.

    • This reply was modified 5 months, 1 week ago by Sakthivel.
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.