Learn GoJS From Beginning - Part One

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.

Introduction

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 Clasess

  1. Diagram Classes
  2. Model Classes
  3. Collection Classes
  4. Layout Classes
  5. Geometry Classes
Diagram ClassesModel ClassesCollection ClassesGeometry Classes
DiagramBindingMapSize
LinkModelListSpot
NodeTransactionSetRect
ShapeChangedEventIteratorMargin
TextBlockTreeModelIterableGeometry

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 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 GibHub 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 GoJS library in the Head section by simply dragging from 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.