Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use GoJS HTML5 Canvas Library for drawing diagrams and graphs?
GoJS is a powerful JavaScript library for creating interactive diagrams, flowcharts, organizational charts, and network graphs on HTML5 Canvas. It provides a model-view architecture where Models hold arrays of JavaScript objects describing nodes and links, while Diagrams act as views to visualize this data using actual Node and Link objects.
When you construct a diagram with GoJS, it creates an HTML5 Canvas element that gets placed inside a specified DIV element on your web page. This makes it ideal for creating dynamic, interactive visualizations that users can manipulate.
Getting Started with GoJS
To start using GoJS, you need to include the library in your HTML document. You can load it from CDNJS or download it locally. Here's how to include it from the CDN −
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.3.13/go.js"></script>
Note − Use go-debug.js during development for enhanced error checking and debugging information. Switch to go.js for production deployment as it's minified and optimized.
Basic Diagram Structure
Every GoJS diagram requires three essential components −
HTML Container − A DIV element where the diagram will be rendered
Diagram Object − The main GoJS diagram instance
Model Data − JavaScript objects representing nodes and links
Creating Your First Diagram
Example − Simple Node Diagram
Following example creates a basic diagram with two connected nodes −
<!DOCTYPE html>
<html>
<head>
<title>GoJS Basic Diagram</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.3.13/go.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>My First GoJS Diagram</h2>
<div id="myDiagramDiv" style="width: 500px; height: 300px; border: 1px solid #ccc;"></div>
<script>
const $ = go.GraphObject.make;
// Create the diagram
const myDiagram = $(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true
}
);
// Define node template
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
{ fill: "lightblue", stroke: "blue" }),
$(go.TextBlock,
{ margin: 8, font: "14px sans-serif" },
new go.Binding("text", "key"))
);
// Create model data
myDiagram.model = new go.GraphLinksModel([
{ key: "Start" },
{ key: "End" }
], [
{ from: "Start", to: "End" }
]);
</script>
</body>
</html>
This creates an interactive diagram with two rounded rectangle nodes connected by a link. Users can drag nodes and use undo/redo functionality.
Example − Organizational Chart
Following example demonstrates creating an organizational chart with hierarchical layout −
<!DOCTYPE html>
<html>
<head>
<title>GoJS Organizational Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.3.13/go.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Company Organization Chart</h2>
<div id="orgChart" style="width: 600px; height: 400px; border: 1px solid #333;"></div>
<script>
const $ = go.GraphObject.make;
const orgDiagram = $(go.Diagram, "orgChart",
{
"undoManager.isEnabled": true,
layout: $(go.TreeLayout, { angle: 90, layerSpacing: 35 })
}
);
// Node template with person info
orgDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "Rectangle",
{ fill: "#44CCFF", stroke: "#006699" }),
$(go.Panel, "Table",
$(go.TextBlock,
{
row: 0,
font: "bold 12px sans-serif",
margin: 4
},
new go.Binding("text", "name")),
$(go.TextBlock,
{
row: 1,
font: "10px sans-serif",
margin: 2
},
new go.Binding("text", "title"))
)
);
// Define link template
orgDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 10 },
$(go.Shape, { strokeWidth: 2, stroke: "#333" })
);
// Model data
orgDiagram.model = new go.TreeModel([
{ key: 1, name: "John Smith", title: "CEO" },
{ key: 2, name: "Jane Doe", title: "CTO", parent: 1 },
{ key: 3, name: "Mike Johnson", title: "CFO", parent: 1 },
{ key: 4, name: "Sarah Wilson", title: "Developer", parent: 2 },
{ key: 5, name: "Tom Brown", title: "Designer", parent: 2 }
]);
</script>
</body>
</html>
This creates a hierarchical organizational chart with automatic tree layout, showing employee names and titles in connected nodes.
Key GoJS Concepts
GraphObject.make Function
The go.GraphObject.make function (often aliased as $) is the primary method for creating GoJS objects. It simplifies the construction of complex diagram elements −
const $ = go.GraphObject.make; const myNode = $(go.Node, "Auto", $(go.Shape), $(go.TextBlock));
Templates and Data Binding
GoJS uses templates to define the appearance and behavior of nodes and links. Data binding connects template properties to model data −
// Bind text content to model data
new go.Binding("text", "name")
// Bind fill color to model data
new go.Binding("fill", "color")
Model Types
GoJS provides different model types for various diagram structures −
| Model Type | Use Case | Data Structure |
|---|---|---|
| Model | Simple node collections without links | Array of node data objects |
| GraphLinksModel | Nodes connected by separate link objects | Separate arrays for nodes and links |
| TreeModel | Hierarchical tree structures | Parent-child relationships in node data |
Example − Interactive Flowchart
Following example creates an interactive flowchart with different node shapes −
<!DOCTYPE html>
<html>
<head>
<title>GoJS Flowchart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.3.13/go.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Process Flowchart</h2>
<div id="flowChart" style="width: 700px; height: 400px; border: 1px solid #666;"></div>
<script>
const $ = go.GraphObject.make;
const flowDiagram = $(go.Diagram, "flowChart",
{
"undoManager.isEnabled": true,
layout: $(go.LayeredDigraphLayout, { direction: 0 })
}
);
// Template with conditional shapes
flowDiagram.nodeTemplateMap.add("start",
$(go.Node, "Auto",
$(go.Shape, "Ellipse",
{ fill: "#90EE90", stroke: "green" }),
$(go.TextBlock,
{ margin: 8, font: "12px sans-serif" },
new go.Binding("text", "text"))
)
);
flowDiagram.nodeTemplateMap.add("process",
$(go.Node, "Auto",
$(go.Shape, "Rectangle",
{ fill: "#87CEEB", stroke: "blue" }),
$(go.TextBlock,
{ margin: 8, font: "12px sans-serif" },
new go.Binding("text", "text"))
)
);
flowDiagram.nodeTemplateMap.add("decision",
$(go.Node, "Auto",
$(go.Shape, "Diamond",
{ fill: "#FFB6C1", stroke: "red" }),
$(go.TextBlock,
{ margin: 8, font: "10px sans-serif" },
new go.Binding("text", "text"))
)
);
// Model with different node categories
flowDiagram.model = new go.GraphLinksModel([
{ key: "Start", text: "Start Process", category: "start" },
{ key: "Input", text: "Get Input", category: "process" },
{ key: "Check", text: "Valid?", category: "decision" },
{ key: "Process", text: "Process Data", category: "process" },
{ key: "End", text: "End", category: "start" }
], [
{ from: "Start", to: "Input" },
{ from: "Input", to: "Check" },
{ from: "Check", to: "Process", text: "Yes" },
{ from: "Check", to: "Input", text: "No" },
{ from: "Process", to: "End" }
]);
</script>
</body>
</html>
This flowchart demonstrates different node shapes for different process types: ellipses for start/end, rectangles for processes, and diamonds for decisions.
591 Views
