Introduction to GoJS | Build Interactive Diagrams and Flow Chart for JavaScript and HTML

Hello Everyone, In the last article, I have explained about Uploading video to YouTube from C# ASP.NET MVC. Hope that helps many people who working in Social Media Integration and YouTube API. In this Article, I will write an introduction to GOJS.

Introduction :

Have you ever wanted to produce the programmatic Flow chart, Organizational diagrams, State Diagrams, Tree Diagram, Mind Map and so?. If your answer is yes, Then you need this tool badly. This GoJS tool is helpful for building a lot of diagrams. You can build via program very easily. Just See what are the diagrams can you build from their site.

To download Go here Download. They have a support forum to provide help. Its just JavaScript file. Refer to HTML document to use it.

Impressed?. I'm very much interested in building diagrams via this GoJS tool. Overall this is an Awesome tool. Okay, then How can I build via code? Don't worry they provided source codes for all the samples. And If you wanna make changes to the diagram then you can make it easily.

Explanation :

Let's take a Flow chart example. In that You can Drag the element, Double click the node to edit the text in it, or draw a connection between the nodes. Well, everything is working well. You know one thing you can save the edited diagram and load it again. Yes In that page itself its there. In that text area, you can see some JSON code, that code only gives structure to the diagram. We can even save it into Database and restore it in page load :).

In that diagram itself, we have to define how the node will be I mean the properties of nodes and links and shapes and color. That JSON code will make the structure of that whole diagram.

Coding Part :

If you Go through that source code you can easily understand it. If you can't means go through again. Its easy to read the code.

myDiagram =
$(go.Diagram, "myDiagram", // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.Center,
allowDrop: true, // must be true to accept drops from the Palette
"LinkDrawn": showLinkLabel, // this DiagramEvent listener is defined below "LinkRelinked": showLinkLabel,
"animationManager.duration": 800, // slightly longer than default (600ms) animation "undoManager.isEnabled": true // enable undo & redo
});

That above code defines the Diagram properties, whatever you draw it will be based on these properties.

myDiagram.nodeTemplateMap.add("CategoryName", // the default category
$(go.Node, "Spot", nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$(go.Panel, "Auto",
$(go.Shape, "Rectangle",
{ fill: "#00A9C9", stroke: null },
new go.Binding("figure", "figure")),
$(go.TextBlock,
{
font: "bold 11pt Helvetica, Arial, sans-serif",
stroke: lightText,
margin: 8,
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit,
editable: true
},
new go.Binding("text").makeTwoWay())
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, false) ));

Above code is Sample code for node template In that we define the color, text, width, margin,font, Shape and more. That "CategoryName" is the name of the category. Whatever the node have this category will have these properties, So we can have many nodes or share the same node properties to many nodes by varying shapes.

myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5, toShortLength: 4,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
// mouse-overs subtly highlight links:
mouseEnter: function(e, link) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; },
mouseLeave: function(e, link) { link.findObject("HIGHLIGHT").stroke = "transparent"; }
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, // the highlight shape, normally transparent
{ isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
$(go.Shape, // the link path shape
{ isPanelMain: true, stroke: "gray", strokeWidth: 2 }),
$(go.Shape, // the arrowhead
{ toArrow: "standard", stroke: null, fill: "gray"}),
$(go.Panel, "Auto", // the link label, normally not visible
{ visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5},
new go.Binding("visible", "visible").makeTwoWay(),
$(go.Shape, "RoundedRectangle", // the label shape
{ fill: "#F8F8F8", stroke: null }),
$(go.TextBlock, "Yes", // the label
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "#333333",
editable: true
},
new go.Binding("text", "text").makeTwoWay())
)
);

This is for define the Link properties. If you wanna change the properties then you can modify it. In left side the is one block is there right that name is a palette. From that Palette only we drag nodes and drop into diagrams. If you go through the remaining code it will be easy to understand.

Summary :

So far we have seen the introduction part of GoJS plugin. It's JavaScript plugin so we just refer this to the HTML page and make diagrams. GoJS have Paid and Evaluation version. You can try evaluation version freely.

In Next GoJS article I will explain about

Storing each node to SQL Server Database and retrieve it and build diagram again.
Having Tooltip on each node.
Performing an action when to clicking on each node.
Use Drop down box and other custom controls in node and links.
Change color of the node.
Using different shapes.
Make read only diagram and edit it so it will look like View and Edit mode.

Like this I have done personally, Soon I will write articles about these functions.