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
Copy Code
|
---|
{"nodes":[ {"id":0,"name":"start"}, {"id":1,"name":"activity 1"}, {"id":2,"name":"task 1"}, {"id":3,"name":"task 2"}, {"id":4,"name":"activity 2"}, {"id":5,"name":"task 3"}, {"id":6,"name":"task 4"}, {"id":7,"name":"activity 3"}, {"id":8,"name":"task 5"}, {"id":9,"name":"task 6"}, {"id":10,"name":"end"} ], "links":[ {"origin":0,"target":1}, {"origin":1,"target":2}, {"origin":1,"target":3}, {"origin":2,"target":4}, {"origin":3,"target":4}, {"origin":4,"target":5}, {"origin":4,"target":6}, {"origin":5,"target":10}, {"origin":6,"target":10}, {"origin":0,"target":7}, {"origin":7,"target":8}, {"origin":8,"target":9}, {"origin":2,"target":8}, {"origin":9,"target":10} ]} |
2. Create empty Tutorial1.html and Tutorial1.js files, and add DIV and CANVAS elements to the HTML page. HTML
Copy Code
|
---|
<div style="width:900px; height:500px; overflow:auto; border: 1px solid;">
<canvas id="diagram" width="2100" height="2100"> This page requires a browser that supports HTML 5 Canvas element. </canvas>
</div>
|
3. Add script references to the Microsoft Ajax, MindFusion.Diagramming and Tutorial1 JavaScript files: HTML
Copy Code
|
---|
<script src="MicrosoftAjax.js" type="text/javascript"></script> <script src="MindFusion.Diagramming.js" type="text/javascript"></script> <script src="Tutorial1.js" type="text/javascript"></script> |
4. In Tutorial1.js, assign shorter names to the Diagram, ShapeNode, DiagramLink, LayeredLayout and Rect classes. JavaScript
Copy Code
|
---|
var Diagram = MindFusion.Diagramming.Diagram; var DiagramLink = MindFusion.Diagramming.DiagramLink; var ShapeNode = MindFusion.Diagramming.ShapeNode;
var Rect = MindFusion.Drawing.Rect; var LayeredLayout = MindFusion.Graphs.LayeredLayout; |
5. Add a Sys.Application.load handler that creates a Diagram instance wrapping the HTML Canvas element: JavaScript
Copy Code
|
---|
var diagram;
Sys.Application.add_load(function (sender, args) { diagram = $create(Diagram, null, null, null, $get("diagram")); }); |
6. Add the following code to the load handler to create a network request that loads the Json file from the server: JavaScript
Copy Code
|
---|
var request = new Sys.Net.WebRequest(); request.set_url("Tutorial1.txt"); request.set_httpVerb("GET"); request.add_completed(onResponse); request.invoke();
|
7. Add an onResponse function invoked when the response arrives: JavaScript
Copy Code
|
---|
function onResponse(executor, eventArgs) { if (executor.get_responseAvailable) { var json = executor.get_responseData(); var graph = Sys.Serialization.JavaScriptSerializer.deserialize(json); buildDiagram(graph); } } |
8. Add the buildDiagram function that creates diagram nodes and links for each object from the parsed Json graph: JavaScript
Copy Code
|
---|
function buildDiagram(graph) { var nodeMap = []; var bounds = new Rect(0, 0, 18, 8);
var nodes = graph.nodes; Array.forEach(nodes, function (node) { var diagramNode = diagram.getFactory().createShapeNode(bounds); nodeMap[node.id] = diagramNode; diagramNode.setText(node.name); diagramNode.setBrush("LightCyan"); });
var links = graph.links; Array.forEach(links, function (link) { diagram.getFactory().createDiagramLink( nodeMap[link.origin], nodeMap[link.target]); }); } |
9. Finally, apply LayeredLayout to arrange the diagram automatically: JavaScript
Copy Code
|
---|
var layout = new LayeredLayout(); layout.nodeDistance = 10; layout.layerDistance = 10; diagram.arrange(layout);
|
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:
|