Placing multiple graphs in same diagram

[Shalvin]

Hi,

We need to display a dynamic tree with multiple levels as showed in attached image. Levels needs to be left aligned and will be separate from main. Both the trees will be generated dynamically, and should display with the tree layout.

I am able to generate both the graphs with no issues, but not able to place both in same graph as it supports only one. I tried to place both the graphs in two separate graphs in a grid with two columns and tried to synchronize the zoom, but that is getting distorted and overlapped.

Any way to place both the graphs in same diagram, but one with fixed value for x (as shown in the diagram) ?

Any advice/support is much appreciated.

Thanks,
Shalvin.

[Petar Mladenov]

Hello Shalvin,

The RadDiagram supports layout of multiple independent graph components. The key moment is that you need to set the roots of the separate graphs in the tree layout settings:

settings.Roots.Add(this.diagram.Shapes[0]);
        settings.Roots.Add(this.diagram.Shapes[1]);

this.diagram.Layout(LayoutType.Tree, settings);

The attached project demonstrates this functionality. We hope this is exactly what you need.

Regards,
Petar Mladenov
Telerik

 

 

[Shalvin]

Dear Peter,

Thank you so much for the reply. This is exactly what we wanted. Though I need to arrange them keeping label left, but apart from that, all is well. I had tried this before as well, but what happen was the second graph was displayed at the bottom of first graph always. I am yet to understand the mistake I have made, but thank you very much for the awesome support. I will keep you posted in case if any further queries.

Thanks,
Shalvin.

[Shalvin]

Hi Peter,

It has been observed that I was also using similar code behind (no rout though). The issue is still there when I add more entries, it become distorted and the label went below main tree graph.

Also, basically I will be having multi -> Single mapping as well in future (completely dynamic) and I am planning to use the MindmapVertical for the purpose.

Attached are the two samples I have created. The issue is that 
1. If the width of main map is getting increased, the label map will move below to main map (There can be any number of entries in one level
2. I am not able to place the label map in left side of code though changed order of adding them to map and adding roots to settings

Also noticed that in many cases, the graph become distorted. As the data will be dynamically generated and displayed to client, it is very important to be neat (Image Rad02 is an arranged version of Rad03).

Any advice is much appreciated.

Thanks,
Shalvin

[Petar Mladenov]

Hello Shalvin,

We understand your requirements. One is to control the order of the independent graph components in the Diagram. Currently this is not supported, the diagram arranges the components based on their width decreasingly - that is why the wider component in your scenario is on the left of the smaller one. You can vote for this related feature request for customizing the layout of the diagram. This way you will increase its development priority. 
The other layout with misplaced shapes is produced because the tree layout in the diagram does not support cycles (level1 - level2_1 - level2_2 - level3_1_1 is a cycle). You can subscribe for DiagramLayoutComplete event and manually position the shapes by setting their Position property. Once a layout is ok for you, you can consider saving it and then loading it in future application runs. You can also consider writing your own Layout algorithm from scratch.

Regards,
Petar Mladenov
Telerik