Our state of the art Gantt chart


Post by kamran_mushtaq »

Please have a look into the code we are shifting to the Bryntum Gantt, previously we have DHTMLX Gantt implemented. We are having Object Variable in which activity/ projects data is coming and then we were using that object to make a Gantt Chart.
I have talked with Mats and get to know that we have to add datafields by using data source if our datafields differ from default datafileds to Bryntum. Please have a look into the code I think I'm not passing the data in right way please let me know of this. I'm also sharing index 0 of our object data. Gantt chart is working only if I enter static data into it or use any json file that you provied in you example code.
Zip file attached for code and object data is attached here (only index 0).

[{
"status_description": "",
"plan_type": "activity",
"status_name": "To do",
"readonly": 0,
"color": "#777777",
"text": "Activity 5",
"start_date": "18-08-2022 21:00:00",
"id": 12,
"owner_name": "Kamran Mushtaq",
"rowIndex": 1,
"item_url": "/activities/12",
"progress": 0.43,
"access_token": "5405ef63082e412786021aeeb66c4a7f",
"assignee_name": null,
"description": "",
"progressColor": "#5cb85c",
"assignee_id": null,
"planning_description": "",
"end_date": "21-08-2022 21:00:00",
"owner_id": 90,
"type": "task",
"plan_type_number": 1000
}]
Attachments
BryntumGantt.zip
(2.86 KiB) Downloaded 31 times

Post by kamran_mushtaq »

attached to the question this is how I'm trying to pass object data to Bryntum

gantt.project.inlineData = eventDataJSON;
// gantt.project.inlineData = { tasksData :  eventDataJSON }; 

Post by alex.l »

Hi kamran_mushtaq,

Since your code is not runnable, I just reviewed it and have some notes:

inlineData expects an Object and not JSON string,
I assumed it's a string because of this line

const eventDataJSON = JSON.stringify(eventData);

please check docs here https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#property-inlineData

I am also not sure why do you set inlineData inside for loop. I guess that's just some code in a middle of your testing so I won't explain obvious things here.

Date format in the code snippet you shared is not default.
We expect ISO 8601 date format. So it should be like "2022-08-18T21:00:00"
If you need to use your own, you need to specify it for model data field https://bryntum.com/docs/gantt/api/Core/data/field/DateDataField#config-format

Here is code snippets that worked to me

export default class Task extends TaskModel {
    static $name = 'Task';
    static get fields() {
        return [
            { name : 'id', dataSource : 'id' },
            { name : 'name', dataSource : 'text' },
            { name : 'startDate', dataSource : 'start_date', format : 'DD-MM-YYYY H:i:s' },
            { name : 'endDate', dataSource : 'end_date', format : 'DD-MM-YYYY H:i:s'  },
            { name : 'percentDone', dataSource : 'progress' }
        ];
    }
}

[....]


    gantt.project.inlineData = {
        tasksData : [{
            "status_description": "",
            "plan_type": "activity",
            "status_name": "To do",
            "readonly": 0,
            "color": "#777777",
            "text": "Activity 5",
            "start_date": "18-08-2022 21:00:00",
            "id": 12,
            "owner_name": "Kamran Mushtaq",
            "rowIndex": 1,
            "item_url": "/activities/12",
            "progress": 0.43,
            "access_token": "5405ef63082e412786021aeeb66c4a7f",
            "assignee_name": null,
            "description": "",
            "progressColor": "#5cb85c",
            "assignee_id": null,
            "planning_description": "",
            "end_date": "21-08-2022 21:00:00",
            "owner_id": 90,
            "type": "task",
            "plan_type_number": 1000
            }
     ]};

And also links to guides that we recommend to learn
https://bryntum.com/docs/gantt/guide/Gantt/data/project_data
https://bryntum.com/docs/gantt/guide/Core/data/treedata
https://bryntum.com/docs/gantt/guide/engine/gantt_events_scheduling

All the best,
Alex


Post by kamran_mushtaq »

Thank you so much for the detailed reply I will look into it hopefully tomorrow morning in the first time, please let me know that, I was uncertain thats why I have converted object data to a json data object data is coming in this variable "eventData".
So you are saying that I have to pass object data like that

