Getting Started with ASP.NET MVC Diagram
13 Jun 202319 minutes to read
Getting started with your MVC Diagram is easy. You can start by creating a simple flow chart.
Flow Diagram
Initialize Diagram
1. Create an ASP.NET MVC application. You can refer MVC Getting Started documentation to create a new project and to add necessary assemblies and script files.
2. Add a placeholder div element to initialize diagram control
<div>
@Html.EJ().Diagram("diagram").Width("100%").Height("600px")
</div>3. This creates an empty diagram
Create and add Node
Let us create and add a node with specific position, size, label and shape.
@*Initializes diagram control*@
<div>
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties)
</div>DiagramProperties model = new DiagramProperties();
FlowShape start = CreateNode("Start", 140, 50, 300, 50, FlowShapes.Terminator, "Start");
model.Nodes.Add(start);
ViewData["diagramModel"] = model;
FlowShape CreateNode(string name, int width, int height, int offsetX, int offsetY, FlowShapes shape, string text)
{
FlowShape node = new FlowShape()
{
Shape = shape,
Name = name,
Width = width,
Height = height,
OffsetX = offsetX,
OffsetY = offsetY,
Labels = new Collection() { new Label() { Text = text } }
};
return node;
}NOTE
Labelsproperty is an array, which indicates that more than one label can be added to a node.
Added node will be displayed in diagram as shown below.
Connect nodes
- Create another
nodewith another set of data.
DiagramProperties model = new DiagramProperties();
model.Nodes.Add(CreateNode("Start", 140, 50, 300, 50, FlowShapes.Terminator, "Start"));
model.Nodes.Add(CreateNode("Init", 140, 50, 300, 140, FlowShapes.Process, "var i = 0;"));
ViewData["diagramModel"] = model;
FlowShape CreateNode(string name, int width, int height, int offsetX, int offsetY, FlowShapes shape, string text)
{
FlowShape node = new FlowShape()
{
Shape = shape,
Name = name,
Width = width,
Height = height,
OffsetX = offsetX,
OffsetY = offsetY,
Labels = new Collection() { new Label() { Text = text } }
};
return node;
}Connect these two nodes by adding a connector into Connectors collection with reference to source and target end.
//Add a connector to `Connectors` collection of diagram model
model.Connectors.Add(ConnectNodes("connector1", "Start", "Init"));
Connector ConnectNodes(string name, string source, string target)
{
return new Connector()
{
Name = name,
SourceNode = source,
TargetNode = target,
Segments = new Collection() {
new Segment(Segments.Orthogonal)
}
};
}-
Connectorconnects the two nodes as shown below.
- Default values for all nodes and connectors can be set using default settings. For example if all nodes have same
WidthandHeight, we can move such properties intoDefaultSettings. Above code can be rewritten as shown below.
DiagramProperties model = new DiagramProperties();
//Default Settings
model.DefaultSettings.Node = new Node() { Type = Shapes.Flow, Width = 140, Height = 50, OffsetX = 300 };
model.DefaultSettings.Connector = new Connector()
{
Labels = new Collection() { new Label() { FillColor = "white" } },
Segments = new Collection() { new Segment(Segments.Orthogonal) }
};
//Create Nodes
model.Nodes.Add(CreateNode("Start", 50, FlowShapes.Terminator, "Start"));
model.Nodes.Add(CreateNode("Init", 140, FlowShapes.Process, "var i = 0;"));
//Connect Nodes
model.Connectors.Add(ConnectNodes("connector1", "Start", "Init"));
ViewData["diagramModel"] = model;
Connector ConnectNodes(string name, string source, string target)
{
return new Connector()
{
Name = name,
SourceNode = source,
TargetNode = target
};
}
FlowShape CreateNode(string name, int width, int height, int offsetX, int offsetY, FlowShapes shape, string text)
{
FlowShape node = new FlowShape()
{
Shape = shape,
Name = name,
OffsetY = offsetY,
Labels = new Collection() { new Label() { Text = text } }
};
return node;
}Complete flow diagram
Similarly we can add required nodes and connectors to form a complete flow diagram.
//Initialize model properties
DiagramProperties model = new DiagramProperties();
//Default Settings
model.DefaultSettings.Node = new Node() { Type = Shapes.Flow, Width = 140, Height = 50, OffsetX = 300 };
model.DefaultSettings.Connector = new Connector()
{
Labels = new Collection() { new Label() { FillColor = "white" } },
Segments = new Collection() { new Segment(Segments.Orthogonal) }
};
//Create Nodes
model.Nodes.Add(CreateNode("Start", 50, FlowShapes.Terminator, "Start"));
model.Nodes.Add(CreateNode("Init", 140, FlowShapes.Process, "var i = 0;"));
model.Nodes.Add(CreateNode("Condition", 230, FlowShapes.Decision, "i < 10?"));
model.Nodes.Add(CreateNode("Print", 320, FlowShapes.PreDefinedProcess, "i < 10?"));
model.Nodes.Add(CreateNode("Increment", 410, FlowShapes.Process, "i < 10?"));
model.Nodes.Add(CreateNode("End", 500, FlowShapes.Terminator, "i < 10?"));
//Connect Nodes
model.Connectors.Add(ConnectNodes("connector1", "Start", "Init"));
model.Connectors.Add(ConnectNodes("connector2", "Init", "Condition"));
model.Connectors.Add(ConnectNodes("connector3", "Condition", "Print", "Yes"));
model.Connectors.Add(ConnectNodes("connector4", "Condition", "End", "No",
new Segment() { Type = Segments.Orthogonal, Direction = "right", Length = 30 }));
model.Connectors.Add(ConnectNodes("connector5", "Print", "Increment"));
model.Connectors.Add(ConnectNodes("connector5", "Increment", "Condition", "",
new Segment() { Type = Segments.Orthogonal, Direction = "left", Length = 30 }));
ViewData["diagramModel"] = model;
//Helper methods
Connector ConnectNodes(string name, string source, string target, string text = "", Segment segment = null)
{
Connector connector = new Connector()
{
Name = name,
SourceNode = source,
TargetNode = target,
Labels = new Collection() { new Label() { Text = text } }
};
if (segment != null) connector.Segments = new Collection() { segment };
return connector;
}
FlowShape CreateNode(string name, int offsetY, FlowShapes shape, string text)
{
FlowShape node = new FlowShape()
{
Shape = shape,
Name = name,
OffsetY = offsetY,
Labels = new Collection() { new Label() { Text = text } }
};
return node;
}Final flow chart will looks as shown below.
Automatic organization chart
In ‘Flow Diagram’ section we saw how to create a diagram manually, now let us see how to create and position diagram automatically.
Initialize diagram
Initializing diagram is already discussed in Flow Diagram > Initialize diagram section.
Business object (Employee information)
- Define Employee Information as JSON data. The following code example shows an employee array whose,
-
Nameis used as a unique identifier and -
ReportingPersonis used to identify the person to whom an employee report to, in the organization.
-
//Initialize data source - Saved in a JSON file...
{
data: [
{ Name: "Elizabeth", Role: "Director" },
{ Name: "Christina", ReportingPerson: "Elizabeth", Role: "Manager" },
{ Name: "Yoshi", ReportingPerson: "Christina", Role: "Lead" },
{ Name: "Philip", ReportingPerson: "Christina", Role: "Lead" },
{ Name: "Yang", ReportingPerson: "Elizabeth", Role: "Manager" },
{ Name: "Roland", ReportingPerson: "Yang", Role: "Lead" },
{ Name: "Yvonne", ReportingPerson: "Yang", Role: "Lead" }
]
}Map data source
- You can configure this “Employee Information” with Diagram, so that the node and connector are automatically generated using mapping properties. The following code examples show how dataSourceSetting is used to map id and parent with property name identifiers for employee information.
DiagramProperties model = new DiagramProperties();
model.DataSourceSettings.DataSource = GetEmployeeData();
model.DataSourceSettings.Id = "Name";
model.DataSourceSettings.Parent = "ReportingPerson";
Array GetEmployeeData()
{
string text = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/employee.json"));
Dictionary<string, object> data = (Dictionary<string, object>)new JavaScriptSerializer().DeserializeObject(text);
return (Array)data["data"];
}Visualize employee
Following code examples indicate how to define the default appearance of node and connector using defaultSettings. The NodeTemplate is used to update each node based on employee data.
DiagramProperties model = new DiagramProperties();
//Configure data source
model.DataSourceSettings.DataSource = GetEmployeeData();
model.DataSourceSettings.Id = "Name";
model.DataSourceSettings.Parent = "ReportingPerson";
//Default Settings
model.DefaultSettings.Node = new Node()
{
Width = 70,
Height = 30,
Shape = { Type = Shapes.Rectangle, CornerRadius = 5 },
Labels = new Collection() { new Label() { FontSize = 11, Bold = true, FontFamily = "Segoe UI", FontColor = "white" } }
};
model.DefaultSettings.Connector = new Connector()
{
Segments = new Collection() { new Segment(Segments.Orthogonal) }
};
model.NodeTemplate = "nodeTemplate";
ViewData["diagramModel"] = model;//To represent the roles
var codes = {
Director: "rgb(0, 139,139)",
Manager: "rgb(30, 30,113)",
Lead: "rgb(0, 100,0)"
}
// Bind custom data with node
function nodeTemplate(diagram, node) {
node.labels[0].text = node.Name;
node.fillColor = codes[node.Role];
}Apply org chart layout
- Next you need to arrange nodes in an organizational chart structure, and to do this you can apply layout as shown in following code example. You can see that spacing, margin and orientation are defined, that can also be customized based on the needs.
DiagramProperties model = new DiagramProperties();
model.Layout.Type = LayoutTypes.OrganizationalChart;
model.Layout.MarginX = 10;
model.Layout.MarginY = 50;
model.Layout.HorizontalSpacing = 50;
model.Layout.VerticalSpacing = 50;
model.Layout.Orientation = LayoutOrientations.TopToBottom;- The Employee details are displayed in the Diagram as follows.
