DIAGRAM CHART TEMPLATE

by saurabhkolhe

HTML

<script src="https://gojs.net/latest/release/go.js"></script>
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:650px"></div>

</div>

<! This is diagram chart template >

JavaScript

init();

function init() {

  const $ = go.GraphObject.make;
  myDiagram =
    $(
      go.Diagram, "myDiagramDiv", // must be the ID or reference to div
      {
        "undoManager.isEnabled": true // enable undo & redo
      });

  var assyTempl = $(go.Node, "Vertical", {
      layoutConditions: go.Part.LayoutStandard
    },
    $(go.Panel, "Auto", {
        cursor: "pointer"
      },
      $(go.Shape, "RoundedRectangle", // to show the node selected
        {
          fill: "green",
          strokeWidth: 0,
          opacity: 0.5
        },
      ),
      $(go.Panel, "Table",
        
        $(go.Panel, "Auto", {
            //row: 1,
            //column: 1,
            //portId: "" // this whole panel acts as the only port for the node
          },
          $(go.Shape, "Circle", {
          visible: true,
          name: "SHAPE",
          row: 0,
          column: 0,
          width: undefined,
          height: undefined,
          fill: "yellow"
        }),
        $(go.TextBlock, {
              name: "TextBlock",
              alignmentFocus: go.Spot.Default,
              //alignment: go.Spot.Bottom,
              //width: 50,
              //
              row: 2,
              column: 1,
              //margin: new go.Margin(400, 4, 4, 0),
              verticalAlignment: go.Spot.Bottom
            },
            new go.Binding("text", "name")
          ) 
        )
      )
    )
  );

  myDiagram.layout = $(go.LayeredDigraphLayout, {
    columnSpacing: 10,
    direction: 0,
    layerSpacing: 50
  });
  // create the nodeTemplateMap, holding three node templates:
  const templmap = new go.Map(); // In TypeScript you could write: new go.Map<string, go.Node>();
  // for each of the node categories, specify which template to use
  templmap.add("assy", assyTempl);
  templmap.add("part", assyTempl);

  myDiagram.nodeTemplateMap = templmap



  // define the Link template
  myDiagram.linkTemplate =
    $(go.Link, go.Link.Orthogonal, {
       ...