gantt.project.inlineData = eventData;

And also you have entered all the index 0 data to the taskData

gantt.project.inlineData = {
        tasksData : [{ ... }]

when we use object and pass it to inlineData then should we have to do it linke that ^ ?


Post by alex.l »

gantt.project.inlineData expects to have data for all project and not just tasks/events array. Here is full snippet how it might looks like

      gantt.project.inlineData = {
          tasksData : [
              { id : 1, name : 'Proof-read docs', startDate : '2017-01-02', endDate : '2017-01-09' },
              { id : 2, name : 'Release docs', startDate : '2017-01-09', endDate : '2017-01-10' }
          ],
          resourcesData : [
              { id : 1, name : 'Arcady' },
              { id : 2, name : 'Don' }
          ],
          dependenciesData : [
              { fromTask : 1, toTask : 2 }
          ],
          assignmentsData        : [
               { 'event' : 1, 'resource' : 1 },
               { 'event' : 2, 'resource' : 2 }
           ],
          resourceTimeRangesData : [
              { id : 1, name : 'Resource range', resourceId : 1, startDate : '2017-01-08', endDate : '2017-01-10' }
          ],
          timeRangesData : [
               { id : 1, startDate : '2017-01-26', name : 'Cool line' }
          ]
     }

All the best,
Alex


Post by kamran_mushtaq »

Ok, things are clearing now. So instead of this static data how to pass our object "eventData" which has tasks in it to taskData: [] ? and also we have a dependency table in our database we can fetch that data and pass it to the dependenciesData: [] here in your mentioned code?

Thank you so much


Post by marcio »

Hello kamran_mushtaq,

After the first rendering, you can access gantt.taskStore to check the data related to tasks, to add new records you can use https://www.bryntum.com/docs/gantt/api/Gantt/data/TaskStore#function-add

Please check other available methods/properties related to the TaskStore in our documentation.

Following the same idea, we have https://www.bryntum.com/docs/gantt/api/Gantt/data/DependencyStore for data related to dependencies.

Also, you can check how to add dependencies by checking the source code of our demo https://www.bryntum.com/examples/gantt/conflicts/

Best regards,
Márcio


Post by kamran_mushtaq »

Please check your first reply in which you said that this will be working for you.
First Question: instead of passing this static data into taskData, I have to pass eventData which has 7 or 8 or maybe more indexes and at all indexes we have different data but the dataFields (keys) are same. How to pass eventData object to taskData and other object will follow for dependenciesData and more. I'm getting an error when I pass it like that

gantt.project.inlineData = {
tasksData : [ eventData ]
};

 gantt.project.inlineData = {
        tasksData : [{
            "status_description": "",
            "plan_type": "activity",
            "status_name": "To do",
            "readonly": 0,
            "color": "#777777",
            "text": "Activity 5",
            "start_date": "18-08-2022 21:00:00",
            "id": 12,
            "owner_name": "Kamran Mushtaq",
            "rowIndex": 1,
            "item_url": "/activities/12",
            "progress": 0.43,
            "access_token": "5405ef63082e412786021aeeb66c4a7f",
            "assignee_name": null,
            "description": "",
            "progressColor": "#5cb85c",
            "assignee_id": null,
            "planning_description": "",
            "end_date": "21-08-2022 21:00:00",
            "owner_id": 90,
            "type": "task",
            "plan_type_number": 1000
            }
     ]};

Seconnd Question: This is the static data and have extra fields as well we have modeled only few fields you can see. Other extra fields will also work with it? Or we have to discard them?

export default class Task extends TaskModel {
    static $name = 'Task';
    static get fields() {
        return [
            { name : 'id', dataSource : 'id' },
            { name : 'name', dataSource : 'text' },
            { name : 'startDate', dataSource : 'start_date', format : 'DD-MM-YYYY H:i:s' },
            { name : 'endDate', dataSource : 'end_date', format : 'DD-MM-YYYY H:i:s'  },
            { name : 'percentDone', dataSource : 'progress' }
        ];
    }
}

Please let me know I will be waiting.
Thank you so much


Post by kamran_mushtaq »

Hi,
By doing this code I'm able to make a Gantt chart on our existing data. I want to know some further things that how we have to attach the events with it now so that we save our Gantt chart on runtime.
e.g.
1) if we drag a chart field to change the data or dependencies or if we change the progress count of an activity?
2) How to specify the sub tasks with a parent ID to the current code so that they come underneath the parent activity?
3) DependenciesData is static right how to make it dynamic and also saves on runtime, we can have a separate object for the dependencies retrieve from our database.
4) what about resouceData and timeRanges to use with in gantt.project.inlineData ={ } ??

