CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4gojs
sps
sps

Reputation: 105

Responsive Organization Chart Layout using GoJS

I'm working on creating a responsive organization chart using GoJS, and I've encountered a few challenges that I'm struggling to address. Currently, my chart is displaying well, but there are a few corrections and improvements I'd like to make:

Vertical Text in Larger Screen: I have EMP1 to EMP9 text boxes, and I'd like them to be displayed vertically in larger screens, but horizontally in smaller screens.

Straight and Clear Links: I want the links between nodes to follow a straight and clear path, creating a more hierarchical and organized structure.

Responsive Display: On smaller screens, I'd like the chart to display as shown in the attached image enter image description here,enter image description here ensuring that it's both responsive and visually appealing.

I've tried a couple of approaches based on online resources and suggestions, but I'm still facing issues in achieving these specific requirements. Could anyone provide guidance on how to implement these features in my GoJS organization chart? Any insights, code snippets, or pointers to relevant documentation would be greatly appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hierarchical Organization Chart</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/release/go.js"></script>
</head>
<body>

<div id="myDiagramDiv" style="width:100%; height:600px;"></div>

<script>
  const $ = go.GraphObject.make;
  
  // Create a new diagram
  const myDiagram =
    $(go.Diagram, "myDiagramDiv",
      {
        initialContentAlignment: go.Spot.Center,
        layout: $(go.LayeredDigraphLayout, { direction: 90 }) // Default horizontal layout
      });
    

  // Define the node template
  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Rectangle", { fill: "white" }),
      $(go.TextBlock, { margin: 4 }, new go.Binding("key", "text"))
    );

    
    // Define the link template
    myDiagram.linkTemplate =
      $(go.Link,    
       { routing: go.Link.None },   
        $(go.Shape, { stroke: "black", strokeWidth: 1
           })
      );

  // Set the model data for the chart
  myDiagram.model = new go.TreeModel([
    { key: "CEO", parent: "", text: "CEO" },
    { key: "DIRECTOR", parent: "CEO", text: "DIRECTOR" },
    { key: "MANAGER1", parent: "DIRECTOR", text: "MANAGER1" },
    { key: "MANAGER2", parent: "DIRECTOR", text: "MANAGER2" },
    { key: "MANAGER3", parent: "DIRECTOR", text: "MANAGER3" },
    { key: "EMP1", parent: "MANAGER1", text: "EMP1" },
    { key: "EMP2", parent: "MANAGER1", text: "EMP2" },
    { key: "EMP3", parent: "MANAGER1", text: "EMP3" },
    { key: "EMP4", parent: "MANAGER2", text: "EMP4" },
    { key: "EMP5", parent: "MANAGER2", text: "EMP5" },
    { key: "EMP6", parent: "MANAGER2", text: "EMP6" },
    { key: "EMP7", parent: "MANAGER3", text: "EMP7" },
    { key: "EMP8", parent: "MANAGER3", text: "EMP8" },
    { key: "EMP9", parent: "MANAGER3", text: "EMP9" }
  ]);

  // Update layout direction based on screen size
  function updateLayout() {
    if (window.innerWidth <= 768) {
      myDiagram.layout.direction = 0; // Vertical layout
    } else {
      myDiagram.layout.direction = 90; // Horizontal layout
    }
    myDiagram.layoutDiagram(true);
  }

  // Call the function initially and on window resize
  updateLayout();
  window.addEventListener('resize', updateLayout);
</script>
</body>
</html>

strong text

Upvotes: 1

Views: 321

Answers (0)

Related Questions