CODEWITHSUNDEEP
javascriptjsongojs
Noob
Noob

Reputation: 13

GoJS showing incorrect diagram type

I need to generate a diagram that is able to display data from JSON which came from the server. I use GoJS to generate a diagram. So I used a sample from the site to build my own project. Everything looks perfect like I wanted.

myDiagram.model = new go.TreeModel([
    { key: "Root", wallet: "data", color: lavgrad },
    { key: "Left1", wallet: "data", parent: "Root", dir: "left", color: bluegrad },
    { key: "Left3", wallet: "data", parent: "Root", dir: "left", color: bluegrad },
    { key: "leaf1", wallet: "data", parent: "Left1" },
    { key: "leaf2", wallet: "data", parent: "Left1" },
    { key: "Left2", wallet: "data", parent: "Left1", color: bluegrad },
    { key: "leaf3", wallet: "data", parent: "Left2" },
    { key: "leaf4", wallet: "data", parent: "Left2" },
    { key: "Right1", wallet: "data", parent: "Root", dir: "right", color: yellowgrad },
    { key: "Right2", wallet: "data", parent: "Right1", color: yellowgrad },
    { key: "leaf5", wallet: "data", parent: "Right2" },
    { key: "leaf6", wallet: "data", parent: "Right2" },
    { key: "leaf7", wallet: "data", parent: "Right2" },
    { key: "leaf8", wallet: "data", parent: "Right1" },
    { key: "leaf9", wallet: "data", parent: "Right1" }
]);
doubleTreeLayout(myDiagram);

first picture

After this, I tried to remove the hardcoded diagram structure and parse it from JSON instead. Here is my code.

JSON file

{
  "data":[
    {
      "key": "Root",
      "wallet": "data"
    },
    {
      "key": "Left1",
      "wallet": "data",
      "parent": "Root",
      "dir": "left"
    },
    {
      "key": "Left3",
      "wallet": "data",
      "parent": "Root",
      "dir": "left"
    },
    {
      "key": "leaf1",
      "wallet": "data",
      "parent": "Left1"
    },
    {
      "key": "leaf2",
      "wallet": "data",
      "parent": "Left1"
    },
    {
      "key": "Left2",
      "wallet": "data",
      "parent": "Left1"
    },
    {
      "key": "leaf3",
      "wallet": "data",
      "parent": "Left2"
    },
    {
      "key": "leaf4",
      "wallet": "data",
      "parent": "Left2"
    },
    {
      "key": "Right1",
      "wallet": "data",
      "parent": "Root",
      "dir": "right"
    },
    {
      "key": "Right2",
      "wallet": "data",
      "parent": "Right1"
    },
    {
      "key": "leaf5",
      "wallet": "data",
      "parent": "Right2"
    },
    {
      "key": "leaf6",
      "wallet": "data",
      "parent": "Right2"
    },
    {
      "key": "leaf7",
      "wallet": "data",
      "parent": "Right2"
    },
    {
      "key": "leaf8",
      "wallet": "data",
      "parent": "Right1"
    },
    {
      "key": "leaf9",
      "wallet": "data",
      "parent": "Right1"
    }
  ]
}

JS file

jQuery.getJSON("minimal.json", load);
function load(jsondata) {
   myDiagram.model = new go.TreeModel(jsondata["data"]);
}

second picture

But As you can see the result doesn't look like in the first picture above(it's just placed in random order). That result goes without any error or warning messages in the console. So I cant figure out what I am doing wrong and why data displays in random order.

Upvotes: 1

Views: 135

Answers (1)

Walter Northwoods
Walter Northwoods

Reputation: 4106

What's missing is the layout of the diagram. I suggest that you use the newer Double Tree sample: https://gojs.net/latest/samples/doubleTree.html

Note how it uses the DoubleTreeLayout extension and sets Diagram.layout so that the layout happens automatically. https://gojs.net/latest/api/symbols/DoubleTreeLayout.html

This is different than the older code you started from, which has a doubleTreeLayout function that programmatically performed the layout.

$(go.Diagram, "myDiagramDiv",
  {
    layout: $(DoubleTreeLayout,
      {
        // choose whether this subtree is growing towards the right or towards the left:
        directionFunction: function(n) { return n.data && n.data.dir !== "left"; }
      })
  });

Alternatively, you can call doubleTreeLayout() after you have loaded the model. However, you would also need to do that each time the user expanded or collapsed a subtree. Whereas by setting Diagram.layout the layout would automatically be performed again as nodes and links appear or disappear.

Upvotes: 1

Related Questions