Question 233274 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Google Charts – Organization Chart – Advanced Hierarchy Placement

Is it possible to to have more control on hierarchy of the Organization Chart on Google Charts?

Illustration:

on website developers.google.com for the below example:
before

can Alice be placed vertically down to Bob’s side (level) as below:
after

Here is the example code

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        data.addRows([
          [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowHtml':true});
      }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>
Tags:

2

Answers


  1. 0

    It looks like Google Charts’ Organization Chart does not provide an API to manually control the exact placement of individual nodes within the hierarchy. The layout and placement are handled automatically based on the defined relationships.

    You can control the style and content within each node, but the specific requirement to place Alice vertically down to Bob’s side while being a direct report of Mike cannot be directly implemented using the standard OrgChart options. If such control over placement is crucial, you may need to look for a third-party library that offers more flexibility or consider implementing a custom solution.

    Login or Signup to reply.
  2. 0

    Here’s a hack to do it. Create a node where you basically hide everything except for the left border and position it so it lines up with the rest of the chart’s lines.

    The unique node IDs should begin with "__hideme", so that these can be detected and hidden, except for the left border.

    So instead of this node,

              ['Alice', 'Mike', ''],

    Create a hidden node and place it between Mike and Alice, like this:

              ['__hideme1', 'Mike', ''],
          ['Alice', '__hideme1', ''],

    This is the entire code:

    <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        const rows = [
          [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['__hideme1', 'Mike', ''],
          ['Alice', '__hideme1', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ];
        data.addRows(rows);


        rows.forEach((value, index) => {
          if ((typeof value[0] === "string") && 
               value[0].startsWith("__hideme")) {
            // display all nodes that have an id that begins with "__hideme"
            // as a line
            data.setRowProperty(index, 'style', 'color: transparent; background: transparent; border: 0; border-left: 0.8px solid #3388dd; border-radius: 0; box-shadow: 0 0; position:relative; left: 41px; ');
          }
        });


        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowHtml':true });
      }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search