0

I'm building an organizational hierarchy chart using Google charts API.

I'm able to render a structured tree-like chart by pulling in some data from my database, but I also want to display some metadata when a user hovers over a particular row.

For instance, when a user hovers over an employees name, I want to display like the city the employee is currently employed in.

Console output after making adjustments

How could I go about this? Here is the code I have so far:

$table = array();
$table['cols'] = array(
array('label' => 'Name', 'type' => 'string'),
array('label' => 'Manager', 'type' => 'string'),
//array('role' => 'ToolTip', 'type' => 'string'),
);
$table['rows'] = array();

foreach ($employeeStruct as $row) {
$temp = array();
$temp[] = array('v' => $row['first_name']);
$temp[] = array('v' => $row['managers_first_name']);
$temp[] = array('v' => $row['work_city']);
$table['rows'][] = array('c' => $temp);
}
$jsonTable = json_encode($table);


<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- 
  fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Structured Organization</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<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(<?php echo $jsonTable; 
?>);
          data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': 
 true}});

          var options = {
              tooltip: {isHtml: true},
              legend: 'none',
              allowHtml: true,
              allowCollapse: true,
          };
          // Create and draw the visualization.
        var chart =  new 
    google.visualization.OrgChart(document.getElementById('chart_div'));
          chart.draw(data, options);
   }
   </script>

 </head>
 <body>
    <div id="chart_div"></div>
  </body>
  </html>
Kitkat33
  • 11
  • 1
  • take a look at this: https://stackoverflow.com/questions/8437979/add-custom-text-to-google-visualization-tooltip – Akber Iqbal Nov 01 '18 at 05:09
  • Welcome to Stack Overflow! Other users marked your question for low quality and need for improvement. I re-worded/formatted your input to make it easier to read/understand. Please review my changes to ensure they reflect your intentions. But I think your question is still not answerable. **You** should [edit] your question now, to add missing details (see [mcve] ). Feel free to drop me a comment in case you have further questions or feedback for me. – GhostCat Nov 01 '18 at 08:57

1 Answers1

0

looks like you were on the right track, un-comment the following line in php. 

array('role' => 'tooltip', 'type' => 'string'),

just make sure the role is all lowercase --> 'tooltip'

you can remove the addColumn line in javascript. 

data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

recommend also removing the tooltip option. 

tooltip: {isHtml: true},

unless $row['work_city'] contains html content, not just a city name.

WhiteHat
  • 59,912
  • 7
  • 51
  • 133