Создание блок-схем/диаграмм с php/mysql/js

Question

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

Нечто подобное http://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example2.html

, но я хочу "ценности", чтобы быть таблицы, с 4 coluns и 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/ , но я хотел быть динамичным, как и в первом примере, и я хочу диаграмму растет на стороне, потому что будет довольно большой график.

im Использование php, mysql и javascript.

Answer 1

В коммерческом сценарии вы можете взглянуть на yFiles for HTML. Это диаграмм библиотека Javascript/HTML5, которые могут делать то, что вы ищете:

Насколько я понимаю ваши требования, сочетание этих двух демо должны быть в значительной степени именно то, что вы ищете:

data table node style демо показывает, как создать визуализацию таблицы данных, а collapsible tree demo отображает запрошенную функцию анимации развернуть/свернуть. В этой демонстрации все данные хранятся в памяти, но также могут быть динамически отображены с сервера по мере необходимости. Демоверсия GWT, которая также является частью пакета, показывает этот конкретный аспект, например.

^{Отказ: Я работаю в компании, которая создает вышеупомянутую библиотеку. Тем не менее, я не представляю своего работодателя. Мои сообщения и комментарии - мои собственные.}