Custom Sort the Data in the tree

GoJS
1

Hi Everyone

I have the data as below. How do i sort the data in my tree?
Say i want Dashboard, Sheets, Objects and not concerned about the other elements in nodeDataArray
or
Sheets, Dashboard, Objects and not concerned about the other elements in nodeDataArray
or
Objects, Sheets, Dashboard, Objects and not concerned about the other elements in nodeDataArray
var nodeDataArray = [
{ “name”: “Dashboard” },
{ “name”: “Sheets” },
{ “name”: “Objects” },
{ “name”: “Dimensions” },
{ “name”: “Facts” },
{ “name”: “Notes” }
];
var linkDataArray = [
{ “from”: “Dashboard”, “to”: “Sheets” },
{ “from”: “Dashboard”, “to”: “Notes” },
{ “from”: “Sheets”, “to”: “Objects” },
{ “from”: “Sheets”, “to”: “Notes” },
{ “from”: “Objects”, “to”: “Dimensions” },
{ “from”: “Objects”, “to”: “Facts” },
{ “from”: “Objects”, “to”: “Notes” }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

2

You can use the TreeLayout.sorting property and TreeLayout.comparer functional property to control the ordering of the immediate children of any node in the tree structure.

But with your graph structure I have no idea of what you want to do, because “Dashboard”, “Sheets”, and “Objects” are not tree children of any node – in fact there is a relationship between them. So you cannot use the sorting of TreeLayout.

3

Hi Walter,

Thanks for quick response . This is the code i have written. Say i have 100 nodes, only 10 nodes are key (like parent nodes) and others are like children nodes.
Ex: nwoods have 100 employees and nwoods work with 3 client companies. nwoods employee can work with more than one client company. These 3 client companies might have employees of their own (not nwoods employee). I came up with this code to full fill my requirements. My goal is to sort nwoods, client1, client2 and client3 nodes in this order and all other nodes I don’t mind the sort because they are children.

myDiagram =
$(go.Diagram, “myDiagram”,
{“animationManager.isEnabled”: false,
contentAlignment: go.Spot.TopLeft,
autoScale: go.Diagram.Uniform,
isReadOnly: false,
“toolManager.mouseWheelBehavior”: go.ToolManager.WheelZoom,
“linkingTool.direction”: go.LinkingTool.ForwardsOnly,
layout: $(go.LayeredDigraphLayout, { direction: 90, layerSpacing: 10, setsPortSpots: false })
});

	myDiagram.startTransaction("shift left");
	myDiagram.nodeTemplate =
	  $(go.Node, "Auto",
		new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
		$(go.Panel, "Table",
		  { name: "SHAPE", margin: 4, 
		  opacity: 1},
		  $(go.RowColumnDefinition,
			{
			  column: 0,
			  stretch: go.GraphObject.Horizontal,
			  alignment: go.Spot.Left
			}),
			$(go.Picture,
			{
			  row: 0, column: 0,
			  desiredSize: new go.Size(150, 26),
			  margin: 0,
			  imageStretch: go.GraphObject.Uniform,
			  alignment: go.Spot.BottomLeft
			},
			new go.Binding("source", "pyramid", pyramidLevel).makeTwoWay()),
			$(go.Picture,
			{
			  row: 0, column: 1,
			  desiredSize: new go.Size(34, 26), margin: 0,
			  imageStretch: go.GraphObject.Uniform,
			  alignment: go.Spot.BottomRight
			},
			new go.Binding("source", "img", LocationImage).makeTwoWay()), 
		  $(go.TextBlock,
			{
			  row: 1, column: 0,
			  maxSize: new go.Size(150, NaN), margin: 2,
			  font: "bold 8pt sans-serif",
			  alignment: go.Spot.Top, background: "white"
			},
			new go.Binding("text", "name").makeTwoWay())
		)	
		);

	myDiagram.linkTemplate =
	  $(go.Link, 
		new go.Binding("points").makeTwoWay(),
		{ curve: go.Link.Bezier, toShortLength: 5 },
		new go.Binding("curviness", "curviness"),
		$(go.Shape,  // the link shape
		  new go.Binding("stroke", "color"),
		  { strokeWidth: 2.5 }),
		$(go.Shape,  // the arrowhead
		  new go.Binding("fill", "color"),
		  { toArrow: "kite", stroke: null, scale: 1.5 })
	);

	var nodeDataArray = [
		{ "name": "Dashboard", "img": "", "pyramid": "" },
		{ "name": "Sheets", "img": "", "pyramid": ""  },
		{ "name": "Objects", "img": "", "pyramid": ""  },
		{ "name": "Dimensions", "img": "", "pyramid": ""  },
		{ "name": "Facts", "img": "", "pyramid": ""  },
		{ "name": "Notes", "img": "", "pyramid": ""  }
	];
	var linkDataArray = [
		{ "from":  "Dashboard", "to": "Sheets" },
		{ "from":  "Dashboard", "to": "Notes" },
		{ "from":  "Sheets", "to": "Objects" },
		{ "from":  "Sheets", "to": "Notes" },
		{ "from":  "Objects", "to": "Dimensions" },
		{ "from":  "Objects", "to": "Facts" },
		{ "from":  "Objects", "to": "Notes" }
	];
	
	myDiagram.clear();
	myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);	  	
	myDiagram.layoutDiagram(true);  	

