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. The code is also available in Samples folder of JsDiagram distribution.

1. Create a text file called Tutorial1.txt and add the following Json string to it:

XML

{"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

<!-- The DiagramView component is bound to the canvas element below -->
<div style="width: 100%; height: 100%; overflow: auto;">
    <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 MindFusion UMD scripts and Tutorial1 JavaScript files:

HTML

<script src="umd/collections.js" type="text/javascript"></script>
<script src="umd/drawing.js" type="text/javascript"></script>
<script src="umd/controls.js" type="text/javascript"></script>

<script src="umd/animations.js" type="text/javascript"></script>
<script src="umd/graphs.js" type="text/javascript"></script>
<script src="umd/diagramming.js" type="text/javascript"></script>

<script src="Tutorial1.js" type="text/javascript"></script>

4. In Tutorial1.js, assign shorter names to the DiagramView, Diagram, ShapeNode, DiagramLink, LayeredLayout and Rect classes (if using diagram's ES6 or CommonJS modules, these would be import or require statements for respective classes and modules).

JavaScript

var DiagramView = MindFusion.Diagramming.DiagramView;
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 DOMContentLoaded handler that creates a DiagramView instance wrapping the HTML Canvas element:

JavaScript

var diagram;document.addEventListener("DOMContentLoaded", function ()
{
    // create a DiagramView component that wraps the "diagram" canvas
    var diagramView = DiagramView.create(document.getElementById("diagram"));
    diagram = diagramView.diagram;
}

6. Add the following code to the DOMContentLoaded handler to create a network request that loads the Json file from the server:

JavaScript

// pretend we are calling a web service
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function ()
{
};
xhttp.open("GET", "Tutorial1.txt", true);
xhttp.send();

7. Implement the onreadystatechange handler to parse the json file:

JavaScript

if (this.readyState == 4 && this.status == 200)
{
    var graph = JSON.parse(xhttp.responseText);
    buildDiagram(graph);
}

8. Add the buildDiagram function that creates diagram nodes and links for each object from the parsed Json graph:

JavaScript

function buildDiagram(graph)
{
    var nodeMap = [];

    // load node data
    var nodes = graph.nodes;
    for (var node of nodes)
    {
        var diagramNode = diagram.factory.createShapeNode(0, 0, 18, 8);
        nodeMap[node.id] = diagramNode;
        diagramNode.text = node.name;
        diagramNode.brush = "#e0e9e9";
    }

    // load link data
    var links = graph.links;
    for (var link of links)
    {
        diagram.factory.createDiagramLink(
            nodeMap[link.origin],
            nodeMap[link.target]);
    }
}

9. Finally, apply LayeredLayout to arrange the diagram automatically:

JavaScript

// arrange the graph
var layout = new LayeredLayout();
layout.nodeDistance = 10;
layout.layerDistance = 10;
diagram.arrange(layout);

10. Publish MindFusion.*.js and tutorial files using web server of your choice. Now you should see this if you open Tutorial1.html in a web browser: