Google Charts OrgChart с MySQL - PullRequest
       9

Google Charts OrgChart с MySQL

0 голосов
/ 25 августа 2018

Я нашел несколько похожих статей об использовании MySQL и Google Charts, в частности, orgchart, но я просто не получаю его.

Я создал стандартную страницу, и она выглядит хорошо, но она очень ручная.Мне нужно заполнить data.addRows из базы данных MySQL.

Вот страница с ручным кодированием, которая выглядит хорошо:

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

Есть ли способ заменить data.addRows кодовым блоком для MySQL?

Вот MySQL, который я написал, который приближает меня, но некажется, выстраиваются в линию прямо для раздела data.addRows.

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
    )

Наконец, вот вывод MySQL выше.Как получить это в 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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...