Create Project Network Diagram in Blazor Server Application using Blazor.Syncfusion.Diagram

[Ana-li]

Hi,

 

I have a question. Is it possible to create a Project Network Diagram in Blazor Server Application  with data that is taken from Database, using Blazor.Syncfusion.Diagram package? 

Something similar to this example: https://blazor.syncfusion.com/demos/diagram/pert-chart?theme=fluent . 

Can you provide an example if such functionality exists.  

 

Тhank you in advance.

[Sumathi Uthayakumar]

Hi Ana-li,

We have prepared a network diagram sample without utilizing the database. In this example, we used an SVG shape to create a diagram. We have shared a sample for your reference, as well as our online demo link: https://blazor.syncfusion.com/demos/diagramcomponent/networkdiagram?theme=fluent. 

Could you please share what kind of object model is used in data source settings, and what kind of data is getting from the database?

If it is possible to create the diagram based on the information you have provided, we will prepare and share a sample.

Regards,

Sumathi. U

Attachment: Forum180085_34c66c10.zip

[Ana-li]

Hi,

Thank you for your answer. We want to create network plan, but for project management , something like the network plan on the photo below.

The numbers in the nodes are numbers of positions, these are taken from Position Table from Database, using Foreign Key. Also in the nodes we want to add more attributes like Start Position Date, End Position Date, Position Name, Previous Position, Next Position these are taken from table Network Plan, connected with Position Table using Foreign Key (Guid).

The Network Plan has this attributes :

We want to create network plan using these attributes, taken from database . First we choose Project (using Guid ProjectId), then we create Network Plan  with the attributes above for the Projects with that Id. The nodes are connected with Previous Position and Next Position also Start Position Date and End Position Date.

When the network plan is created ( with nodes connected with connectors ordered by positions), we need to find the critical path (https://asana.com/resources/critical-path-method) .

We are waiting for your response.

Thank you in advance.

[Sumathi Uthayakumar]

Based on the screenshot you provided, we created a simple sample. In that sample, we obtain information from the database such as the PositionID, PreviousPosition, and NextPosition values. We created a node and connector collection in the diagram based on PositionID, PreviousPosition and NextPosition values and positioned the nodes manually. In your query, you stated, "When the network plan is created (with nodes connected with connectors ordered by positions)," implying that you want to place the nodes and connectors based on the position values automatically. But you are not mentioned more details about the position value and how the nodes should be arranged based on the position values so, we arranged the nodes manually in the previously shared sample by setting OffsetX and OffsetY values to nodes. We have shared the sample what we tried at our end. 

We have built-in automatic layout algorithm which arranges the nodes in a tree-like structure based on the parent-child relationship. If your requirement is also to arrange the nodes similar to our layout algorithm then you can use our built-in layout algorithm to position the nodes. Please refer our UG documentation for more details about our automatic layout algorithms,

UG link:
https://blazor.syncfusion.com/documentation/diagram/layout/automatic-layout

Attachment: Sample_be5cd5d6.zip