We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Generate diagram using JSON

Thread ID:

Created:

Updated:

Platform:

Replies:

150780 Jan 20,2020 04:53 AM UTC Jan 22,2020 06:27 AM UTC Angular - EJ 2 6
loading
Tags: Diagram
SaiSravya
Asked On January 20, 2020 04:53 AM UTC

I want to generate a diagram by giving the json in typescript file. The diagram should automatically generate with the JSON

Below is the json for the attached screenshot. 



[{"shape":{"type":"Basic","shape":"Rectangle","cornerRadius":0},"id":"nodeAeCoEa","width":150,"height":20,"offsetX":291.5,"offsetY":144,"style":{"fill":"#726dd1","strokeColor":"black","strokeWidth":1,"strokeDashArray":"","opacity":1,"gradient":{"type":"None"}},"container":null,"visible":true,"horizontalAlignment":"Left","verticalAlignment":"Top","backgroundColor":"transparent","borderColor":"none","borderWidth":0,"rotateAngle":0,"pivot":{"x":0.5,"y":0.5},"margin":{},"flip":"None","wrapper":{"actualSize":{"width":150,"height":20},"offsetX":291.5,"offsetY":144},"constraints":5240814,"zIndex":0,"annotations":[],"ports":[],"isExpanded":true,"expandIcon":{"shape":"None"},"inEdges":[],"outEdges":[],"parentId":"Ready to Registerv8UVR","processId":"","umlIndex":-1,"isPhase":false,"isLane":false},{"shape":{"type":"Basic","shape":"Rectangle","cornerRadius":0},"id":"nodeBiNM0M","width":150,"height":70,"offsetX":291.5,"offsetY":184,"style":{"fill":"#dbe6eb","strokeColor":"#dbe6eb","strokeWidth":1,"strokeDashArray":"","opacity":1,"gradient":{"type":"None"}},"annotations":[{"id":"BO6vx","content":"Are you ready to register? You can do so right here","style":{"strokeWidth":0,"strokeColor":"transparent","fill":"transparent","fontSize":14,"bold":false,"textWrapping":"WrapWithOverflow","color":"black","whiteSpace":"CollapseSpace","fontFamily":"Arial","italic":false,"opacity":1,"strokeDashArray":"","textAlign":"Center","textOverflow":"Wrap","textDecoration":"None"},"hyperlink":{"link":"","content":"","textDecoration":"None"},"constraints":4,"visibility":true,"rotateAngle":0,"margin":{"right":0,"bottom":0,"left":0,"top":0},"horizontalAlignment":"Center","verticalAlignment":"Center","offset":{"x":0.5,"y":0.5}}],"container":null,"visible":true,"horizontalAlignment":"Left","verticalAlignment":"Top","backgroundColor":"transparent","borderColor":"none","borderWidth":0,"rotateAngle":0,"pivot":{"x":0.5,"y":0.5},"margin":{},"flip":"None","wrapper":{"actualSize":{"width":150,"height":70},"offsetX":291.5,"offsetY":184},"constraints":5240814,"zIndex":1,"ports":[],"isExpanded":true,"expandIcon":{"shape":"None"},"inEdges":[],"outEdges":[],"parentId":"Ready to Registerv8UVR","processId":"","umlIndex":-1,"isPhase":false,"isLane":false},{"children":["nodeAeCoEa","nodeBiNM0M"],"shape":{"type":"Basic","shape":"Rectangle"},"id":"Ready to Registerv8UVR","container":null,"offsetX":291.5,"offsetY":176.5,"visible":true,"horizontalAlignment":"Left","verticalAlignment":"Top","backgroundColor":"transparent","borderColor":"none","borderWidth":0,"rotateAngle":0,"pivot":{"x":0.5,"y":0.5},"margin":{"right":0,"bottom":0,"left":0,"top":0},"flip":"None","wrapper":{"actualSize":{"width":150,"height":85},"offsetX":291.5,"offsetY":176.5},"style":{"fill":"white","strokeWidth":1,"strokeColor":"transparent","strokeDashArray":"","opacity":1,"gradient":{"type":"None"}},"width":150,"height":85,"zIndex":2,"annotations":[],"ports":[],"isExpanded":true,"expandIcon":{"shape":"None"},"constraints":5240814,"inEdges":[],"outEdges":[],"parentId":"","processId":"","umlIndex":-1,"isPhase":false,"isLane":false}]

Attachment: Screenshot_from_20200120_102237_b2482ebd.zip

Shyam G [Syncfusion]
Replied On January 21, 2020 05:36 AM UTC

Hi SaiSravya, 

By analyzing your JSON, we found that you have set a fill as white for the group node. So only, we could not see the children node content. We have changed the group node fill as transparent to resolve your issue. We have highlighted the changes in the below screenshot and refer to the below sample for further reference. Also, if you need to load a JSON at runtime, please click on save button to download the diagram as JSON and load the same using the load button from the below sample. 


Screenshot: 
 


Regards, 
Shyam G 


SaiSravya
Replied On January 21, 2020 05:47 AM UTC

Could you please share the HTML file.

My use case is like

1) The user creates a diagram and clicks on submit.
2) It will get stored as a JSON in database
3) On a click of load option , a JSON is sent by backend. Using that i need to generate the diagram

Please do share the html file

Shyam G [Syncfusion]
Replied On January 21, 2020 06:10 AM UTC

Hi SaiSravya, 

In the previous update, we have shared a stackblitz sample which contains both index.html file and the index.ts file.  

Regards, 
Shyam G 


SaiSravya
Replied On January 21, 2020 08:29 AM UTC

There is some error which is stopping me to run

Attachment: Screenshot_from_20200121_135849_1751c644.zip

SaiSravya
Replied On January 21, 2020 10:46 AM UTC

Am attaching the component where i used your syncfusion package. I need to bring up this use case in this component

Could you please help me on this.


If i replicate the same which you shared i am having some issues. I have shared the error in my previous reply

Please share the same use case in my component

Attachment: flowdiagram_477738e.zip

Shyam G [Syncfusion]
Replied On January 22, 2020 06:27 AM UTC

Hi SaiSravya, 

Sorry for the inconvenience.  

In your screenshot JSON, we have seen the node actualsize property, which is not required while initializing the diagram. However, we have removed it from our stackblitz sample and provided a modified sample below. 


  • Also, you need to save the JSON in the database and to retrieve the same and load the diagram.
  • In the above sample, when you click on save button, the diagram json file gets downloaded and you can load the same by clicking on the load button. We have used Syncfusion uploader control to save and load the diagram.
  • Similarly, the diagram saveDiagram method returns the JSON and you can save it into the database and you can retrieve the JSON and load it using loadDiagram method. Please refer to a code example below.

Code example: 
//get the saved json and save it into the database 
let jsonOutput = this.diagram.saveDiagram(); 
//retrieve the json from the database and load it with loadDiagram method 
this.diagram.loadDiagram(yourjson); 

Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon