Org Chart Example

An example of a Google Org Chart.

by Dwza

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['orgchart']}]}"></script>
       <div id="chart_div"></div>

JavaScript

google.setOnLoadCallback(drawChart);
function ci(e){
    return '<div style="color:red; font-style:italic">'+e+'</div>';  
}
function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('string', 'ToolTip');
    
    data.addRows([
        //[{v:'ID', f:'LABEL'}, 'PARENT', 'TOOLTIP'],
        [{v:'home', f:'TPL'}, '', 'TPL-Struktur'],
        [{v:'module', f:ci('module')}, 'home', ''],
        [{v:'admin', f:'admin'}, 'module', ''],
        ['chat', 'module', ''],
        ['company', 'module', ''],
        ['mailer', 'module', ''],
        ['order', 'module', ''],
        ['tellocator', 'module', ''],
        ['dialogs', 'admin', ''],
        ['files', 'admin', ''],
        ['admin.tpl', 'files', ''],
        ['company.tpl', 'admin.tpl', ''],
        ['config.tpl', 'company.tpl', ''],
        ['delete.tpl', 'config.tpl', ''],
        ['errorreport.tpl', 'delete.tpl', ''],
        ['export.tpl', 'errorreport.tpl', ''],
        ['import.tpl', 'export.tpl', ''],
        ['main.tpl', 'import.tpl', ''],
        ['orderarchiv.tpl', 'main.tpl', ''],
        ['overview.tpl', 'orderarchiv.tpl', ''],
        ['register.tpl', 'overview.tpl', ''],
        ['settings.tpl', 'register.tpl', ''],
        ['status.tpl', 'settings.tpl', ''],
        
    ]);
        
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
        }