Shop Floor Monitor

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

First, I highly recommend that you read and then all of the Introduction pages,, 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 To modify existing nodes programmatically, call Read more at

For highlighting, read and examine the samples that use those features.

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

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

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:

Alternatively you could use other layouts:

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.

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” },
{ fill: null, stroke: null },
new go.Binding(“background”, “problem”)),
{ margin: 5 },
new go.Binding(“source”, “type”, nodeTypeImage))
), // end Auto Panel

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

   // conversion function for Bindings in the Link template: 
   myDiagram.linkTemplate = 
     $(go.Link, go.Link.AvoidsNodes, 
       { corner: 3 }, 
         { 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
{ 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

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:

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.