Need to Get Images in a working Org chart having data from google sheets.

18 views
Skip to first unread message

DJW

unread,
Oct 22, 2021, 9:12:46 AM10/22/21
to Google Visualization API

Request your help in a project.

We have used Google Org chart to create an hierarchy. Which is working absolutely fine.

The database is Google Sheets: Link: https://docs.google.com/spreadsheets/d/1Vv6BMuiEnTj3RX05p4o2_ndd8n5-OjJqIAkMpSz2R1s/edit#gid=0


The following code used to get the results and is working aboslutely fine.

https://jsfiddle.net/DJainWiki/45pg823u/3/

Now we need to get images from the google sheets Image column and display at the corresponding Name

Can anyone please help us.

There is another thread which has answered this but the code is not working for us.

Reference. https://groups.google.com/g/google-visualization-api/c/HOtrAsLgWDs

Code for Reference

<html>
<head>
</head>
<body>
  <div id="orgchart_admin"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages' : ['orgchart', 'table']});
    google.charts.setOnLoadCallback(function() { initialize('') });

    function initialize() {
      document.getElementById('orgchart_admin').innerHTML = "<i class='fa fa-spinner fa-spin fa-3x fa-fw'></i>";
      
      var dataSourceUrl = 'https://docs.google.com/spreadsheets/d/1Vv6BMuiEnTj3RX05p4o2_ndd8n5-OjJqIAkMpSz2R1s/edit?usp=sharing';

      // Tells it that the first row contains headers: 'Role', 'Reports To', 'Name'
      var query = new google.visualization.Query(dataSourceUrl + '&headers=1');

      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      // Called when the query response is returned.
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var raw_data = response.getDataTable();
      var data = new google.visualization.DataTable();

      data.addColumn('string', 'Entity');
      data.addColumn('string', 'ParentEntity');
      data.addColumn('string', 'ToolTip');

      // Loops through all rows and populates a new DataTable with formatted values for the orgchart
      var num_rows = raw_data.getNumberOfRows();
      for (var i = 0; i < num_rows; i++) {
        var role = raw_data.getValue(i, 0);
        var reportsTo = raw_data.getValue(i,1);
        var name = raw_data.getValue(i,2) != null ? raw_data.getValue(i,2) : '';

        data.addRows([[
          { v: role,
            f: name + "<div class='role'>" + role + "</div>"
          },
          reportsTo,
          name]]);
      }

      // Loops through all rows and populates a new DataTable with formatted values for the orgchart
      var container = document.getElementById('orgchart_admin');
      var chart = new google.visualization.OrgChart(container);
      chart.draw(data, {allowHtml:true, 'size': 'large'});
      
    }      
  </script>
</body>
</html>






Reply all
Reply to author
Forward
0 new messages