Shop Floor Monitor

GoJS
1

Hi I am creating a network diagram which contains various images like Shop Floor Monitor example
I want to add Nodes dynamically and dynamically want to change images,text of nodedataArray
also want to highlight some node or links
please suggest me way ahead

2

First, I highly recommend that you read Get Started with GoJS and then all of the Introduction pages, GoJS Introduction -- Northwoods Software, that describe features that you want in your app.

If you want the user to drag-and-drop new nodes, use a Palette, as many of the samples do. Or use the ClickCreatingTool.

If you want to add nodes programmatically, call Model | GoJS API. To modify existing nodes programmatically, call Model | GoJS API. Read more at GoJS Data Binding -- Northwoods Software.

For highlighting, read GoJS Highlighting -- Northwoods Software and examine the samples that use those features.

3

Thanks Walter
I will study it and get back to you if any query

4

Tree_Layout.png1366×768 101 KB

Hi @walter I am using Tree Layout
for my application Nodes can be dynamic so I cannot identify Links, so avoid that I am using tree layout but here problem is for Last Node there are two parents,so how to specify 2 parents to one node
am I using correct layout or not

5

TreeLayout is tolerant of non-tree structure graphs, but depending on the graph you might not like the results. If the graph is sufficiently like a tree, the TreeLayout could be adapted, as for example: Parallel Layout

Alternatively you could use other layouts: GoJS Layouts -- Northwoods Software

It is hard for me to recommend anything when I do not know precisely what you want and what kinds of graphs you will need to handle.

6

@walter
I am using below code to get data from TextArea in Json Format
myDiagram.model = new go.TreeModel(document.getElementById(“mySavedModel”).value);

My textarea is
[ {“key”:“1”, “text”:“Parent 8605\n1001187”, “type”:“I1”},
{“key”:“2”, “text”:“EAD\nONEA300983”, “type”:“M5”,“parent”:“1”},
{“key”:“3”, “text”:“7750\n580223”, “type”:“S3”,“parent”:“2”},
{“key”:“4”, “text”:“319499”, “type”:“C1”,“parent”:“3”},
{“key”:“5”, “text”:“319502”, “type”:“C2”,“parent”:“3”},
{“key”:“6”, “text”:“7750\n999205”, “type”:“S3”,“parent”:“4”},
{“key”:“7”, “text”:“7750\n711408”, “type”:“S3”,“parent”:“5”},
{“key”:“8”, “text”:“OSEA”, “type”:“M4”,“parent”:“6”},
{“key”:“9”, “text”:“OSEA”, “type”:“M4”,“parent”:“7”},
{“key”:“10”, “text”:“8660\n847952”, “type”:“I1”,“parent”:“8”},
{“key”:“11”, “text”:“8660\n847952”, “type”:“I1”,“parent”:“9”} ]

But its not printing graph
My Nodetemplate and linktemplate are as below
myDiagram.nodeTemplate =
$(go.Node, “Vertical”,
{ locationObjectName: “ICON” },
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
// $(
$(go.Panel, “Auto”,
{ name: “ICON” },
$(go.Shape,
{ fill: null, stroke: null },
new go.Binding(“background”, “problem”)),
$(go.Picture,
{ margin: 5 },
new go.Binding(“source”, “type”, nodeTypeImage))
), // end Auto Panel

        // ),  // end Spot Panel 
         $(go.TextBlock, 
           new go.Binding("text")) 
       );  // end Node 

   // conversion function for Bindings in the Link template: 
   myDiagram.linkTemplate = 
     $(go.Link, go.Link.AvoidsNodes, 
       { corner: 3 }, 
       $(go.Shape, 
         { strokeWidth: 2, stroke: "green" }, 
         new go.Binding("stroke")) 
     );

and my diagram is like this
myDiagram =
$(go.Diagram, “myDiagramDiv”, // must be the ID or reference to div
{
layout: // create a TreeLayout for the family tree
$(go.TreeLayout,
{ angle: 180, nodeSpacing: 15, layerSpacing: 15})
});

please help I am getting below error
Model.nodeDataArray value is not an instance of Array or NodeList or HTMLCollection
at File: go.js, Line: 13, Column: 483

7

The error message tells you that it has nothing to do with your templates or even how you are creating the Diagram, but how you are initializing the Model.

In particular, your code:

myDiagram.model = new go.TreeModel(document.getElementById("mySavedModel").value);

is passing a string as the first argument to the TreeModel constructor. But the first argument should be an Array of Objects: TreeModel | GoJS API

You have a choice.

Either make sure the contents of the textarea contain a TreeModel in JSON format, in which case you can call Model.fromJson, just as so many of the samples do.

Or parse the textarea string into an Array and pass that to your TreeModel constructor.