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});
}
Ajouter multiple input dynamique

Ajouter multiple input dynamique

Background div gradient

Background div gradient

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Form login b4 01

Form login b4 01

Image hover 02

Image hover 02

Input range slider HTML style05

Input range slider HTML style05

Page 404 exemple 01

Page 404 exemple 01

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Tablet style code texte

Tablet style code texte

bootstrap4 tabs

bootstrap4 tabs