function LocationImage(vimg) {
   if (vimg === "oracle") return "oracle.jpg";
   if (vimg === "teradata") return "teradata.jpg";
   if (vimg === "file server") return "file server.jpg";
   if (vimg === "qlikview server") return "qlikview server.jpg";
  }
function pyramidLevel(levelColor) {
  if (levelColor === "1") return "ST.png";
  if (levelColor === "2") return "DT.png";
  if (levelColor === "3") return "AI.png";
  if (levelColor === "4") return "ET.png";
  if (levelColor === "5") return "TS.png";
  if (levelColor === "6") return "AG.png";
  if (levelColor === "7") return "FS.png";
4

I still do not understand what you want to do.

Here’s your code with a couple missing pieces filled in:

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        { initialContentAlignment: go.Spot.Center, "undoManager.isEnabled": true });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Panel, "Table",
          { name: "SHAPE", margin: 4, 
            opacity: 1},
          $(go.RowColumnDefinition,
            {
              column: 0,
              stretch: go.GraphObject.Horizontal,
              alignment: go.Spot.Left
            }),
          $(go.Picture,
            {
              row: 0, column: 0,
              desiredSize: new go.Size(150, 26),
              margin: 0,
              imageStretch: go.GraphObject.Uniform,
              alignment: go.Spot.BottomLeft
            },
            new go.Binding("source", "pyramid", pyramidLevel).makeTwoWay()),
          $(go.Picture,
            {
              row: 0, column: 1, background: "whitesmoke",
              desiredSize: new go.Size(34, 26), margin: 0,
              imageStretch: go.GraphObject.Uniform,
              alignment: go.Spot.BottomRight
            },
            new go.Binding("source", "img", LocationImage).makeTwoWay()), 
          $(go.TextBlock,
            {
              row: 1, column: 0,
              maxSize: new go.Size(150, NaN), margin: 2,
              font: "bold 8pt sans-serif",
              alignment: go.Spot.Top, background: "white"
            },
            new go.Binding("text", "name").makeTwoWay())
        )    
      );

    myDiagram.linkTemplate =
      $(go.Link, 
        new go.Binding("points").makeTwoWay(),
        { curve: go.Link.Bezier, toShortLength: 5 },
        new go.Binding("curviness", "curviness"),
        $(go.Shape,  // the link shape
          new go.Binding("stroke", "color"),
          { strokeWidth: 2.5 }),
        $(go.Shape,  // the arrowhead
          new go.Binding("fill", "color"),
          { toArrow: "kite", stroke: null, scale: 1.5 })
      );

    var nodeDataArray = [
      { "name": "Dashboard", "img": "", "pyramid": "" },
      { "name": "Sheets", "img": "", "pyramid": ""  },
      { "name": "Objects", "img": "", "pyramid": ""  },
      { "name": "Dimensions", "img": "", "pyramid": ""  },
      { "name": "Facts", "img": "", "pyramid": ""  },
      { "name": "Notes", "img": "", "pyramid": ""  }
    ];
    var linkDataArray = [
      { "from":  "Dashboard", "to": "Sheets" },
      { "from":  "Dashboard", "to": "Notes" },
      { "from":  "Sheets", "to": "Objects" },
      { "from":  "Sheets", "to": "Notes" },
      { "from":  "Objects", "to": "Dimensions" },
      { "from":  "Objects", "to": "Facts" },
      { "from":  "Objects", "to": "Notes" }
    ];
    
    myDiagram.layout = new go.LayeredDigraphLayout();

    var model = $(go.GraphLinksModel,
      {
        nodeKeyProperty: "name",
        nodeDataArray: nodeDataArray,
        linkDataArray: linkDataArray
      });
    myDiagram.model = model;

    function LocationImage(vimg) {
      if (vimg === "oracle") return "oracle.jpg";
      if (vimg === "teradata") return "teradata.jpg";
      if (vimg === "file server") return "file server.jpg";
      if (vimg === "qlikview server") return "qlikview server.jpg";
      return "";
    }

    function pyramidLevel(levelColor) {
      if (levelColor === "1") return "ST.png";
      if (levelColor === "2") return "DT.png";
      if (levelColor === "3") return "AI.png";
      if (levelColor === "4") return "ET.png";
      if (levelColor === "5") return "TS.png";
      if (levelColor === "6") return "AG.png";
      if (levelColor === "7") return "FS.png";
      return "";
    }
  }

Even without the appropriate image files, the resulting diagram is understandable. But I don’t understand what you want to do that is in opposition to the relationships (the link data) that the model holds.

5

Thanks Walter
My goal is to build a network chart, each node should have n:n relationships.
One last thing, When i open the chart, I don’t want to see the whole Organization structure. I want to see the major departments listed on to the left and upon drag and drop a particular department node, I want to see the whole under that node.