Fishbone Layout in a group and sub group

GoJS
1

How can I draw this kind of fishbone layout?
is it possible to draw the group layout as a fishbone? and also fishbone contains a subgroup

fishbone_layout
fishbone_layout953Ă—468 21.2 KB

2

Here’s an adaptation of the Fishbone sample, Fishbone Layout, that has been extended to support Groups:

As always, the complete source code is inline in that page.

Note that I had to change the model from a TreeModel to a GraphLinksModel in order to support Groups. You will see that the data structure used to create the model has been augmented to include a separate Object with "isGroup": true and a "members" property.

That sample also shows that groups within groups are also possible.

1 Like
3

Thanks a lot, Walter. It helps me.
What will be the code, if I will show the top one(Incorrect Deliveries) in a group template like Procedures?

4

I haven’t tried that. Try it yourself.

5

Hi, Would you please help me to solve this issue?

6

What model data did you try?

7

var json =
{
“isGroup”: true,category:“Parallel”,“group”:“1”,“key”:“2”,“text”: “Process”, “size”: 18, “weight”: “Bold”, “causes”: [

{ "isGroup": true, category:"Fishbone",
  "members": [
    {
      "text": "Procedures", "size": 14, "weight": "Bold", "causes": [
        {
          "text": "manual", "weight": "Bold", "causes": [
            { "text": "consistency" }
          ]
        },
        { "isGroup": true,category:"Parallel",key: "7","text": "Omega","loc":"213.3333282470703 19.333328247070312", "causes": [ 
      
       
      ]
    }
 ]
},

]

}
]
};

And added this to the for the node array
var nodeDataArray = [
{ key: “Beta”, text: “Beta”,group: “7”,category:“Another” ,“loc”:“12.12 30.58” },
{ key: “Gamma”, text: “Gamma”, group: “7” ,category:“Another”, “loc”:“30.91 50.89”} ];
var linkDataArray = [];

Untitled
Untitled898Ă—578 10.3 KB

8

Every data object that has isGroup: true also has to have a members property whose value is an array of node data objects.

9

If I added this its not showing other of the content
var json =
{
“isGroup”: true, category:“Parallel”,“text”: “Process”, “members”: [

{ "isGroup": true, category:"Fishbone",
  "members": [
    {
      "text": "Procedures", "size": 14, "weight": "Bold", "causes": [
        {
          "text": "manual", "weight": "Bold", "causes": [
            { "text": "consistency" }
          ]
        },
        { "isGroup": true,category:"Parallel",key: "7","text": "Omega", "causes": [ 
        
      ]
    }
 ]
},

] }
]
};

fishbone
fishbone724Ă—296 2.08 KB

10

Ah, the walkJson function wasn’t designed to handle a group containing everything. But that’s easy to fix:

var json =
    {
      "text": "Process", "size": 16, "weight": "bold", "causes": [
        {
          "text": "Procedures", "size": 14, "weight": "Bold", "causes": [
            {
              "text": "manual", "weight": "Bold", "causes": [
                { "text": "consistency" }
              ]
            },
            { "text": "Omega", "causes": [ ] }
          ]
        }
      ]
    };


// build the tree model
var nodeDataArray = [{ isGroup: true, key: 0 }];
var linkDataArray = [];
walkJson(json, nodeDataArray, linkDataArray, 0);
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

image

1 Like
11

Thanks a lot. It Works fine.