google orgchart + css

google orgchart

		<script type='text/javascript' src='https://www.google.com/jsapi'></script>
		<script type='text/javascript'>
		  google.load('visualization', '1', {packages:['orgchart']});
		  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:'SERVER', f:'<img src="server.png" /><a href="client?id=1">belfort<br />192.168.0.1</a>'}, ''],
		      [{v:'id1', f:'<img src="hardware.png" /><a href="client?id=1">belfdort<br />192.168.0.4</a>'},'SERVER'],
		      [{v:'id2', f:'<img src="hardware.png" /><a href="client?id=1">bedlfort<br />192.168.0.4</a>'},'SERVER'],
		      [{v:'id3', f:'<img src="hardware.png" /><a href="client?id=1">belfosrt<br />192.168.0.4</a>'},'SERVER'],
		    [{v:'id4', f:'<img src="hardware.png" /><a href="client?id=1">beflfort<br />192.168.0.4</a>'}, 'SERVER'],
			[{v:'id5', f:'<img src="hardware.png" /><a href="client?id=1">belfogrt<br />192.168.0.4</a>'},'SERVER'],
				[{v:'id6', f:'<img src="hardware.png" /><a href="client?id=1">bhgjelfort<br />192.168.0.4</a>'},'SERVER'],
[{v:'id7', f:'<img src="hardware.png" /><a href="client?id=1">belfort<br />192.16h8.0.4</a>'},'SERVER'],
[{v:'id8', f:'<img src="hardware.png" /><a href="client?id=1">belfort<br />192.1vh68.0.4</a>'},'SERVER'],
[{v:'id9', f:'<img src="hardware.png" /><a href="client?id=1">belfort<br />192.168.0bvb.4</a>'},'SERVER'],
[{v:'id10', f:'<img src="hardware.png" /><a href="client?id=1">belfort<br />192.168v.0.4</a>'},'SERVER'],
[{v:'id11', f:'<img src="hardware.png" /><a href="client?id=1">belfort<br />192.168.0bvd.4</a>'},'SERVER'],
[{v:'id12', f:'<img src="hardware.png" /><a href="client?id=1">belfort<br />192.168.0t.4</a>'},'SERVER']/*,
[{v:'aqz', f:'<img src="hardware.png" /><a href="client?id=1">belfort<br />192.168.0.4d</a>'},'SERVER'],
[{v:'bbdzrb', f:'<img src="hardware.png" /><a href="client?id=1">belfort<br />192.16drq8.0.4</a>'},'SERVER'],
				[{v:'qqd', f:'<img src="hardware.png" /><a href="client?id=1">belfort<br />sd192.168.0.4</a>'},'SERVER'],
				[{v:'cc', f:'<img src="hardware.png" /><a href="client?id=1">belfort<br />19dfs2.168.0.4</a>'}, 'SERVER']*/
		    ]);
		    var chart = new google.visualization.OrgChart(document.getElementById('map'));
		    chart.draw(data, {allowHtml:true, nodeClass:'maman'});
		  }
		</script>

<style>
.maman {
	color: green;
	width: 60px;
	border: 1px solid #fff;
	text-align: center;
}

.google-visualization-orgchart-lineleft {
	border-left: 2px solid #333!important;
}
.google-visualization-orgchart-linebottom {
	border-bottom: 2px solid #333!important;
}
.google-visualization-orgchart-lineright {
	border-right: 2px solid #333!important;
}
.maman img {
	clear: both;
	display: block;
	margin: auto;
}



</style>