Post
Ask Question

Learn GoJS From Beginning - Part One

Introduction

 
In this article, we will explore the basics of GoJS. We will learn the basics because I have written this article focusing on beginners. Also, we will discuss how we use GoJS with ASP.NET.
  • Learn GoJS From Beginning - Part One
  • Learn GoJS From Beginning - Part Two
  • Learn GoJS From Beginning - Part Three
  • Learn GoJS From Beginning - Part Four
  • Learn GoJS From Beginning - Part Five
Prerequisites
 
We should have a basic knowledge of HTML and JavaScript.
 
Any version of Visual Studio should be installed. I recommend you use Visual Studio 2015.
 

GOJS

 
GoJS is a JavaScript library for creating custom diagrams, flowcharts, trees, and complex visualizations across all modern web browsers and technology platforms. GoJS provides many advanced features for users. GoJS is completely written in Javascript, so it's easy for developers to Understand and Implement in projects.
 
We can integrate GoJS in any JavaScript framework like jQuery, AngularJS, or any other JavaScript Framework.
 
GoJS provides a powerful solution to develop a diagram, modeling, and visualization application. By using GoJS, it’s possible to create user-friendly web applications allowing end-users to construct complex diagrams.
 
GoJS is used to create your inherent diagrams. It's created and maintained by Northwoods Software. Northwoods Software was founded in 1994 with a vision to provide graphical user interfaces(GUI) to the Companies and customers. Northwoods launched GoJS IN 2012.
 
GoJS makes constructing JavaScript diagrams of complex nodes, links, and groups easy with customizable templates and layouts.
 
It runs completely in the web browsers. There is no need to contact the server.
 

GoJS is not depended on any third party library

 
Using GoJS, we can create flowcharts, trees, organizational diagrams, industry specified visualizations etc.
 
GoJS Classes
  1. Diagram Classes
  2. Model Classes
  3. Collection Classes
  4. Layout Classes
  5. Geometry Classes
Diagram Classes Model Classes Collection Classes Geometry Classes
Diagram Binding Map Size
Link Model List Spot
Node Transaction Set Rect
Shape ChangedEvent Iterator Margin
TextBlock TreeModel Iterable Geometry
 
Step 1 
 
First, we need to include GoJS Library in our project. For this, we can download the library from the GoJS official website or download it from here.
 
Or we can add using NPM (Node Package Manager) using this command: $ npm install gojs --save
 
We also include this library using Nuget: PM>install-package Northwoods.GoJS
 
We can also add it from GitHub Repository from GitHub.
 
Step 2
 
Add a new item to the project. 
 
JavaScript
 
Step 3
 
Add new web form and rename it as GojsDemo1.
 
JavaScript
 
Step 4
 
Now, add the GoJS library in the Head section by simply dragging from the script folder and dropping it on the page.
 
JavaScript
 
Step 5
 
Now, add a div and rename it as divdemodiagram.
 
JavaScript
 
Code Snippet
  1. <div id="Divdemodiagram" style="background-color: white; border: solid 1px blue; width: 100%; height: 500px"></div>   
Step 6
 
Add the Function and write the following code.
 
JavaScript
 
Code Snippet
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GoJsDemo1.aspx.cs" Inherits="SimpleGoJsDemo.GoJdDemo1" %>    
  2. <!DOCTYPE html>    
  3. <html xmlns="http://www.w3.org/1999/xhtml">    
  4. <head runat="server">    
  5.     <title></title>    
  6.     <script src="Scripts/jquery-1.10.2.min.js"></script>    
  7.     <script src="Scripts/go.js"></script>    
  8.     <script>    
  9.         function init() {    
  10.            var $ = go.GraphObject.make;      
  11.     
  12.              myDiagram = $(go.Diagram, "Divdemodiagram",    
  13.                           {    
  14.                               initialContentAlignment: go.Spot.Center,      
  15.                               "undoManager.isEnabled": true      
  16.                           });    
  17.              myDiagram.nodeTemplate =    
  18.               $(go.Node, "Auto",     
  19.                 $(go.Shape, "Ellipse", { strokeWidth: 1 },    
  20.                       
  21.                   new go.Binding("fill", "color")),    
  22.                 $(go.TextBlock,    
  23.                   { margin: 10 },      
  24.                  new go.Binding("text", "key"))    
  25.               );    
  26.             myDiagram.model = new go.GraphLinksModel(    
  27.              [    
  28.               { key: "A", color: "Red" },    
  29.               { key: "B", color: "Blue" },    
  30.               { key: "G", color: "green" },    
  31.               { key: "D", color: "pink" }    
  32.             ],    
  33.             [    
  34.               { from: "A", to: "B" },    
  35.               { from: "A", to: "c" },    
  36.               { from: "B", to: "B" },    
  37.               { from: "D", to: "A" }    
  38.             ]);    
  39.         }    
  40.     </script>    
  41. </head>    
  42. <body>    
  43.     <form id="form1" runat="server">    
  44.         <div id="Demo">    
  45.                 <div id="Divdemodiagram" style="background-color: white; border: solid 1px blue; width: 100%; height: 500px"></div>    
  46.              </div>    
  47.           </form>    
  48. </body>    
  49. </html>   

Summary

 
In this article, I have explained a very simple example of GoJS. In my next article, we will learn GoJS classes in detail to better understand the concept of GoJS.


Similar Articles