GoJs Sample

Sample dynamic gojs

by Rishi Kumar

HTML

<script src="https://gojs.net/latest/release/go.js"></script>
<script src="https://gojs.net/latest/assets/js/goSamples.js"></script>
<div id="sample" style="position: relative;">
  <div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 700px"></div>
  <div id="myOverviewDiv"></div> <!-- Styled in a <style> tag at the top of the html page -->
  <p>
  This sample shows an organizational chart diagram and uses an in-laid GoJS <a>Overview</a> to aid the user in navigation.
  The diagram uses a <a>TreeLayout</a> featuring <a>TreeLayout.StyleLastParents</a> to allow for different alignments on the last parents.
  The data was taken from the UN web site in August 2009.
  </p>
  <p>
  A search box demonstrates one way of finding and highlighting nodes whose data includes particular strings.
  Note that one can see all of the highlighted nodes in the Overview.
  </p>
  <input type="search" id="mySearch" onkeypress="if (event.keyCode === 13) searchDiagram()">
  <button onclick="searchDiagram()">Search</button>
  <p>
    To learn how to build an org chart from scratch with GoJS, see the <a href="../learn/index.html">Getting Started tutorial</a>.
  </p>
  <p>
    If you want to have some "assistant" nodes on the side, above the regular reports,
    see the <a href="orgChartAssistants.html">Org Chart Assistants</a> sample, which is a copy of this sample
    that uses a custom <a>TreeLayout</a> to position "assistants" that way.
  </p>
</div>

JavaScript

init();

    function init() {
        
      var $ = go.GraphObject.make;  // for conciseness in defining templates

      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
            initialContentAlignment: go.Spot.Center,
            validCycle: go.Diagram.CycleNotDirected,
            "undoManager.isEnabled": true
          });  // don't allow loops

      // This template is a Panel that is used to represent each item in a Panel.itemArray.
      // The Panel is data bound to the item object.
      var fieldTemplate =
        $(go.Panel, "TableRow",  // this Panel is a row in the containing Table
          new go.Binding("portId", "name"),  // this Panel is a "port"
          { background: "transparent",  // so this port's background can be picked by the mouse
            fromSpot: go.Spot.Right,  // links only go from the right side to the left side
            toSpot: go.Spot.Left,
            fromLinkable: true, toLinkable: true },  // allow drawing links from or to this port
          $(go.Shape,
            { width: 12, height: 12, column: 0, strokeWidth: 2, margin: 4,
              fromLinkable: false, toLinkable: false },
            new go.Binding("figure", "figure"),
            new go.Binding("fill", "color")),
          $(go.TextBlock,
            { margin: new go.Margin(0, 2), column: 1, font: "bold 13px sans-serif",
              fromLinkable: false, toLinkable: false },
            new go.Binding("text", "name")),
          $(go.TextBlock,
            { margin: new go.Margin(0, 2), column: 2, font: "13px sans-serif",
              fromLinkable: false, toLinkable: false },
            new go.Binding("text", "info"))
        );

      // This template represents a whole "record".
      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          { movable: true,
            copyable: false,
            deletable: true },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          // this...