谷歌图表OrgChart与MySQL

I have found some similar articles regarding using MySQL and Google Charts, specifically orgchart, but I am just not getting it.

I have built the standard page and it looks good but it is very manual. I need to have the "data.addRows" populated from a MySQL db.

Here is the manually coded page that looks good:

<html>
<head></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:'A W', f:'A W<div>R D</div>'},'',''],
        [{v:'B P', f:'B P<div>Admin</div></a>'},'A W',''],
        [{v:'S A', f:'S A<div>Admin</div>'},'A W',''],
        [{v:'E C', f:'E C<div>Admin</div>'},'A W',''],
        [{v:'I E', f:'I E<div>Director</div>'},'A W',''],
        [{v:'J W', f:'J W<div>Director</div>'},'A W',''],
        [{v:'A G', f:'A G<div>Director</div>'},'A W',''],
        [{v:'J B', f:'J B<div>Director</div>'},'A W',''],
        [{v:'M B', f:'M B<div>Training Manager</div>'},'A W',''],
        [{v:'C D', f:'C D<div>Assistant Training Director</div>'},'A W',''],
        [{v:'J M', f:'J M<div>Director</div>'},'A W',''],
        [{v:'A R', f:'A R<div>Manager</div>'},'I E',''],
        [{v:'R P', f:'R P<div>Manager</div>'},'I E',''],
        [{v:'K T', f:'K T<div>Assistant Director</div>'},'A G',''],
        [{v:'J M', f:'J M<div>Assistant Director</div>'},'A G',''],
        [{v:'A G', f:'A G<div></div>'},'B P',''],
        [{v:'E C', f:'E C<div></div>'},'J M','']
    ]);

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

<body>

<div id="chart_div"></div>

</body>
</html>

Is there a way to replace the data.addRows with a codeblock for MySQL?

Here is the MySQL that I wrote that gets me close but doesn't seem to line up right for the data.addRows section.

MySQL

SELECT
    CONCAT('[{v:''', t1.firstname, ' ', t1.lastname,''', f:''', t1.firstname, ' ', t1.lastname,'<div>',t1.member_type,'</div>''},'''',''''],') AS php1,
    CONCAT('[{v:''', t2.firstname, ' ', t2.lastname,''', f:''', t2.firstname, ' ', t2.lastname,'<div>',t2.member_type,'</div>''},''',CONCAT(t1.firstname, ' ', t1.lastname),''',''''],') AS php2,
    CONCAT('[{v:''', t3.firstname, ' ', t3.lastname,''', f:''', t3.firstname, ' ', t3.lastname,'<div>',t3.member_type,'</div>''},''',CONCAT(t2.firstname, ' ', t2.lastname),''',''''],') AS php3,
    CONCAT('[{v:''', t4.firstname, ' ', t4.lastname,''', f:''', t4.firstname, ' ', t4.lastname,'<div>',t4.member_type,'</div>''},''',CONCAT(t3.firstname, ' ', t3.lastname),''',''''],') AS php4
FROM members_tbl AS t1
    LEFT JOIN members_tbl AS t2 ON t2.emp_mgr = t1.member_id
    LEFT JOIN members_tbl AS t3 ON t3.emp_mgr = t2.member_id
    LEFT JOIN members_tbl AS t4 ON t4.emp_mgr = t3.member_id
WHERE
    t1.member_id = '8' AND
    (
    t1.member_id <> '2' AND
    t1.member_id <> '18' -- AND
    )

Finally, here is the output of the MySQL above. How to get this into the data.addRows?

'[{v:\'A W\', f:\'A W<div>Regional Director</div>\'},\'\',\'\'],', '[{v:\'E C\', f:\'E C<div>Admin</div>\'},\'A W\',\'\'],', NULL, NULL
'[{v:\'A W\', f:\'A W<div>Regional Director</div>\'},\'\',\'\'],', '[{v:\'I E\', f:\'I E<div>Director</div>\'},\'A W\',\'\'],', '[{v:\'A R\', f:\'A R<div>Manager</div>\'},\'I E\',\'\'],', NULL
'[{v:\'A W\', f:\'A W<div>Regional Director</div>\'},\'\',\'\'],', '[{v:\'I E\', f:\'I E<div>Director</div>\'},\'A W\',\'\'],', '[{v:\'R P\', f:\'R P<div>Manager</div>\'},\'I E\',\'\'],', NULL
'[{v:\'A W\', f:\'A W<div>Regional Director</div>\'},\'\',\'\'],', '[{v:\'J W\', f:\'J W<div>Director</div>\'},\'A W\',\'\'],', NULL, NULL
'[{v:\'A W\', f:\'A W<div>Regional Director</div>\'},\'\',\'\'],', '[{v:\'J W\', f:\'J W<div>Director</div>\'},\'A W\',\'\'],', NULL, NULL
'[{v:\'A W\', f:\'A W<div>Regional Director</div>\'},\'\',\'\'],', '[{v:\'A G\', f:\'A G<div>Director</div>\'},\'A W\',\'\'],', '[{v:\'K T\', f:\'K T<div>Assistant Director</div>\'},\'A G\',\'\'],', NULL
'[{v:\'A W\', f:\'A W<div>Regional Director</div>\'},\'\',\'\'],', '[{v:\'A G\', f:\'A G<div>Director</div>\'},\'A W\',\'\'],', '[{v:\'J M\', f:\'J M<div>Assistant Director</div>\'},\'A G\',\'\'],', '[{v:\'E C\', f:\'E C<div></div>\'},\'J M\',\'\'],'
'[{v:\'A W\', f:\'A W<div>Regional Director</div>\'},\'\',\'\'],', '[{v:\'J B\', f:\'J B<div>Director</div>\'},\'A W\',\'\'],', NULL, NULL
'[{v:\'A W\', f:\'A W<div>Regional Director</div>\'},\'\',\'\'],', '[{v:\'B P\', f:\'B P<div>Admin</div>\'},\'A W\',\'\'],', '[{v:\'    \', f:\'Q R<div></div>\'},\'B P\',\'\'],', NULL
'[{v:\'A W\', f:\'A W<div>Regional Director</div>\'},\'\',\'\'],', '[{v:\'B P\', f:\'B P<div>Admin</div>\'},\'A W\',\'\'],', '[{v:\'A G\', f:\'A G<div></div>\'},\'B P\',\'\'],', NULL
'[{v:\'A W\', f:\'A W<div>Regional Director</div>\'},\'\',\'\'],', '[{v:\'M B  \', f:\'M B  <div>Training Manager</div>\'},\'A W\',\'\'],', NULL, NULL
'[{v:\'A W\', f:\'A W<div>Regional Director</div>\'},\'\',\'\'],', '[{v:\'C D\', f:\'C D<div>Assistant Training Director</div>\'},\'A W\',\'\'],', NULL, NULL
'[{v:\'A W\', f:\'A W<div>Regional Director</div>\'},\'\',\'\'],', '[{v:\'S A\', f:\'S A<div>Admin</div>\'},\'A W\',\'\'],', NULL, NULL
'[{v:\'A W\', f:\'A W<div>Regional Director</div>\'},\'\',\'\'],', '[{v:\'J M\', f:\'J M<div>Director</div>\'},\'A W\',\'\'],', NULL, NULL

</div>