GoJS in 12 Minutes: JavaScript Diagramming Library Tutorial

Summary

In 'GoJS in 12 Minutes,' viewers are introduced to GoJS, a JavaScript library for creating interactive diagrams and complex visualizations in web browsers. The video covers GoJS's features, such as no server contact, compatibility with libraries like Angular and React, and built-in functionalities like undo/redo and touch support. It guides through setting up a basic diagram, including creating an HTML page, defining node and link data, and styling with templates. The tutorial also touches on data binding, group organization, and customization, emphasizing GoJS's flexibility and performance.

Takeaways

• 🌐 GoJS is a JavaScript library for creating interactive diagrams and complex visualizations in web browsers.
• 💡 It operates entirely in the browser, independent of server contact or third-party libraries, ensuring compatibility with other libraries like Angular and React.
• 🚀 GoJS is highly beneficial for applications needing diagrams, potentially saving significant development time and offering built-in features like undo/redo and touch support.
• 🎨 The library is versatile, supporting the creation of various diagram types, from flowcharts to industry-specific visualizations.
• 🛠️ GoJS is easy to start with, thanks to its model/view architecture, and is highly customizable and extensible, catering to specific development needs.
• ⚡ It leverages the HTML Canvas for high-performance diagramming, ensuring fast rendering and interaction.
• 🔗 To use GoJS, basic knowledge of HTML for setting up diagram containers and JavaScript for programming is required.
• 📚 GoJS can be accessed from gojs.net, which offers numerous samples, introductory pages, and comprehensive API documentation.
• 🆓 A free, unlimited trial is available, including 30 days of free support, and GoJS can be obtained through npm, NuGet, and GitHub.
• 🔧 The script demonstrates creating a simple diagram with nodes and links, explaining the setup process, data modeling, and basic styling with templates.

Q & A

What is GoJS and what does it specialize in?

GoJS is a feature-rich JavaScript library for implementing custom interactive diagrams and complex visualizations across modern web browsers.

Does GoJS require server contact or third-party libraries?

No, GoJS runs completely in the browser without the need for server contact or dependence on any third-party libraries or software.

What types of applications can benefit from using GoJS?

Applications that require diagrams and visualizations, such as flowcharts, organizational charts, trees, logic circuits, industry-specific visualizations, and even applications for creating and editing complex layouts like floorplans.

What are some of the built-in features that come with GoJS?

GoJS comes with commonly expected features like undo/redo, in-place editing, touch and stylus support, and diagram overviews.

How does GoJS handle browser and platform differences?

GoJS is prepared out-of-the-box to handle differences between various browsers and platforms, ensuring compatibility and interoperability.

What is the basic requirement to start developing with GoJS?

To start developing with GoJS, you need to know at least a little HTML and be familiar with JavaScript.

How can one obtain GoJS and what resources does the official site offer?

GoJS can be obtained from its official site, gojs.net, which offers hundreds of samples, dozens of intro pages, and full API documentation.

What is the purpose of the 'init' function in setting up a GoJS diagram?

The 'init' function is used to initialize the GoJS diagram and is called once the document body has finished loading.

How are nodes and links represented in a GoJS diagram?

In a GoJS diagram, nodes are represented by an HTML DIV element, and links are defined by connecting nodes through their keys.

What are templates in GoJS and how are they used?

Templates in GoJS define the style for all Nodes and Links in the diagram. They are used to specify the appearance and behavior of diagram components.

How can one customize the appearance of Nodes and Links in GoJS?

The appearance of Nodes and Links can be customized by defining templates and using data bindings to link the properties of diagram elements to the data in the model.

What is a Group in GoJS and how does it simplify organizing Nodes and Links?

A Group in GoJS treats a collection of Nodes and Links as though they were a single Node, simplifying the organization and manipulation of related diagram components.

Outlines

00:00

😀 Introduction to GoJS

The video introduces 'GoJS in 12 Minutes,' a tutorial on setting up a basic diagram using GoJS, a JavaScript library for creating interactive diagrams and complex visualizations. GoJS operates entirely in the browser, is compatible with various libraries like Angular and React, and does not require server interaction or third-party software. It offers features such as undo/redo, in-place editing, and touch support out-of-the-box. The library is suitable for building various types of diagrams and applications, with a focus on ease of use, flexibility, and extensibility. The video emphasizes GoJS's performance, leveraging HTML Canvas for high-speed diagramming. To get started, viewers need basic HTML and JavaScript knowledge. GoJS can be obtained from gojs.net, npm, NuGet, and GitHub, with a free trial available for 30 days of support.

05:01

🛠️ Building a Basic GoJS Diagram

The tutorial demonstrates creating a simple GoJS diagram by setting up an HTML page with a reference to the go.js file. A DIV element with the ID 'myDiagramDiv' is added to the HTML body. The 'init' JavaScript function initializes the diagram once the document body has loaded. GoJS objects are created using 'go.GraphObject.make,' which is assigned to a simpler variable ('$') for convenience. The diagram is created by calling 'go.GraphObject.make' with 'go.Diagram' and the DIV ID as arguments. The size of the diagram is set via CSS, with a width and height of 300px and a border for visibility. Node and link data are added to the model in the form of JSON objects, defining keys for nodes and connections for links. The video explains the process of creating a basic, functional diagram with nodes and links.

10:02

🎨 Styling Nodes and Links in GoJS

The video proceeds to style the nodes and links of the diagram by defining templates. A node template is created using 'go.GraphObject.make' to define the style for all nodes, including a shape and a text block. An Auto Panel is used to contain the shape and text, with the shape set as the main element. Data bindings are added to the shape's fill and the text block's text, linking them to data properties. The node data is updated to include a 'color' property, which the template binds to the shape's fill. The text block's text is bound to the node's 'key' property. The tutorial then moves on to styling links, defining a link template with a main shape and an arrowhead shape. Data bindings are applied to the link's 'stroke' and 'fill' properties, linking them to the link's 'color' data property. The video concludes with a brief mention of further customization options and the availability of the code for download, inviting viewers to explore more features and templates in future videos.

Keywords

💡GoJS

GoJS is a JavaScript library specifically designed for creating interactive diagrams and complex visualizations for web applications. It operates entirely in the browser, which means it doesn't require server-side interaction or third-party software dependencies. In the video, GoJS is highlighted as a powerful tool for developers to build various types of diagrams, such as flowcharts and organizational charts, with built-in features like undo/redo and touch support.

💡Diagram

A diagram in the context of GoJS refers to a visual representation of information, often used to depict the structure or relationships within a system. Diagrams can range from simple flowcharts to complex, industry-specific visualizations. The video emphasizes the versatility of GoJS in creating diagrams, showcasing how it can be used to build everything from basic flowcharts to intricate floorplans.

💡HTML Canvas

The HTML Canvas is an element used to draw graphics via scripting (usually JavaScript). In GoJS, the HTML Canvas is utilized to deliver high-performance diagramming capabilities. The video mentions that GoJS takes full advantage of the HTML Canvas to ensure that the diagrams are rendered quickly and smoothly, which is crucial for applications requiring dynamic and responsive visualizations.

💡Model/View Architecture

The model/view architecture is a design pattern that separates the data model (the logic and data of the application) from the view (the user interface). GoJS uses this architecture, making it easier for developers to build diagrams by keeping the data and presentation logic separate. The video script mentions this as one of the reasons GoJS is straightforward and easy to get started with.

💡Customization

Customization in GoJS refers to the ability to modify and tailor the appearance and behavior of diagram components to meet specific requirements. The video discusses the multitude of editable built-in properties and features that allow for easy customization of diagram elements, making it suitable for a wide range of applications and use cases.

💡Templates

In GoJS, templates are used to define the appearance and behavior of diagram elements such as nodes and links. The video script provides an example of creating a nodeTemplate and a linkTemplate, which are used to style the nodes and links in the diagram. This feature allows developers to create a consistent look and feel across their diagrams.

💡Data Binding

Data binding in GoJS is a feature that links the properties of diagram elements to the data stored in the model. This allows for dynamic changes in the appearance and behavior of diagram parts based on the underlying data. The video demonstrates how to bind the fill color of a shape and the text of a text block to data properties, enabling the diagram to reflect the data's state.

💡GraphObjects

GraphObjects in GoJS are the building blocks of diagrams, including nodes, links, groups, and other graphical elements. The video script describes how to create and manipulate GraphObjects, such as defining a Shape or TextBlock, to construct the visual components of a diagram.

💡Groups

Groups in GoJS are a way to organize and treat a collection of nodes and links as a single entity. This can be useful for creating sub-diagrams or managing complex relationships within a diagram. The video script illustrates how to create a group by setting the 'isGroup' property to true and adding nodes and links to it, which simplifies the management of diagram components.

💡go.js File

The go.js file is the script file that contains the GoJS library. It is referenced in the HTML page to enable the use of GoJS functionalities. The video script instructs viewers to add a reference to the go.js file when setting up a new HTML page for their diagrams, which is a fundamental step in integrating GoJS into a web project.

💡DIV Element

In the context of GoJS, a DIV element is an HTML container used to define the area where the diagram will be displayed. The video script mentions adding a DIV element with a specific ID in the HTML document's body, which is then associated with a GoJS diagram. This is a standard approach for embedding interactive content in web pages.

Highlights

Introduction to 'GoJS in 12 Minutes' tutorial series.

GoJS is a JavaScript library for interactive diagrams and visualizations.

GoJS runs in the browser without server contact or third-party dependencies.

Interoperable with libraries like Angular, React, and Node.

GoJS is suitable for applications requiring diagrams and visualizations.

Features include undo/redo, in-place editing, and touch support.

GoJS can create various diagrams like flowcharts and organizational charts.

GoJS has a model/view architecture for easy diagram building.

Customization is simple with editable built-in properties and features.

Extensible with layouts, tools, methods, and classes that can be overridden.

Performance is optimized using HTML Canvas for high-speed diagramming.

Prerequisites for using GoJS include basic HTML and JavaScript knowledge.

GoJS can be obtained from gojs.net, npm, NuGet, and GitHub.

Creating a simple example diagram involves setting up an HTML page and referencing GoJS.

Diagrams are associated with HTML DIV elements and styled with CSS.

Node and link data is added to the model to populate the diagram.

Templates are used to style nodes and links in the diagram.

Data bindings allow for conditional appearance and behavior based on data.

Groups can organize nodes and links as a single entity.

Further customization is possible with built-in properties and group templates.

Encouragement to explore GoJS with available resources and free trial for support.

Transcripts

Hello, and welcome to “GoJS in 12 Minutes.”

We’re going to set up a basic Diagram using GoJS and discuss how you can start developing

with it, for free, today.

GoJS is a feature-rich JavaScript library for implementing custom interactive diagrams

and complex visualizations across modern web browsers.

It runs completely in the browser; there’s no need for contact with a server, nor does

it depend on any third party libraries or software.

As such, GoJS is interoperable with virtually any other library, like Angular, React, and Node.

GoJS is an excellent investment for any developer or team whose application requires diagrams

and visualizations.

It can save weeks or months of work, delivers commonly expected features, like undo/redo,

in-place editing, touch and stylus support, and Diagram overviews, and comes out-of-the-box

prepared to handle differences between various browsers and platforms.

With GoJS, there’s virtually no limit to the types of diagrams you can build.

Examples include

flowcharts, organizational charts, trees, logic circuits, industry-specific visualizations,

and even entire applications for creating and editing something as complex as a floorplan.

GoJS is straightforward; it’s easy to get started building Diagrams, thanks to the familiar

model/view type architecture.

GoJS is flexible; the multitude of editable built-in properties and features make customizations

for Diagram components a breeze.

GoJS is extensible: from Layouts to Tools, methods and classes can be overridden or expanded

upon, allowing for even the most specific development requirements to be met.

All of this power wouldn’t mean much without speed, but thankfully, GoJS is lightning-fast,

taking full advantage of the HTML Canvas to support high-performance diagramming.

So, what does it take to get all this power, apart from the GoJS library itself?

You’ll need to know at least a little HTML, if only to set up the DIV elements for your

Diagrams to reside in.

And of course, you’ll need to be familiar with JavaScript.

And that’s it.

Again, GoJS is not dependent on any third party libraries or software.

You can get GoJS from its official site, gojs.net, which also features hundreds of samples, dozens

of intro pages to help get you started, and full API documentation.

If you register for a free, unlimited trial, you will receive 30 days of free support.

GoJS can also be obtained through npm, NuGet, and GitHub.

Now, let’s build a simple example Diagram.

First, we must create a new HTML page.

Then, be sure to add a reference to your go.js file.

GoJS Diagrams are usually associated with an HTML DIV element, so let’s add one here

in the body of our HTML document, and assign it the id “myDiagramDiv.”

We’ll also define a JavaScript function, init(), which fires only once the document

body has finished loading.

Time to build the Diagram.

When we build GoJS objects, we make calls to the function go.GraphObject.make.

Since we're going to do this so often, it makes sense to assign that function to a simpler variable

-- here we use the dollar sign.

In our init function, we’ll call go.GraphObject.make

and pass go.Diagram as the first argument, and the ID of the DIV element our Diagram

should be associated with as the second argument, in this case, “myDiagramDiv.”

We store a reference to this Diagram in the variable myDiagram.

We specify the size of the Diagram by assigning the height and width of the DIV element in

its CSS.

Let’s set width and height both to 300px.

Let’s also give it a border so we can see it more clearly.

Now we have a Diagram, but nothing in it.

We need to give its Model some node and link data.

Let’s create two Arrays; one for node data, and one for link data.

Let’s add two elements to the nodeDataArray.

Each element is an object in JSON format.

The node data here is very simple -- it only contains a string value for the “key”

property, a unique property that acts an identifier for each Node in GoJS.

Let’s add nodes with keys “Alpha” and “Beta.”

For our linkDataArray, we’ll have single element, with just two properties: “to”

and “from.”

These properties’ values correspond with the keys of the Nodes this Link connects.

We’ll assign them to “Alpha” and “Beta”, the keys of the nodes we defined our nodeDataArray.

Note that we do not need to specify key here.

If no key is provided for an element in a Model’s nodeDataArray, a unique one is

automatically generated, and keys are not necessary for link data.

Next, we set our Diagram’s Model to a new GraphLinksModel.

When we construct our GraphLinksModel, we pass it our nodeDataArray and linkDataArray,

respectively.

Now, if we load the page, we see a simple Diagram with two Nodes, connected by a single Link.

Our Diagram works, but it’s not much to look at.

We can style Nodes and Links by defining templates.

First, we’ll build a nodeTemplate, which will define the style for all Nodes in the

Diagram, then we’ll build a linkTemplate, which will define the style for all Links

in the Diagram.

You can have any number of Node and Link templates in your Diagram, though this example only

uses one each.

First, let’s set myDiagram.nodeTemplate to a fresh Node, using go.GraphObject.make

and passing it go.Node as its first parameter.

Nodes are comprised of Panels and other GraphObjects -- a Node itself is actually a Panel.

Panels act as containers to hold other objects (such as TextBlocks, Shapes, and Pictures).

The type of a Panel decides how its constituent elements are positioned graphically.

For this example, we’ll just use one Panel.

Since the first argument we passed to go.GraphObject.make was go.Node, the second argument corresponds

with the type of Panel that will be used for the Node as a whole.

Let’s use an Auto Panel, which will treat its first element as the main element, and

position all following elements inside the first element.

To do this, pass the string “Auto” as the second parameter.

Then we define the elements inside this Auto Panel.

We’ll have a Shape, which we define with a call to go.GraphObject.make with parameters

go.Shape, a string corresponding with the desired figure for the Shape (in this case,

“RoundedRectangle”, one of the built-in figures), and a JSON object with key/value

pairs for the properties of the Shape.

We will only define a single property, fill, and set its value to “white.”

The next element to define is a TextBlock.This is defined with a call to go.GraphObject.make

with parameters go.TextBlock, and the default text to show, in this case, the string “text.”

