GoJS in 12 Minutes: JavaScript Diagramming Library Tutorial
Summary
TLDRIn '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
😀 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.
🛠️ 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.
🎨 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.
Mindmap
Keywords
💡GoJS
💡Diagram
💡HTML Canvas
💡Model/View Architecture
💡Customization
💡Templates
💡Data Binding
💡GraphObjects
💡Groups
💡go.js File
💡DIV Element
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.
関連動画をさらに表示
Components, Props and JSX in React | Sigma Web Development Course - Tutorial #106
Belajar Laravel 11 | 3. Struktur Folder
Angular Login and Signup Page | Local-Storage | angular tutorial | angular tutorial for beginners
React tutorial for beginners ⚛️
Introduction to HTML | An HTML5 Tutorial for Beginners
Introducing Blazor Components [Pt 3] | Front-end Web Development with .NET for Beginners
5.0 / 5 (0 votes)