| layout | post |
|---|---|
| title | Getting started with Syncfusion Essential Diagram for Angular 1.0 |
| description | Getting started walk through to create your first Diagram and Organizational Chart Diagram. |
| platform | AngularJS |
| control | Diagram |
| documentation | ug |
Getting started with your Essential Angular 1.0 Diagram is easy.
Create an HTML page and add the scripts references in the order mentioned in the following code example.
{% highlight html %}
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js" type="text/javascript"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script> <script src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script> <script src="http://cdn.syncfusion.com/14.3.0.49/js/web/ej.web.all.min.js" type="text/javascript"></script> <script src="http://js.syncfusion.com/demos/web/scripts/xljsondata.js" type="text/javascript"></script> <script src="https://code.angularjs.org/1.4.0-rc.2/angular-route.min.js"></script> <script src="http://cdn.syncfusion.com/14.3.0.49/js/common/ej.widget.angular.min.js"></script>{% endhighlight %}
In the above code, ej.web.all.min.jsscript reference has been added for demonstration purpose. It is not recommended to use this for deployment purpose, as its file size is larger since it contains all the widgets. Instead, you can useCSG utility to generate a custom script file with the required widgets for deployment purpose.
Add a placeholder div element that can be used to initialize the diagram widget as shown below.
{% highlight html %}
{% endhighlight %}
{% highlight html %}
<script> var syncApp = angular.module("defaultApp", ["ngRoute", "ejangular"]); syncApp.controller('diagramCtrl', function($scope, $rootScope) {}); </script>{% endhighlight %}
This creates an empty diagram
Let us create and add a node (JSON data) with specific position, size, label and shape. Connect two or more nodes by adding a connector into diagram.connectors collection with reference to source and target end.
{% highlight html %}
{% endhighlight %}
{% highlight html %}
<script> var nodes = [{ // Unique name for the node name: "Start", // Position of the node offsetX: 300, offsetY: 50, // Size of the node width: 140, height: 50, // Text(label) added to the node labels: [{ text: "Start" }], // Shape for the node type: "flow", shape: "terminator" }, { name: "Init", offsetX: 300, offsetY: 140, width: 140, height: 50, labels: [{ text: "var i = 0;" }], type: "flow", shape: "process" } ]; var connectors = [{ // Unique name for the connector name: "connector1", // Source and Target node's name to which connector needs to be connected. sourceNode: "Start", targetNode: "Init", // An empty orthogonal segment segments: [{ type: "orthogonal" }] }]; var syncApp = angular.module("defaultApp", ["ngRoute", "ejangular"]); syncApp.controller('diagramCtrl', function($scope, $rootScope) { $scope.nodes = nodes; $scope.connectors = connectors; }); </script> {% endhighlight %}N> labels property is an array, which indicates that more than one label can be added to a node.
Added nodes and connector connecting node will be displayed in diagram as shown below.
- Define Employee Information as JSON data. The following code example shows an employee array whose,
Nameis used as a unique identifier andReportingPersonis used to identify the person to whom an employee report to, in the organization.
{% highlight javascript %}
var 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" } ];
{% endhighlight %}
- 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.
{% highlight html %}
{% endhighlight %}
Following code examples indicate how to define the default appearance of node and connector using defaultSetting. The NodeTemplate is used to update each node based on employee data.
{% highlight javascript %}
//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]; } var syncApp = angular.module("defaultApp", ["ngRoute", "ejangular"]); syncApp.controller('diagramCtrl', function($scope, $rootScope) { $scope.layout = { type: "organizationalchart", orientation: "toptobottom", horizontalSpacing: 25, verticalSpacing: 35, marginX: 3, marginY: 3 }; $scope.defaultSettings = { node: { constraints: ej.datavisualization.Diagram.NodeConstraints.Select | ej.datavisualization.Diagram.NodeConstraints.PointerEvents, fillColor: "#88C65C", width: 100, height: 40, borderColor: "black", borderWidth: 1, labels: [{ name: "label1", fontColor: "white", fontSize: 12, margin: { left: 10, right: 10 } }] }, connector: { lineColor: "#000000", segments: [{ type: "orthogonal" }], targetDecorator: { shape: "none" }, constraints: ej.datavisualization.Diagram.ConnectorConstraints.None } }; $scope.nodeTemplate = "nodeTemplate"; $scope.dataSourceSettings = { id: "Name", parent: "ReportingPerson", dataSource: data } };);
{% endhighlight %}
- The Employee details are displayed in the Diagram as follows.
