MindFusion.Diagramming for JavaScript Programmer's Guide
Tutorial 2: Loading Hierarchical Data

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

<!-- The Diagram component is bound to the canvas element below -->
<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)
{
    // create a Diagram component that wraps the "diagram" canvas
    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

// pretent we are calling a web service
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)
{
    // load activity data and create
    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// let horizontal positions overlap
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: