GoJS Sample for JSFIDDLE

Impressive software, just way too expensive in my opinion.

by itsjustcarlos

HTML

<script src="http://www.gojs.net/latest/samples/goSamples.js"></script>
<script src="http://www.gojs.net/latest/release/go.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>

CSS

/* Copyright 1998-2014 Northwoods Software Corporation. All Rights Reserved. */
 body {
    font-family: sans-serif;
    font-size: 13px;
}
p {
    max-width: 700px;
}
p.box {
    border: 1px solid #BBB;
    padding: 4px 4px 6px 4px;
}
p.warning {
    background-color: #FCD5CD
}
.diagramContainer {
    border : solid 1px blue;
}
pre {
    font-size : 9pt;
}
.footer {
    text-align: right;
    font-size: 10px;
}
/* new: */
 #sample {
    margin-left: 0px;
}
#menu {
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #DDD;
    padding: 4px;
    margin-right: 5px;
    background-color: #F9F9F9;
    width: 120px;
    float: left;
}
#sections {
    list-style-type: none;
    font-size: 13px;
    padding: 0px;
    margin: 0px;
    line-height: 1.3em;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a li {
    color: #0645AD;
}
a li:hover, a li:focus {
    background: #CEDFF2;
}
a li.selected {
    background: #1E90FF;
    color: white
}
.index {
    margin-top: 0px;
}

JavaScript

init();


  function init() {

    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram =
      $(go.Diagram, "myDiagramDiv",  // the DIV HTML element
        {
          // Put the diagram contents at the top center of the viewport
          initialDocumentSpot: go.Spot.TopCenter,
          initialViewportSpot: go.Spot.TopCenter,
          // OR: Scroll to show a particular node, once the layout has determined where that node is
          //"InitialLayoutCompleted": function(e) {
          //  var node = e.diagram.findNodeForKey(28);
          //  if (node !== null) e.diagram.commandHandler.scrollToPart(node);
          //},
          layout:
            $(go.TreeLayout,  // use a TreeLayout to position all of the nodes
              {
                treeStyle: go.TreeLayout.StyleLastParents,
                // properties for most of the tree:
                angle: 90,
                layerSpacing: 80,
                // properties for the "last parents":
                alternateAngle: 0,
                alternateAlignment: go.TreeLayout.AlignmentStart,
                alternateNodeIndent: 20,
                alternateNodeIndentPastParent: 1,
                alternateNodeSpacing: 20,
                alternateLayerSpacing: 40,
                alternateLayerSpacingParentOverlap: 1,
                alternatePortSpot: new go.Spot(0.001, 1, 20, 0),
                alternateChildPortSpot: go.Spot.Left
              })
        });
        
          function showMessage(s) {
    document.getElementById("diagramEventsMsg").textContent = s;
  }
myDiagram.addDiagramListener("ObjectSingleClicked",
      function(e) {
        var part = e.subject.part;
        if (!(part instanceof go.Link)) alert("Clicked on " + part.data.boss);
      });
    // define Converters to be used for Bindings
    function theNationFlagConverter(nation) {
      return "https://www.nwoods.com/go/Flags/" + nation.toLowerCase().replace(/\s/g, "-") + "-flag.Png";
 ...