Organization Chart

<!DOCTYPE html>
<html>
<head>
	<title>Organization Chart | Par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Organization Chart">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<meta name="robots" content="index,follow">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" type="text/css">
</head>
<body class="container">
<div class="row">	
	<div class="col-lg-12 mt-5">
		<div id="chart_div"></div>
	</div>	
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

                                    
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);

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

  // For each orgchart box, provide the name, manager, and tooltip to show.
  data.addRows([
    [{v:'SAID', f:'SAID<div style="color:red; font-style:italic">President</div>'},
     '', 'The President'],
    [{v:'ANAS', f:'ANAS<div style="color:red; font-style:italic">Vice President</div>'},
     'SAID', 'VP'],
    ['ADIL', 'SAID', ''],
    ['BADR', 'ANAS', 'BADR Sponge'],
    ['FOUAD', 'BADR', '']
  ]);

  // Create the chart.
  var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
  // Draw the chart, setting the allowHtml option to true for the tooltips.
  chart.draw(data, {allowHtml:true});
}
Table responsive avec css native

Table responsive avec css native

Simple Table With UIKIT

Simple Table With UIKIT

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Menu aside style01 slide out

Menu aside style01 slide out

Image hover effects style

Image hover effects style

Image hover 02

Image hover 02

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Compteur avec b4

Compteur avec b4

Carousel Bootstrap4

Carousel Bootstrap4

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Bloc resizable with jquery

Bloc resizable with jquery