Org Chart display issue - lines fly away from nodes

zhuohanl commented 4 years ago

I am using google org chart (https://developers.google.com/chart/interactive/docs/gallery/orgchart) to convert my employee spreadsheet to organisation chart.

I have many nodes and lines. The chart displays well at the beginning but as I scroll to the right, lines and nodes are not displayed properly:

data.csv:

heading1,heading2,heading3,heading4,heading5,heading6
value1_1,value2_1,value3_1,value4_1,value5_1,value6_1
value1_2,value2_2,value3_2,value4_2,value5_2,value6_2

My code:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        $.get("data.csv", function(csv) {
          var csv_data = $.csv.toObjects(csv);

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

          csv_data.forEach(function(item){
            var value1 = item['heading1'].trim();
            var value2 = item['heading2'].trim();
            var value3 = item['heading3'].trim();
            var value4 = item['heading4'].trim();
            var value5 = item['heading5'].trim();
            var value6 = item['heading6'].trim();

            data.addRows([
              [{'v':value1, 'f':`${value1}<div style="color:blue; font-style:italic">${value2} ${value3}</div><div style="color:red; font-style:italic">${value4}</div><div style="color:green; font-style:italic">${value5}</div>`},
              value6, '']
              ]);
          })

          // 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>

One possible reason is that I have too many nodes and lines. Things are working good at the first beginning. But when I scroll to the right and have more nodes and lines, lines start flying away from nodes.

Any ideas?

hustontrevor commented 2 years ago

MAJOR BUG

I am also seeing this issue (in Chrome). The issue starts with the nodes being slightly too far right. Later nodes and node lines to the far right or near the bottom of the OrgChart visualization end up totally lost.

Removing the divs and span in the formatted value does not prevent the issue.

Reproduced here with junk data https://jsfiddle.net/su47cwj2/

dlaliberte commented 2 years ago

Thanks for reporting this problem, and especially for creating a jsfiddle to repro the problem. I'll check whether this still exists in the development version, which includes some layout changes that might avoid this problem.

hustontrevor commented 2 years ago

great, thank you!!