Creating nodes with Gojs | Lessoncup Programming Blog

Tuesday, 15 October 2013

Creating nodes with Gojs

Gojs is very useful library for creating a Html5 canvas diagrams,flowcharts,database relations and other things. before we start to work on this Framework we have to know about Nodes. A Node is used to creating a diagram that may connect to other nodes with Links. You can customize your Nodes to have exactly the appearance and behavior that you want. Let's see how we create the basic Nodes.




Javascript

Include the Gojs library inside the HEAD tag.

here i take the custom javascript function myFirstnode() to put some code inside this later we call this function with onload event in BODY tag.

Gojs functions.

we can create the diagram using this function  new go.Diagram("divName");  and model.addNodeData() is to creating the Nodes and model.undoManager.isEnabled = true; is used to enable the change what we made on diagram board.

We can drag & drop the Nodes, delete the nodes by selecting, copy and paste the nodes and undo the changes what we made.


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

<script>

function myFirstnode() {

var myDiagrams = new go.Diagram("lessoncup");
    
myDiagrams.model.addNodeData({ key: "HTML5" });
myDiagrams.model.addNodeData({ key: "Jquery" });
myDiagrams.model.addNodeData({ key: "PHP" });
myDiagrams.model.addNodeData({ key: "MySql" });
myDiagrams.model.addNodeData({ key: "CSS3" });
myDiagrams.model.addNodeData({ key: "Ajax" });
myDiagrams.model.addNodeData({ key: "GoJs" });
myDiagrams.model.addNodeData({ key: "Backbone.js" });
myDiagrams.model.addNodeData({ key: "bootstramp.js" });

myDiagrams.model.undoManager.isEnabled = true;

}
 
</script>

HTML

<body onload="myFirstnode()">

<div id="lessoncup"></div>

</body>


Live Demo

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons