<?php include("includes/head.php");?>

<link rel="stylesheet" href="scripts/amcharts4/charts.css" />
<script src="scripts/amcharts4/core.js"></script>
<script src="scripts/amcharts4/charts.js"></script>
<script src="scripts/amcharts4/themes/animated.js"></script>
<script src="scripts/amcharts4/plugins/forceDirected.js"></script>
<!--<script src="index.js"></script>-->
   
<body>
<!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
<!-- Header top area start-->
<?php include("includes/header.php");?>
<!-- Header top area end-->
<!-- Menu area start-->
<?php include("includes/navigation.php");?>
<!-- Menu area end-->
<!-- Data table area Start-->
<div class="admin-dashone-data-table-area mg-b-40" style="min-height:500px;">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="width:110% !important;">
            <div class="tab-content view-mail-ov-mg-t-30">
              <div class="tab-pane fade in zoomInDown shadow-reset active">
                <div class="sparkline8-list shadow-reset">
                  <div class="sparkline8-hd">
                    <div class="main-sparkline8-hd">
                      <h1>Stakeholders</h1>
                      <div class="sparkline8-outline-icon"> <a href="dashboard.php">
                        <button class="btn btn-sm btn-danger login-submit-cs" type="button">Back to Dashboard</button>
                        </a>&nbsp; </div>
                    </div>
                  </div>
                  <div class="sparkline8-graph" style="height:1030px !important; margin-bottom:208px;">
                    <div class="container bootstrap snippet">
                      <div class="row">
                        <div id="chartdiv"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<!-- Data table area End-->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content">
      <!--<div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>-->
      <div class="modal-body"> </div>
      <div class="modal-footer">
        <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
      </div>
    </div>
  </div>
</div>
<!-- Footer Start-->
<?php include("includes/footer.php");?>
<!-- Footer End-->

<script>
    am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
var networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())

chart.data = [
  {
    name: "Rehab Initiaive",	
	x: am4core.percent(50),
    y: am4core.percent(50),
	//color: "red",
	//url: "https://www.google.com",
	//size:"100%",
    fixed: true,	
    children: [
      {
        name: "Govt Regulators",
		//url: "https://www.google.com",
		//color:"green",
		//size:400,
        children: [
		  { name: "SECP",title:"Securities and Exchange Comission of Pakistan", value: 800,url: "",id:"1122"},//color:"pink"
          { name: "FBR", title:"FBR", value: 800 },
		  { name: "Ias",title:"Ias", value: 800 },
		  { name: "PC",title:"PC", value: 800 },
		  { name: "PCP",title:"PCP", value: 800 },
		  { name: "EAD",title:"EAD", value: 800 },
		  { name: "PPRA",title:"PPRA", value: 800 }
		],
		configLink: {
			fill: "pink",
			stroke: "red",
			strokeWidth: 2
		}
      },
	  {
        name: "GSSDPO",
        children: [
		  { name: "MoH",title:"", value: 800 },
          { name: "NCSW",title:"", value: 800 },
		  { name: "MOHR",title:"", value: 800 },
		  { name: "PMNHP",title:"", value: 800 },
		  { name: "SLICP",title:"", value: 800 },

		  { name: "NCWDP",title:"", value: 800 },
		  { name: "National Disability Trust",title:"", value: 800 },
          { name: "NADRA",title:"", value: 800 },
		  { name: "BISP",title:"", value: 800 },
		  { name: "PPAF",title:"", value: 800 },
		  { name: "PBM",title:"", value: 800 },
		  { name: "PRCS",title:"", value: 800 },
		  { name: "AFIRM",title:"", value: 800 }
		]
      },
	  {
        name: "ICRC GVA",
        children: [
		  { name: "MoveAbility",title:"", value: 800 },
          { name: "ICRC PRP GVA",title:"", value: 800 },
		  { name: "ICRC FAD-AFI",title:"", value: 800 },
		  { name: "ICRC LOG GVA",title:"", value: 800 },
		  { name: "ICRC GVA Innovation",title:"", value: 800 }
		]
      },
	  {
        name: "ICRC PAK",
        children: [
		  { name: "ICRC Adm PAK",title:"", value: 800 },
          { name: "ICRC Adm PAK",title:"", value: 800 },
		  { name: "ICRC PRP PAK",title:"", value: 800 },
		  { name: "ICRC PAK",title:"", value: 800 },
		  { name: "ICRC LOG PAK",title:"", value: 800 }
		]
      },
	  {
        name: "PRP Partners",
        children: [
		  { name: "MPRC",title:"", value: 800 },
          { name: "Indus Hospital",title:"", value: 800 },
		  { name: "PIPOS",title:"", value: 800 },
		  { name: "PCP",title:"", value: 800 },
		  { name: "AKI",title:"", value: 800 },
          { name: "DUHS",title:"", value: 800 }
		]
      },
	  {
        name: "Donors & INGOs",
        children: [
		  { name: "DFID",title:"", value: 800 },
          { name: "UN",title:"", value: 800 },
		  { name: "GIZ",title:"", value: 800 },
		  { name: "KWF",title:"", value: 800 },
		  { name: "PNS",title:"", value: 800 },
		  { name: "HIP",title:"", value: 800 },
          { name: "IRP",title:"", value: 800 }
		]
      },
	  {
        name: "Local NGOs",
        children: [
		  { name: "Sungi",title:"", value: 800 },
          { name: "PDCA",title:"", value: 800 }
		]
      },
	  {
        name: "Corporate Sector",
        children: [
		  { name: "Telenor",title:"", value: 800 },
		  { name: "Zong",title:"", value: 800 },
		  { name: "Ufone",title:"", value: 800 },
          { name: "Bahria Town",title:"", value: 800, url:"http://localhost/ri-sh-map/sh-card.php?sid=55" }
		]
      },
	  {
        name: "Suppliers",
        children: [
		  { name: "CR Equipments",title:"", value: 800 },
          { name: "Ottobock",title:"", value: 800 },
		  { name: "PROTEOR",title:"", value: 800 },
		  { name: "REGAL",title:"", value: 800 },
		  { name: "IB-ER",title:"", value: 800 },
		  { name: "Beijing P&O Technique Center",title:"", value: 800 },
		  { name: "JINGBO",title:"", value: 800 },
		  { name: "Fujian",title:"", value: 800 },
		  { name: "Endofoam",title:"", value: 800 }
		]
      },
	  {
        name: "IA+ARS",
        children: [
		]
      },
	  {
        name: "ICRC PAK DEL - ALPHC",
        children: [
		]
      },
	  {
        name: "ICRC GVA - P,L,F-A",
        children: [
		]
      },
	  {
        name: "ICRC GVA OSI",
        children: [
		]
      },
	  {
        name: "Rehab Acadamic Inst:",
        children: [
		]
      },
	  {
        name: "PNS (RC societies)",
        children: [
		]
      },
	  {
        name: "DPO",
        children: [
		]
      }
    ]
  }
];

networkSeries.dataFields.value = "value";
networkSeries.dataFields.name = "name";
networkSeries.dataFields.id = "id";
networkSeries.dataFields.children = "children";
networkSeries.dataFields.fixed = "fixed";
networkSeries.dataFields.color = "color";

//networkSeries.nodes.template.tooltipText = "{name}:{value}";
//networkSeries.nodes.template.tooltipText = "{title}";
networkSeries.nodes.template.tooltipText = "{name}";
networkSeries.nodes.template.fillOpacity = 1;
networkSeries.nodes.template.label.text = "[bold]{name}";//{name}: [bold]{value}[/]
networkSeries.nodes.template.propertyFields.x = "x";
networkSeries.nodes.template.propertyFields.y = "y";
//networkSeries.nodes.template.color = "color";
//networkSeries.nodes.color = "color";
networkSeries.nodes.template.propertyFields.minRadius = "minRadius";
networkSeries.nodes.template.propertyFields.url = "url";
networkSeries.nodes.template.urlTarget = "_blank";
networkSeries.nodes.template.label.hideOversized = true;
networkSeries.nodes.template.label.truncate = true;

networkSeries.links.template.strokeWidth = 2;
networkSeries.links.template.strokeOpacity = 1;
networkSeries.links.template.distance = 1.3;
//networkSeries.links.template.disabled = true;
networkSeries.links.template.adapter.add('stroke', (stroke, target) => {
        if (target.dataItem.id === '1122') {
            return am4core.color();
        }

        return am4core.color('#ddd');
    });

networkSeries.fontSize = 10;
//networkSeries.minRadius = 28;
networkSeries.minRadius = am4core.percent(3);
/*networkSeries.maxRadius = 40;*/
networkSeries.centerStrength = 0.5;
networkSeries.manyBodyStrength = -20;

</script>
    
<!-- Data table area End-->
<script type="text/javascript" src="scripts/raphael/js/jquery_002.js"></script>
<script type="text/javascript" src="scripts/raphael/js/lozad.js"></script>
<script type="text/javascript" src="scripts/raphael/js/modernizr.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicPromoRoundel.js"></script>
<script type="text/javascript" src="scripts/raphael/js/CrossBrowserLoader.js"></script>
<script type="text/javascript" src="scripts/raphael/js/Resizer.js"></script>
<script type="text/javascript" src="scripts/raphael/js/LazyLoader.js"></script>
<script type="text/javascript" src="scripts/raphael/js/GlobalNav.js"></script>
<script type="text/javascript" src="scripts/raphael/js/GlobalSearch.js"></script>
<script type="text/javascript" src="scripts/raphael/js/ComponentAccordion.js"></script>
<script type="text/javascript" src="scripts/raphael/js/ComponentAuthorship.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicPlpMainpageCookieHandler.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicMediaQueryNewsletterPanel.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicCarousel.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicPrint.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicLogoSwitch.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicMediaQueries.js"></script>
<script type="text/javascript" src="scripts/raphael/js/PublicMain.js"></script>
<!-- jquery
		============================================ -->
<script src="js/vendor/jquery-1.11.3.min.js"></script>
<!-- bootstrap JS
		============================================ -->
<script src="js/bootstrap.min.js"></script>
<!-- notification JS
		============================================ -->
<script src="js/Lobibox.js"></script>
<script src="js/notification-active.js"></script>
<!-- Tree Viewer JS
		============================================ -->
<script src="js/tree-line/jstree.min.js"></script>
<script src="js/tree-line/jstree.active.js"></script>
</body>
</html>
