MindFusion.Diagramming for JavaScript Programmer's Guide
Tutorial 1: Loading Graph Data

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

<!-- 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 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)
{
    // create a Diagram component that wraps the "diagram" canvas
    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

// pretent we are calling a web service
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);

    // load node data
    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");
    });

    // load link data
    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

// arrange the graph
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: