How to create a Multiple hierarchies in gantt chart

[Sakthivel]

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 4 months ago by Sakthivel.

[Markov]

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/

[Sakthivel]

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 3 months, 4 weeks ago by Sakthivel.

[Author]

Posts