A complete guide to GoJS JavaScript library
Created by developers for developers, the GoJS is a skyrocket JavaScript library dedicated to building interactive diagrams and graphs. While being the most trustworthy resource, GoJS has been adopted as one of the most useful libraries for data visualization tools’ crafting.
The article covers the business and technical benefits of the GoJS library. To dive deeper into the topic, you can download the GoJS e-book. It’s a comprehensive publication filled with the knowledge and experience related to technical and business GoJS aspects
Introduction to GoJS diagramming library
The GoJS library was launched in 2012 by Northwoods Software – a tech company focused on providing superior graphical user interfaces. Once found the niche on the market for interactive diagram components and class libraries across a variety of platforms, Northwood’s engineers have decided to fill it with the new technology.
The GoJS is a feature-rich and extensible JavaScript and TypeScript library. It provides a set of ready-to-use functionalities, customizable templates, and layouts ensuring a high degree of customization. All that is designed to make developer’s life easy. The flexible library enables building almost any type of diagram or chart – from very basic to highly specific industrial diagrams, SCADA systems, BPMN diagrams, medical genograms, modeling diagrams, extended family tree diagram and many others. Consequently, these features place it among the most useful custom tools in data visualization.
Being an out-of-the-box JavaScript and TypeScript library, the GoJS offers support for interactivity by providing features such as drag&drop (just drag nodes and drop them, without using javascript code), copy&paste, graph editors, context menus, in-place text editing, tooltips, automatic layouts, templates, data bindings, model data, palettes, or even handlers and commands. These just a few of the rich functionalities’ portfolios, but to put it simply – GoJS allows you to create fully editable diagrams.
GoJS business benefits
There’s no truer statement than “time is money” in the digital era, when customers expect personalized services at a lightning-fast speed. The longer the decision-making process lasts, which means providing the necessary information, preparing offers, and crafting customized products, the more money is “burnt” both by the sales team and product engineers. Not even to mention the prolonged client’s service process which may result in withdrawing the intention to purchase.
That’s where GoJS rules. By showcases such data in one flow, it emphasizes all relations between them. Diagrams can present the dynamics, illustrate dependencies, and finally depict them in a cause-effect sequence. In short, they show how things work. Charts, however, focus the attention on quantitative data presentation. The advantages mentioned above are multiplied, as every organization may find a unique way of using data circulation. To help you find a more precise idea of how it may look, see the presented below real-life use cases with some custom layout examples.
Business Process Modeling & Data Flow Management
Business processes and information flow for enterprise software and services provider
Business processes and information flow for enterprise software and services provider BPM, in general, are a graphical representation of workflows within an organization. They pinpoint bottlenecks and aim to streamline processes. The GoJS’s interactive support and introduction of graphical user interference make it easy to create an app encompassing all the cross-department processes. Depiction in the form of, for instance, tree layout, leads to the more effective usage of data circulation within the company.
Schematic Design
Schematic editor for electrical circuits modeling
More GoJS’ diagramming capabilities lie in the area of schematic design. Its primary purpose is to accurately map physical reality into graphical form, taking into account all physical requirements and the relationships between them. The schematic design includes a description of structural, mechanical, plumbing, and electrical building systems, to name just a few. It enables the implementation of risk strategies relating to security, flooding, or fire alarms. By defining the technical aspects of every stable element of the system and grasping all their implications, schematic designs in GoJS allow depicting the process that must be run in case of any unexpected event.
Structures (Org Charts)
Organization chart with OKR editor
The library can also be used to describe some structures, such as companies’ organizational chart or OKR maps. The responsive diagrams help the user to take into account each employee’s level in the hierarchy and the relationship between them. With the graph editors and drag & drop features usage, it’s possible to change these relationships. Furthermore, org charts enable to add (and remove) nodes, which ensures the ability to reflect any recent changes, making it useful as a support tool for HR departments.
Monitoring system
Manufacturing process management system for smart factories and assembly setup
The Northwoods software library doesn’t offer only configurators. The library supports building systems enabling administrators to monitor a variety of sensors in, e.g., industrial halls. Their range and level of complexity may vary from small apps including tens of elements to advanced solutions that encompass a company’s entire infrastructure consisting of thousands of sensors. The solution makes it easy and error-proof to monitor and control heating, ventilation, air conditioning systems access, energy consumption, and many other variables. Moreover, sensors can automatically generate warnings when an issue occurs.
Effortless Product Configuration thanks to context menus
Drag and drop product configurator for automotive industry leader
The core of the development of customized products and services is tools that give customers control. Based on technology that facilitates the design and manufacture of customized products, its role is to be easy to use. The GoJS, by default, meets the challenge. Thanks to interactivity “baked in” this JS library (i.e., drag&drop, undo/redo, or clipboard layout), navigating tools based on this library is 100% intuitive. The GoJS diagrams are user editing friendly – the end-user can effortlessly drag the elements and compose the desired item. It results in immediate final price calculations of the product.
Robotic Process Automation
Chatbot automation flow for AI-powered chatbot platform
Business processes — and pretty much every business activity being a sequence of processes — consist of both repeatable tasks and the so-called „human touch”. While the repeatable tasks are consuming a vast amount of time, there is not much space for human creativity. Reversing this situation is highly desirable. That’s precisely how GoJS apps can be used. Setting rules for how the robot works can be applied by a non-technical user via a clear, graphical interface.
Simulations (digital twins)
Production line flow manager for gardening tools manufacturer
The digital twins refer to a virtual simulation model of an „item” (such as a car, airplane, tunnel, building, bridge, engine, or production line). It imitates how the actual „item” behaves or works in real life. The tool helps engineers to perform simulations that showcase the product’s performance in given circumstances. The manufacturers and engineers can test products in action, identify and understand the nature of potential faults, and reduce the risk of putting faulty products into the market.
To learn more about the business benefits download the GoJS e-book.
GoJS technical advantages
While searching for alternatives to Northwoods software library, developers can always turn to pure JavaScript. It’s the most extensive and universal developing programming language. JavaScript is a safe and relatively easy-to-use technology used for developing data visualization web tools. Yet, utilizing it in business apps seems… a bit old-school. Let’s be clear here – it is just counterproductive, especially when various libraries — both paid and free — can accelerate development. GoJS is a library dedicated to creating fully interactive diagrams. However, its flexibility, extensibility, and performance optimization deserve deep-dive.
Flexibility & Extensibility
Extensibility and flexibility are two characteristics of both programming languages and software systems that reflect, respectively, how easy it is to enhance their default possibilities by adding new, tailor-made functionalities. They define how easy it is to change their given capabilities to be used in a way that wasn’t intended originally.
The extensibility of GoJS is the result of two main factors. First, it gives more freedom by default by not forcing to use any specific rules, likewise a framework. In short, anything possible with JavaScript is also possible with this library. It helps, but not in any exact, arbitrarily implied way. Secondly, its extensibility is the fact it is… a library, not another editor for drawing diagrams. Tools, such as Draw.io or Miro, are powerful and help non-technical users present data. Still, their limitations are clear when it comes to creating more advanced, tailor-made solutions.
Integrations possibilities
From basic to more complex solutions, it is possible to create a variety of custom-made apps. Basic refers to the app that can be filled with data in an Excel-like tab and instantly translated into a diagram. Complex, on the other hand, are the apps that allow running advanced simulations, presenting complicated business rules, or monitoring processes. Note, that GoJS can be integrated with any external business tools such as CRMs, ERPs, marketing automation platforms, or any analytical tools via API or by other means. It allows GoJS to visualize data from many sources and additionally seeing and analyzing the big picture that can’t be overrated in any business.
GoJS architecture
Performance
Thanks to its well-optimized performance, GoJS allows operating even the most advanced calculations on the front-end at optimal speed, with no need to set up additional infrastructure. It makes the GoJS the most stable and safest option, while there are often issues with the frequent transfer of large amounts of information between the backend and the frontend.
GoJS competitors and alternatives
JavaScript’s visualization libraries are the right start to create the tools supporting data management in the company. Their diversity and unique features don’t limit the tool creators. As JavaScript becomes more popular in data visualization, new libraries appear on the market to enable the crafting of beautiful charts and graphs for the Web. The below examples indicate various libraries to use in building up the visualization tools based on a wide range of diagrams and charts with the focus on responsiveness, fast working, framework compatibility, and look & feel aspects.
jsPlumb
jsPlumb is an open-source solution for building editable JavaScript diagram apps that offer many essential features out-of-the-box, such as undo/redo, automatic layouts, zooming, loading/saving data, and many others. The jsPlumb toolkit allows creating various types of diagrams such as org flowcharts, circular, process flow diagrams, sequence diagrams, all with full mobile support.
yWorks
This library provides you with multiple ready-to-use tools that create both simple graphs and complex diagrams, visualizing complex data flows. All apps created in yWorks run in browsers, including mobile versions.
D3
D3.js is also a JavaScript library for managing documents using data. It is based on HTML, SVG, and CSS and allows you to build any type of visualization.
Rappid
Rappid is the paid commercial extension to JointJS Core, a free, open-source JS library that natively supports visualization and interaction with diagrams, graphs, and more. It extends its functionality with interaction components, additional shapes, and widgets, enabling you to build advanced HTML5 applications.
Cytoscape
Cytoscape, originally invented for biological research purposes, grew into a general platform for complex network analysis and visualization. Its core distribution provides a basic set of features for data integration, analysis, and visualization.
React-vis
React-vis is a React visualization library, designed to work just like the Facebook-backed framework. It has properties, children, and callbacks that can be composed. It handles a great number of charts, from area charts to tree maps.
JavaScript visual libraries comparison
Compared to other popular libraries, GoJS wins with a dozen or so crucial technical functionalities. They make it, among paid libraries, a popular solution for developers who create data processing tools.
GoJS allows full customization, supports data interactivity, and allows you to use the convenient drag & drop function. It is also worth mentioning that the optimization function is enabled when navigating large diagrams and integrating with external libraries. In short, this library allows you to create, animate and present almost any type of GoJS diagram. Speaking of BPM-related tasks, it works great as a source for creating functionalities that present data flow, grouping, or connecting objects using the non-intersecting line.
GoJS e-book
To learn more about the technical aspects download the GoJS e-book. The e-book is a collection of practical information about the GoJS library, which can become a source of knowledge for you to craft interactive diagrams and data visualization tools. It is a theoretical and practical compendium, which speaks of the legitimacy of using modern solutions. Thus, it can contribute to the development of your business.
