This tutorial shows how to load hierarchical data recursively from a Json string and create diagram items corresponding to the hierarchy.
1. Create a text file called Tutorial2.txt and add the following Json string to it:
XML
Copy Code
|
---|
{ "project" : {"name": "project", "activities":[ {"name":"Activity 1", "activities":[ {"name":"sub-activity 1", "activities":[ {"name":"sub-activity 1-1"}, {"name":"sub-activity 1-2"}]}, {"name":"sub-activity 2", "activities":[ {"name":"sub-activity 2-1"}, {"name":"sub-activity 2-2"}, {"name":"sub-activity 2-3"}]}, {"name":"sub-activity 3", "activities":[ {"name":"sub-activity 3-1"}, {"name":"sub-activity 3-2"}]} ]}, {"name":"Activity 2", "activities":[ {"name":"sub-activity 1", "activities":[ {"name":"sub-activity 1-1"}, {"name":"sub-activity 1-2"}, {"name":"sub-activity 1-3"}]}, {"name":"sub-activity 2", "activities":[ {"name":"sub-activity 2-1"}, {"name":"sub-activity 2-2"}]} ]}, {"name":"Activity 3", "activities":[ {"name":"sub-activity 1", "activities":[ {"name":"sub-activity 1-1"}, {"name":"sub-activity 1-2"}, {"name":"sub-activity 1-3"}, {"name":"sub-activity 1-4"}]}, {"name":"sub-activity 2"}, {"name":"sub-activity 3", "activities":[ {"name":"sub-activity 3-1"}, {"name":"sub-activity 3-2"}, {"name":"sub-activity 3-3"}]} ]} ]} } |
2. Create empty Tutorial2.html and Tutorial2.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 Tutorial2 JavaScript files:
HTML
Copy Code
|
---|
<script src="MicrosoftAjax.js" type="text/javascript"></script> <script src="MindFusion.Diagramming.js" type="text/javascript"></script> <script src="Tutorial2.js" type="text/javascript"></script> |
4. In Tutorial2.js, assign shorter names to the Diagram, ShapeNode, DiagramLink, BorderedTreeLayout 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 BorderedTreeLayout = MindFusion.Graphs.BorderedTreeLayout; |
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")); }); |
5. Add the following members to the script to hold the default node size and color.
JavaScript
Copy Code
|
---|
var bounds = new Rect(0, 0, 30, 6); var brush = "LightBlue"; |
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("Tutorial2.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 the tree root node, and call the addActivities function, which builds the tree recursively:
JavaScript
Copy Code
|
---|
function buildDiagram(graph) { var project = graph.project; var diagramNode = diagram.getFactory().createShapeNode(bounds); diagramNode.setText(project.name); diagramNode.setBrush(brush); if (project.activities) addActivities(diagramNode, project); } |
9. Define addActivities as follows. It takes as parameters the parent DiagramNode and parent JSON element, iterates the child JSON elements to build the next level of the hierarchy, and creates corresponding diagram items by calling createShapeNode and createDiagramLink.
JavaScript
Copy Code
|
---|
function addActivities(parentNode, parent) { Array.forEach(parent.activities, function (activity) { var diagramNode = diagram.getFactory().createShapeNode(bounds); diagramNode.setText(activity.name); diagramNode.setBrush(brush); diagram.getFactory().createDiagramLink(parentNode, diagramNode);
if (activity.activities) addActivities(diagramNode, activity); }); } |
10. Use BorderedTreeLayout to arrange the diagram. Add the following code to the end of the buildDiagram function.
JavaScript
Copy Code
|
---|
var layout = new BorderedTreeLayout(); layout.direction = MindFusion.Graphs.LayoutDirection.LeftToRight; layout.linkType = MindFusion.Graphs.TreeLayoutLinkType.Cascading; layout.nodeDistance = 1; layout.levelDistance = -8; diagram.arrange(layout); |
11. Publish MicrosoftAjax.js, MindFusion.Diagramming.js and the tutorial files using web server of your choice. Now you should see this if you open Tutorial2.html in a web browser:
