javascript — создание блок-схем / диаграмм с помощью php / mysql / js

Я строю сайт, и мне нужно построить блок-схему / диаграмму с данными, которые я получу из базы данных MySQL, поэтому я получаю данные и хочу поместить их в блок-схему.

Что-то вроде этого
http://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example2.html

но я хочу, чтобы «значения» были таблицами, с 4 столбцами и 2 строками;

как это, где значения будут получены из моей базы данных MySQL.

что-то вроде этого

    google.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');

data.addRows([
[{v:'OMT', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMT</td><td>02:05:13</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>50</td><td>52</td><td>54</td></tr></table>'}, '', ''],
[{v:'OMTC', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMTC</td><td>00:35:12</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>20</td><td>22</td><td>24</td></tr></table>'}, 'OMT', 'OMTC'],
[{v:'OMTJ', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMTJ</td><td>00:00:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>00</td><td>00</td><td>00</td></tr></table>'}, 'OMT', 'OMTJ'],
[{v:'OMTR', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMTR</td><td>01:05:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>22</td><td>24</td><td>26</td></tr></table>'}, 'OMT', 'OMTR'],
[{v:'OMTS', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMTS</td><td>00:25:01</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>04</td><td>06</td><td>08</td></tr></table>'}, 'OMT', 'OMTS'],
[{v: 'NMTF6-01' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">NMTF6-01</td><td>00:35:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>06</td><td>08</td><td>10</td></tr></table>'}, 'OMTR', ''],
[{v: 'BPCL6-03' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">BPCL6-03</td><td>00:22:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>02</td><td>04</td><td>06</td></tr></table>'}, 'OMTR', ''],
[{v: 'BPCL6-02' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">BPCL6-02</td><td>00:08:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>10</td><td>12</td><td>14</td></tr></table>'}, 'OMTR', ''],
[{v: 'CXAT6-04' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">CXAT6-04</td><td>00:10:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>04</td><td>06</td><td>08</td></tr></table>'}, 'OMTC', ''],
[{v: 'CXAT6-03' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">CXAT6-03</td><td>00:13:02</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>12</td><td>14</td><td>16</td></tr></table>'}, 'OMTC', ''],
[{v: 'CXAT6-02' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">CXAT6-02</td><td>00:12:10</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>00</td><td>02</td><td>04</td></tr></table>'}, 'OMTC', ''],
[{v: 'SPAT6-02' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">SPAT6-02</td><td>00:25:01</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>04</td><td>06</td><td>08</td></tr></table>'}, 'OMTS', ''],

]);

var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml:true});
}

http://jsfiddle.net/a4tzhtos/16/
но я хотел быть динамичным, как в первом примере, и я хочу, чтобы график рос в сторону, потому что это будет довольно большой график.

Я использую php, mysql и javascript.