How to create a Multiple hierarchies in gantt chart

This topic has 2 replies, 2 voices, and was last updated 10 months, 2 weeks ago by Sakthivel.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts

January 8, 2024 at 9:58 am #109634

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

January 9, 2024 at 9:45 pm #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/

January 10, 2024 at 12:23 pm #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 10 months, 2 weeks ago by Sakthivel.

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.