This tutorial shows how to load graph data from a Json string and create diagram objects corresponding to the graph nodes and edges.
1. Create a text file called Tutorial1.txt and add the following Json string to it:
XML
![]() |
---|
{"nodes":[ |
2. Create empty Tutorial1.html and Tutorial1.js files, and add DIV and CANVAS elements to the HTML page.
HTML
![]() |
---|
<!-- The Diagram component is bound to the canvas element below --> |
3. Add script references to the Microsoft Ajax, MindFusion.Diagramming and Tutorial1 JavaScript files:
HTML
![]() |
---|
<script src="MicrosoftAjax.js" type="text/javascript"></script> |
4. In Tutorial1.js, assign shorter names to the Diagram, ShapeNode, DiagramLink, LayeredLayout and Rect classes.
JavaScript
![]() |
---|
var Diagram = MindFusion.Diagramming.Diagram; |
5. Add a Sys.Application.load handler that creates a Diagram instance wrapping the HTML Canvas element:
JavaScript
![]() |
---|
var diagram; |
6. Add the following code to the load handler to create a network request that loads the Json file from the server:
JavaScript
![]() |
---|
// pretent we are calling a web service |
7. Add an onResponse function invoked when the response arrives:
JavaScript
![]() |
---|
function onResponse(executor, eventArgs) |
8. Add the buildDiagram function that creates diagram nodes and links for each object from the parsed Json graph:
JavaScript
![]() |
---|
function buildDiagram(graph) |
9. Finally, apply LayeredLayout to arrange the diagram automatically:
JavaScript
![]() |
---|
// arrange the graph |
10. Publish MicrosoftAjax.js, MindFusion.Diagramming.js and the tutorial files using web server of your choice. Now you should see this if you open Tutorial1.html in a web browser: