GoJS Interactive JavaScript Diagrams for the Web
GoJS, created by developers for developers, quickly gained popularity as one of the most trustworthy solutions dedicated to building interactive diagrams and graphs. As the need for data visualization tools continues to grow — its adoption only increased.
I this article you’ll read about the business and technical benefits of GoJS. To dive deeper into the topic download the GoJS e-book, a comprehensive book filled with the knowledge and experience related to GoJS technical and business aspects.
About GoJS diagramming library
GoJS was launched in 2012 by Northwoods Software, a tech company
focused on providing superior graphical user interfaces. Northwoods’ engineers found a niche on the market for interactive diagram components
and class libraries across a variety of platforms and decided to fill it.
GoJS is a feature-rich, extensible and flexible JavaScript and TypeScript library. It provides a set of ready-to-use functions, customizable templates, and layouts that make life easy for developers while ensuring a high
degree of customization. With GoJS it is possible to build almost every type of diagram or chart, from very basic charts, to highly specific industrial diagrams, SCADA systems, BPMN diagrams, medical genograms, modeling diagrams, and many others.
GoJS, out-of-the-box, offers support for interactivity, providing features
such as drag&drop, copy&paste, context menus, in-place text editing,
tooltips, automatic layouts, templates, data binding, and models, palettes, event handlers, and commands, to name just a few. To put it simply,
it allows you to create fully editable diagrams.
GoJS business benefits
The statement „time is money” — no matter how corny it sounds — was never truer than now, in the digital era, when customers expect personalized services delivered at a lightning-fast speed. The longer the decision-
-making process lasts — providing the necessary information, preparing
offers, crafting customized products — the more money is „burnt” both by
the sales team and product engineers. Not to mention that clients forced
to wait for answers are always more willing to change their minds and
withdraw their intention to purchase.
And here is where GoJS shines, by showing such data in one flow, emphasizing all relations between them. Diagrams can show dynamics, illustrate dependencies and present them in a cause-effect sequence. Long
story short: they can show how something works. Charts, on the other
hand, are focused primarily on quantitative data presentation.
The advantages mentioned above can be multiplied, as every organization may find its own unique way of using data circulation. However, to
help give you a more concrete idea of how that may look, below are presented real-life use cases:
Business Process Modeling & Data Flow Management
BPM, in general, is the graphical representation of workflows within an organization. It allows pinpointing bottlenecks and aims to streamline processes. Thanks to GoJS, with its interactive support and graphical user interface, it is easy to create an app encompassing all the cross-department
processes within a company. It can lead to, for example, more effective
usage of data circulating within the company.
Schematic Design
More proof of GoJS’ diagramming capabilities lies in the area of schematic design. The primary purpose of schematic design is to accurately
map physical reality into graphical form, taking into account all physical
requirements and the relationships between them. The schematic design in GoJS includes a description of structural, mechanical, plumbing, and electrical building systems, to name just a few, and 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 allow depicting the process that must be run in case of any unexpected event.
Structures (Org Charts)
As much as GoJS focuses on, and excels at depicting data flow, it can also
be used to describe some structures, such as companies’ org charts or
OKR maps. GoJS diagrams can take into account each employee’s level in the hierarchy and the relationship between them. Using the drag & drop features
allows users to change these relationships and enable them 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
Configurators are not the only thing that GoJS offers (see below). This library can also be used to build 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. It is 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 in case of any problems.
Product Configuration
The development of customized products and services requires tools
that give customers control. It must be based on technology that facilitates the design and manufacture of customized products, and its ease of
use is a crucial success factor. Fortunately, GoJS, by default, meets the challenge. Thanks to full support for interactivity „baked into” this JS library (embodied in features such as drag&drop, undo/redo, or clipboard layout, to
name just a few), navigating GoJS-based tools is as intuitive as could be.
End-user can freely edit a diagram, and, by dragging the elements, compose the desired item, and immediately know the final price of the product.
Robotic Process Automation
Business processes — and pretty much every business activity which can
be „broken down” into a sequence of processes — consist of both repeatable tasks and the so-called „human touch”. Typically, the problem is that
repeatable tasks consume a vast amount of time, reducing the space for
human creativity. Reversing this situation is highly desirable, and this is
precisely how GoJS apps can be used. Setting rules how robot works can be
applied by a non-technical user via a clear, graphical interface.
Simulations (digital twins)
This mysterious term refers to a virtual simulation model of an „item”
(such as a car, airplane, tunnel, building, bridge, engine, or production
line), which imitates how the actual „item” behaves or works in real life.
It is a tool that helps engineers to foresee how products will perform in
given circumstances. They allow manufacturers and engineers to 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
Developers seeking alternatives to GoJS can always turn to pure JavaScript. It is the most extensive, universal, and — let’s not be afraid to say it — developing programming language. It is a safe and relatively easy-to-use technology that can be used for developing data visualization web tools. Yet, using it in business apps seems… a bit old-school. It is not that it is bad per se; it is just counterproductive, especially when various libraries — both paid and free — can accelerate development.
GoJS is a JavaScript 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 and 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, not forcing us to use any specific rules, as a framework would. And it is safe to say that anything possible with JavaScript is also possible with GoJS. It helps but not in any exact, arbitrarily implied way. For second, its extensibility is the fact it is… a library, not an editor for drawing diagrams, which there are plenty of on the market. 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 any more advanced,
tailor-made solutions.
Integrations possibilities
It is possible to create a variety of custom-made apps, from quite basic ones, such as an app that can be filled with data in an Excel-like tab and instantly translated into a diagram, to apps that allow running advanced simulations, presenting complicated business rules, or monitoring processes. 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. Thanks to this feature, GoJS allows visualizing data from many sources, and seeing and analyzing the big picture can’t be overrated in any business.
Performance
GoJS, thanks to its well-optimized performance, allows performing even the most advanced calculations on the front-end at optimal speed, with no need to set up additional infrastructure. This is, in fact, the most stable and safest
option, given that there are often problems with the frequent transfer of
large amounts of information between the backend and the frontend.
GoJS competitors and alternatives
JS visualization libraries are the right start for the creation of the tools
to manage any data 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 build 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 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 plenty of 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 of
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 this 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 treemaps.
Compared to other popular libraries, GoJS has a dozen or so crucial technical functionalities that 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, GoJS allows you
to create, animate and present almost any type of diagram. Speaking of
BPM-related tasks, it works great as a source for creating functionalities
that present data flow, grouping, or connecting objects using non-intersecting line
GoJS e-book
To learn more about the technical aspects download the GoJS e-book. It’s a collection of practical information about the GoJS library, hoping it to be 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.