Let’s see what we have now.

Okay, so now each Node appears as a RoundedRectangle shape with the word “text” inside them.

Note how the TextBlock appears inside the Shape element; this is because these elements

were declared inside an Auto Panel, and so the first element, the Shape element, is treated

as the main element, with all following elements enclosed within it.

Let’s improve our nodeTemplate with some data bindings.

Data bindings are a powerful feature of GoJS that allow for various appearance and behavior

changes of Diagram Parts, such as Nodes, conditional on their data stored in the Model.

Let’s bind the fill of the Shape element to a data property called “color,” and

the text property of the TextBlock element to the “key” data property.

First, let’s update our node data so the data bindings in the nodeTemplate will have

data to work with.

We already have key properties in the nodeDataArray, but we need to add the color property for

each Node.

Let’s add color: “lime” and color: “cyan” for “Alpha” and “Beta”, respectively.

Now, to add a data binding to the Shape, we pass a new go.Binding instance after the properties object.

The first parameter corresponds with the Shape property being bound; the second parameter

corresponds with the data property to bind the first property to.

In this case, “fill” is the first property and “color” is the second.

We can bind the text of the TextBlock to the key property in node data the same way; by

passing a new go.Binding to the TextBlock element of the nodeTemplate with the parameters

“text” and “key.”

Now see what we have.

It’s looking better already.

Let’s style the Links as well.

This time, we’ll define myDiagram.linkTemplate, sort of like we did the nodeTemplate.

However, Links are different kinds of Parts than Nodes -- they do not need a Panel type

parameter, and the main element of a Link is the first Shape, whose geometry is computed

dynamically by GoJS.

We’ll have two shapes in our linkTemplate -- the first is the link itself, while the

second is the arrow that points to the Node referenced by a Link’s “to” data property.

The second Shape is assigned the string “Standard”,one of the built-in arrowhead values, to its "toArrow"

property, and null to its "stroke" property.

This ensures it looks like an arrow at the “to” end of the Link, and not like a square

at the center of the Link.

The default Shape is a 100 by 100 rectangle, and setting "toArrow" or "fromArrow" overrides this.

We’ll also add data bindings to the Link elements.

For the first Shape, the main element that represents the Link itself, we’ll bind the

“stroke” property to the “color” data property.

For the second Shape element, we’ll bind the “fill” property to the “color”

data property.

This will make the Link appear as whatever color is stored in the Link’s data.

Let’s make our Link red, by setting its “color” property in the linkDataArray.

We can also change the appearance of our Nodes and Links by editing some built-in properties

on their elements.

First, let’s set the "margin" of the TextBlock element in our nodeTemplate to 10 -- this

creates some room around the text.

We’ll also set the "strokeWidth" of the first Shape element in our linkTemplate to 3, making

our links a little bit thicker than normal.

Now look at what we have.

There are hundreds of properties that can be edited for GoJS GraphObjects.

Organizing Nodes and Links together is made easy with Groups.

Groups will treat a collection of Nodes and Links as though they were a single Node.

We can create a Group by adding a new element in the nodeDataArray, "Zeta", and setting the

"isGroup" property to true.

Then, we add two new Nodes to the nodeDataArray, Delta and Gamma, set their "color" property,

and assign their "group" data property to the key of our new Group element, Zeta.

We can also link to our new Group simply by adding an element to the linkDataArray, from,

say, "Alpha", to "Zeta".

The link will point to the Group, not a specific member of the Group.

Now look at the result.

We could further style our Groups by defining a groupTemplate, as we did for our nodeTemplate

and linkTemplate.

For now, this is enough.

Keep an eye out for future videos that will explain, in depth, how to define complex templates

with various Panels and elements.

Please note all this code is available for download in the description below.

That’s it for our coding overview.

And that’s just the tip of the iceberg.

With more features and customization, the possibilities for GoJS applications are limitless.

Head over to gojs.net to see hundreds of samples, read more about GoJS features on the Intro

pages, or peruse the full API documentation.

Sign up for an unlimited free trial and you’ll get 30 days of developer-to-developer support

for free.