Multitask bar in one row

Hi, i am going to make a multitask bars in one row. When tasks are being hidden by parent level. The bar color turns light or changes. And the color changes when children are displayed. And the parent bar length is the total length of the whole children.

The sample below is exactly what i want !!

Could i have the sample Javascript code of how it is achieved in the sample? Thank you!

It is implemented using addTaskLayer function:

Have you checked the source code of the page? It has all applied configuration.

There is another implementation without addTaskLayer function:

However, it is no really a multitask solution. You cannot drag those subtasks, they are only displayed above the project task.

We have another sample where you can drag subtasks and control them:
You can check the source code of the page, as it contains all applied gantt configuration and styles.