Display Google Organizational Chart details in Modal Popup on mouseover in ASP.Net

mahesh213
 
on Aug 18, 2020 02:27 AM
Sample_475026.zip
2038 Views

Hi,

I am going to implement google hierarchy chart 

Currently in this my requirement is that 

1) i need to display how many persons comes under that particular parent id in chart

2) if i put mouse over on particular person display those person details on popup

Could you please help me

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['orgchart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            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:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
               [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
               ['Alice', 'Robert', ''],
               ['Bob', 'Jim', 'Bob Sponge'],
               ['Carol', 'Bob', '']
            ]);			

            // Set chart options
            var options = {allowHtml:true};
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.OrgChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Aug 20, 2020 01:58 AM
on Aug 20, 2020 01:59 AM

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Refer below to get the child and sub child.

https://stackoverflow.com/questions/27248151/google-visualization-organizational-chart-node-children

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto">
    </div>
    <div id="dialog" style="display: none">
    </div>
    <script type="text/javascript">
        google.charts.load('current', { packages: ['orgchart'] });
        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');
            data.addRows([
                [{ v: 'Robert', f: 'Robert<div style="color:red; font-style:italic">President</div>' }, '', 'President'],
                [{ v: 'Jim', f: 'Jim<div style="color:red; font-style:italic">Vice President</div>' }, 'Robert', 'Vice President'],
                ['Alice', 'Robert', ''],
                ['Bob', 'Jim', 'Bob Sponge'],
                ['Carol', 'Bob', '']
            ]);
            var options = { allowHtml: true };
            var chart = new google.visualization.OrgChart(document.getElementById('container'));
            google.visualization.events.addListener(chart, 'onmouseover', function (e) {
                var row = e.row;
                var dataTable = data;
                if (row != null) {
                    var content = '<div><h1>' + dataTable.getValue(row, 0) + '</h1><div>' + dataTable.getValue(row, 1) + '</div></div>';
                    $("#dialog").dialog({
                        autoOpen: false,
                        modal: true,
                        title: "View Details"
                    });
                    $('#dialog').html(content);
                    $('#dialog').dialog('open');
                }
            });
            chart.draw(data, options);
        }
        google.charts.setOnLoadCallback(drawChart);
    </script>
</body>
</html>

Demo