how to set the image and flow chart using this type of data

[Lakshminarayanan]

Please send the flow chart with an image based on the data at the earliest. Thank you.

Attachment: diagram_d833d32a.rar

[Gobinath Dhamotharan]

Hi,

We generated the sample using the provided data, and in the diagram, only one node is rendered based on the data. To render the image within the node, utilize the setNodeTemplate method, incorporating the image specified in the JSON data. Refer the below documentation and sample for your reference.

Code-snippet

function setNodeTemplate(obj, diagram) {

  var content = new ej.diagrams.StackPanel();

  content.id = obj.id + '_outerstack'; content.orientation = 'Horizontal';

  content.style.strokeColor = 'gray'; content.padding = { left: 5, right: 10, top: 5, bottom: 5 };

 var image = new ej.diagrams.ImageElement();

  image.width = 50; image.height = 50;  image.style.strokeColor = 'none';

  image.source = obj.data.ProfileImage;  image.id = obj.id + '_pic';

content.children = [image];

return content;

}

Documentation

https://ej2.syncfusion.com/documentation/diagram/automatic-layout#setnodetemplate

Sample

https://stackblitz.com/edit/yjqfxh-w21kgp?file=index.html,index.js

Regards,

Gobinath

[Lakshminarayanan]

how to set the image and tooltip using provided data

Attachment: diagram_8f209c3c.rar

[Sivaranjith Jeyabalan]

Hi Lakshminarayanan,

We've generated a layout using the given data. Since the provided data source contains only one data entry with an image, the remaining nodes are rendered without images. To enable tooltips for nodes, it's essential to set content for the node tooltips and include tooltip constraints. Please refer to the provided sample code example below for reference.

Code example:

function nodeDefaults(node) {

  debugger;

  node.annotations[0].style.color = 'black';

  node.width = 120;

 

  node.tooltip = { content: node.annotations[0].content };

 

  node.constraints =

    ej.diagrams.NodeConstraints.Default |

    ej.diagrams.NodeConstraints.AllowDrop |

    ej.diagrams.NodeConstraints.Tooltip;

  return node;

}

Sample: https://stackblitz.com/edit/yjqfxh-tg7txq?file=index.html,index.js