Will be waiting for you reply Thank you so much.

    import { Gantt, StringHelper, ProjectModel, TaskModel } from '/common/javascript/bryntumGantt/gantt.module.js';


	export default class Task extends TaskModel {
		static $name = 'Task';
		static get fields() {
			return [
				{ name : 'id', dataSource : 'id' },
				{ name : 'name', dataSource : 'text' },
				{ name : 'startDate', dataSource : 'start_date', format : 'DD-MM-YYYY H:i:s' },
				{ name : 'endDate', dataSource : 'end_date', format : 'DD-MM-YYYY H:i:s'  },
				{ name : 'percentDone', dataSource : 'progress' }
			];
		}
	}


	const gantt = new Gantt({
		appendTo : 'gantt_chart',

		// startDate : new Date(),
		// endDate   : new Date(),

		project : {
      		taskModelClass : Task
		},

		features: {
			percentBar: true
		},


		columns : [
			{ type : 'name', width : 140 },
			{ type : 'startdate' },
			{ type : 'enddate' }
			
		],

		taskRenderer({ taskRecord }) {
			if (taskRecord.isLeaf && !taskRecord.isMilestone) {
				return StringHelper.encodeHtml(taskRecord.name);
			}
		}	
	});


	gantt.project.taskStore.tree = true;
	gantt.project.taskStore.transformFlatData = true;


		gantt.project.inlineData = {
			tasksData : eventData,

			dependenciesData  : [
				{ fromTask : 12, toTask : 15 },
				{ fromTask : 14, toTask : 24 }
			]
		};


	



Post by marcio »

Hey,

Answering your questions

About

This is the static data and have extra fields as well we have modeled only few fields you can see. Other extra fields will also work with it? Or we have to discard them?

You can add all required fields according to docs and any extra fields will not be considered.

1) You can set a listener to change event inside the taskStore

project : {
	taskStore : {
		listeners : {
			change : (data) => {
				console.log('data', data);
				// Do your processing here...
			}
		}
	}
},

https://bryntum.com/docs/gantt/api/Gantt/data/TaskStore#event-change

If you want that being performed automatically, you can configure https://bryntum.com/docs/gantt/api/Scheduler/crud/AbstractCrudManagerMixin#config-autoSync and use https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#function-commitAsync for triggering the calculations.

2) You can put a parentId field to the children, and with that, you can set the leaf records.
https://bryntum.com/docs/gantt/api/Core/data/mixin/TreeNode#property-parentId

Please also check https://www.bryntum.com/docs/gantt/guide/Core/data/treedata

3) To make it dynamic, you can use the gantt.dependencyStore to update during runtime.
https://bryntum.com/docs/gantt/api/Gantt/data/DependencyStore

You can check an example with a backend in PHP in your trial distribution, which is located at examples/php

4) You can set resourceData and timerangesData in the same way inside gantt.project.inlineData, but if you want to change during runtime, you can use
https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#property-resourceStore and https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#property-timeRangeStore

Alex added those to the code snippet available here above viewtopic.php?p=110497#p110497

These guides will help you understand how to work with data in Bryntum's components https://www.bryntum.com/docs/gantt/api/guides-working-with-data
https://www.bryntum.com/docs/gantt/guide/Gantt/data/project_data
https://www.bryntum.com/docs/gantt/guide/Core/data/storebasics
https://www.bryntum.com/docs/gantt/guide/Scheduler/data/crud_manager
https://www.bryntum.com/docs/gantt/guide/Gantt/data/crud_manager

Best regards,
Márcio


Post Reply