<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/css/jquery.orgchart.min.css" rel="stylesheet"/>
</head>
<body>
<ul id="ul-data">
  <li class="mno"><a href="#">Mobile Network Operators</a>
    <ul>
      <li><a href="#">USSD Server</a>
        <ul>
          <li><a href="#">Apps Server</a></li>
        </ul>
      </li>
      <li><a href="#">Billing Server</a>
        <ul>
          <li><a href="#">Apps Server</a></li>
          <li><a href="#">SMSC Server</a></li>
        </ul>
      </li>
      <li><a href="#">IVR Server</a>
        <ul>
          <li><a href="#">Apps Server</a></li>
        </ul>
      </li>
      <li><a href="#">SMSC Server</a>
        <ul>
          <li><a href="#">Reporting Server</a></li>
          <li><a href="#">Bulk Tool</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<div id="chart-container"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/js/jquery.orgchart.min.js"></script>
<script type="text/javascript">
	$(function() {

  var oc = $('#chart-container').orgchart({
    'data' : $('#ul-data'),
    'toggleSiblingsResp': false,
    'visibleLevel': 999,
	'chartClass': '',
	'exportButton': true,
	'exportFilename': 'OrgChart',
	'exportFileextension': 'png',
	'parentNodeSymbol': 'fa-server',
	'draggable': false,
	'direction': 't2b',
	'pan': false,
	'zoom': false,
	'zoominLimit': 7,
	'zoomoutLimit': 0.5,
	'allowEdit' : false,
	'onClickNode' : function(){
		console.log('foo bar');
	}
  });

});

</script>
</body>
</html>


