The Gearhead Toolbox, second opening. Tools for diagrams and gauges.

[UPDATED]

Web-based information displays such as dashboards, have become a popular way to present summaries of complex data and in this issue of the Gearhead Toolbox I have two killer JavaScript libraries for creating and editing diagrams, and another equally great library for creating gauge displays. Enjoy …

GOJS

GoJS bills itself as:

GoJS is a feature-rich JavaScript library for implementing custom interactive diagrams and complex visualizations across modern web browsers and platforms. GoJS makes constructing JavaScript diagrams of complex nodes, links, and groups easy with customizable templates and layouts. [It includes] drag-and-drop, copy-and-paste, in-place text editing, tooltips, context menus, automatic layouts, templates, data binding and models, transactional state and undo management, palettes, overviews, event handlers, commands, and an extensible tool system for custom operations.

GoJS is an open source proprietary source* pure JavaScript library running completely in the browser rendering on an HTML5 canvas so there’s no server-side requirements, no overhead involved with round-trips to a server, and no plugins. The authors note that “it should work with any HTML or JavaScript framework or with no framework at all.”

The GoJS web site provides an amazing number of examples demoing everything from simple flowcharts to Gantt and Euler diagrams, Kanban boards, and force-directed layouts. Priced $1,350 per developer for internal use and $2,995 per developer for OEM use, this is not a cheap tool but for anyone building a sophisticated graphical presentation, this is one of the most powerful libraries currently available.

MXGRAPH

mxgraph is another open source, pure JavaScript, client-side library for creating interactive diagrams that renders to SVG and HTML and it’s free! The authors explain:

mxGraph supports IE 11, Chrome 32+, Firefox 38+, Safari 7.1.x, 8.0.x, 9.1.x and 10.0.x, Opera 20+, Native Android browser 5.1.x+, the default browser in the current and previous major iOS versions (e.g. 10.x and 9.x) and Edge 23+. / mxGraph uses no third-party software, it requires no plugins and can be integrated in virtually any framework. Also provided is server-side functionality in Java and .NET for persistence (open and save) functionality, as well as server-side image generation.

This is a slightly more technical product than GoJS and examples are available. In particular, check out Graph Editor, a fully functional diagram editor and drawing application based on mxgraph. It saves graphs as local XML files and its sister application, draw.io, can save to Google Drive, GutHub, DropBox, OneDrive, or locally and supports a wide range of graph types.

CANVAS GAUGES

Sometimes the best way to show data on a web page is not by printing a number but by imitating a gauge and that is, not surprisingly, exactly what the free, open source Canvas Guages provides:

Canvas gauges are friendly to minimalist code design, so whenever you need these gauges to use on a desktop, mobile or IoT devices with limited resources, you can be assured it will provide you the best options to get the minimum amount of code for your solution.

Canvas Gauges provides linear and radial gauges and the examples cover zero configuration gauges, compass gauges, and various customized versions with sources and the documentation is excellent. This is a fantastic toolset for building slick web-based dashboards that deliver data in a visually appealing and easy to digest way.

* Tip o’ the hat to Sebastian Müller for pointing out that GoJS is actually closed, proprietary source; their Github repo only contains demo software sources.

Comments? Thoughts? Drop me a line then follow me on Twitter and Facebook. And sign up for my new newsletter!