<!DOCTYPE html>
<html>
<head>
<title>IOM Regional Data Hub</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap-datepicker.css" type="text/css" rel="stylesheet">
<!--<link href="//db.onlinewebfonts.com/c/e35b2e7467dec8d9ee2163558012da0b?family=Gill+Sans" rel="stylesheet" type="text/css"/>-->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootbox.all.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>

<style>
button.gm-ui-hover-effect{
display:none!important;
}
.gm-style .gm-style-iw-c {
background-color: white;
border-radius: 3px;
padding: 10px;
box-shadow: none!important;
border:0;
min-width:100px!important;
text-align:center;
opacity:0.5!important;
}
.gm-style .gm-style-iw-t::after {
background: linear-gradient(45deg,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
box-shadow: none!important;
}

/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/* Just use .gm-style-iw */ 
.gm-style-iw {
/*width: 300px; 
min-height: 150px;*/
}
#wrapper{
overflow:auto;
}
#map{
width:76.5%;
float:left;
height:780px;
z-index:0;
}
#right-sidebar{
width:25%;
float:right;
border:1px solid #ccc;
}
body,input{
font-family:'Roboto';
}
#main-container{
width:100%;
}
#map-container {
height: 900px;
min-width: 310px;
margin: 0 auto;
width:50%;
float:left;
margin-left:20%;
border:0px solid #ccc;

}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
#sidebar{
width:23%;
float:right;
border:1px solid#ccc;
padding:20px;
border-radius:2px;
}
.centername,.country,.totalreg,.males,.females{
float:left;
width:40%;
font-size:16px;
}
.mrc-country,.mrc-totalreg,.mrc-males,.mrc-females,.mrc-minors, .mrc-returns{
float:right;
width:50%;
}
div.clear-float {
clear:both;
font-size:0;
height:0;
border-bottom:1px dotted #ccc;
padding-top:10px;
margin-bottom:10px;
}
.mrc-center,.mrc-demographic,.mrc-origin, .ksa-returnees{
background:#0033a1;
padding:2px;
color:#fff;
text-align:center;
margin-bottom:15px;
font-size:16px;
border-radius:2px;
}
.mrc-center{
font-weight:bold;
margin-top:15px;
margin-bottom:0px;
font-size:20px;
}
.totalreg{
color:#0033a1;
}
.mrc-totalreg,.mrc-minors,.mrc-returns{
color:#f47527;
font-size:30px;
}
.mrc-country,.mrc-males,.mrc-females{
color:#f47527;
}
.males,.females,.country{
color:#0033a1;
}
.mrc-demographics-males{

float:left;
width:45%;
text-align:center;
}
.mrc-demographics-females{

width:45%;
float:right;
text-align:center;
}
.left-box{
margin-top:15px;
width:70%;
float:right;
font-size:26px;
color:#f47527
}
.right-box{
width:30%;
float:left;
}
.males-figure,.females-figure{
display:inline;
float:left;
color:#f47527;
padding-left:10px;
}
.males-label,.females-label{
font-size:20px;
color:#0033a1;
}
.ajax-loader {
visibility: hidden;
background-color: rgba(255,255,255,0.7);
position: absolute;
z-index: +100 !important;
width: 100%;
height:100%;
}

.ajax-loader img {
position: relative;
top:50%;
left:50%;
}
.datepickerdiv,
.datepickerdiv input,
.datepickerdiv1,
.datepickerdiv1 input
{
cursor:pointer;
}
.datepickerdiv{
margin-bottom:15px;
}
#header{
background:#fff;
padding:10px 20px;
position: absolute;
top: 0;
left: 2%;
z-index: 10;
text-align:center;
border:0px solid #ccc;
border-top:0;
}
.title,.subtitle{
font-family:'Open Sans';
color:#0033a0;
}
.title{
font-size:20px;
}
.subtitle{
font-size:13px;
}
label,
input{
float:left; display:inline;
}
label{
margin-right:5px;
width:40px;
line-height:30px;
}
#legend {
background: #FFF;
padding: 10px;
margin: 10px;
font-size: 12px;
font-family: 'Roboto';
border-radius:2px;
}
#legend h4 {
font-size: 12px;
}
.color {
border: 1px solid;
height: 12px;
width: 12px;
margin-right: 5px;
float: left;
}
.ksa_first_bucket {
background: #ff8d57;
}
.ksa_second_bucket {
background: #ffb38f;
}
.ksa_third_bucket {
background: #ffd1bc;
}
.ksa_fourth_bucket {
background: #ffe8dd;
}
.ethiopia_first_bucket {
background: #4066b8;
}
.ethiopia_second_bucket {
background: #8099d0;
}
.ethiopia_third_bucket {
background: #b2c2e2;
}
.ethiopia_fourth_bucket {
background: #d9e0f1;
}
.btn{
	border-radius:2px;
}

@media (min-width: 1281px) {
  #header{}
  .title{}
  #sidebar{}
  }

@media (min-width: 1025px) and (max-width: 1280px) {
  #header{}
  .title{}
   #sidebar{}
  }

@media (min-width: 768px) and (max-width: 1024px) {
	.title{}
  #header{}
   #sidebar{}
  }

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.title{
	 font-size:20px;
	 }
  #header{
	  padding:10px;
	  left:5%;
	  width:60%;
  }
  #map{
	width:70%;  
  }
   #sidebar{
	width:29%;   
   }
   .title{
	   font-size:14px;
   }
  }

@media (min-width: 481px) and (max-width: 767px) {
.title{
	 font-size:14px;
	 }
  #header{
	  padding:10px;
	  left:7%;
  }
  #sidebar{ 
  width: 100%;
  }
  #map{
	  width:100%;
	  }
	.centername, .country, .totalreg, .males, .females {
	font-size: 14px;
	}
	.mrc-totalreg, .mrc-minors {
	font-size: 24px;
	}
	.left-box {
	font-size: 24px;
	}
  }

@media (min-width: 320px) and (max-width: 480px) {
	#header{
	  padding:10px;
	  left:4%;
  }
   #sidebar{ 
  width: 100%;
  }
  #map{
	  width:100%;
	  }
 .title{
	 font-size:14px;
	 }
	 #reload{
		 font-size:9px;
	 }
}

</style>
<script>
function thousands_separators(num)
{
var num_parts = num.toString().split(".");
num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return num_parts.join(".");
}
//get gradient colors
function getColorKSA(total)
{
if(total==0){
	fillcolor='#ffffff';
}
if(total>1 && total<=2500){
	fillcolor='#ffe8dd';
}
if(total>2500 && total <=50000){
	fillcolor='#ffd1bc';
}
if(total>50000 && total <=100000){
	fillcolor='#ffb38f';
}
if(total>100000){
	fillcolor='#ff8d57';
}
}
function getColorethiopia(total)
{
if(total==0){
fillcolor='#ffffff';
}
if(total>1 && total<=2500){
	fillcolor='#d9e0f1';
}
if(total>2500 && total <=50000){
	fillcolor='#b2c2e2';
}
if(total>50000 && total <=100000){
	fillcolor='#8099d0';
}
if(total>100000){
	fillcolor='#4066b8';
}
}

var name;
//asir
name='Asir';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorKSA(total);
asir=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//asir

//al bahah
name='Al Bahah';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorKSA(total);
albahah=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//al bahah

//al madinah
name='Al Madinah';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorKSA(total);
almadinah=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//al madinah

//al qassim
name='Al Qassim';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorKSA(total);
alqassim=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//al qassim

//ar riyad
name='Ar Riyad';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorKSA(total);
arriyad=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//ar riyad

//ash sharqiyah
name='Ash Sharqiyah';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorKSA(total);
ashsharqiyah=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//ash sharqiyah

//hail
name="Ha'il";
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorKSA(total);
hail=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//hail

//jizan
name='Jizan';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorKSA(total);
jizan=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//jizan

//makkah
name='Makkah';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorKSA(total);
makkah=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//makkah

//najran
name='Najran';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorKSA(total);
najran=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//najran

//addis ababa
name='Addis Ababa';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorethiopia(total);
addisababa=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//addis ababa

//afar
name='Afar';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorethiopia(total);
afar=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//afar

//amhara
name='Amhara';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorethiopia(total);
amhara=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//amhara

//Benishangul-Gumz
name='Benishangul Gumz';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorethiopia(total);
benishangul_gumz=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//Benishangul-gumz

//Dire Dawa
name='Dire Dawa';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorethiopia(total);
diredawa=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//Dire Dawa

//Harari
name='Harari';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorethiopia(total);
harari=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//Harari

//Oromia
name='Oromia';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorethiopia(total);
oromia=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//Oromia

//Somali
name='Somali';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorethiopia(total);
somali=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//Somali

//SNNP
name='SNNP';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorethiopia(total);
snnp=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//SNNP

//Tigray
name='Tigray';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorethiopia(total);
tigray=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//Tigray

//Gambela
name='Gambela';
$.ajax({
type:'POST',
url:'fetchfillcolor.php',
dataType: "json",
async: false, 
data:{name:name},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
getColorethiopia(total);
gambela=fillcolor;
}
else if(data.status == 'err')
{
//if error
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//Gambela

</script>
<script>
$(document).ready(function(){
	//get earliest and latest dates
$.ajax({
type:'POST',
url:'fetchdatesksa.php',
dataType: "json",
data:{},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
//$('#date-from').val(data.result.earliest_date);
$("#date-from").datepicker("setDate", data.result.earliest_date);
$("#date-to").datepicker("setDate", data.result.latest_date);
}else{
bootbox.alert({
message: "No data!",
size: 'small'
});
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});

$('#date-from').datepicker({
format: 'M-yyyy',
startView: "months", 
minViewMode: "months",
autoclose: true,
//startDate: '-60d'
});

$("#input_btn_calendar_from").click(function() {
$("#date-from").datepicker('show')
});

$('#date-from').datepicker().on('changeDate', function(e) {
$('#date-to').datepicker('setStartDate', e.date);
$('#date-to').val("Select end date");
});

$('#date-to').datepicker({
format: 'M-yyyy',
startView: "months", 
minViewMode: "months",
autoclose: true,
//startDate: '-3d'
startDate: $("#date-from").datepicker("getDate"),
});

$("#input_btn_calendar_to").click(function() {
$("#date-to").datepicker('show')
});

$('#date-to').datepicker().on('changeDate', function(e) {
//get start date
var selectedDate = new Date($("#date-from").datepicker("getDate"));
var selectedMonth = selectedDate.getMonth();
var selectedYear = selectedDate.getFullYear();
var firstDate = new Date(selectedYear, selectedMonth , 1, 0);
var firstDay = firstDate.getDate();
var start_date =  selectedYear + "-" + ("0" + (selectedMonth + 1)).slice(-2) + "-" + ("0" + firstDay).slice(-2);

//get end date				
var selectedDate = new Date($("#date-to").datepicker("getDate"));
var selectedMonth = selectedDate.getMonth();
var selectedYear = selectedDate.getFullYear();
var lastDate = new Date(selectedYear, selectedMonth + 1, 0);
var lastDay = lastDate.getDate();
var end_date =  selectedYear + "-" + ("0" + (selectedMonth + 1)).slice(-2) + "-" + ("0" + lastDay).slice(-2);

//get total KSA on load
$.ajax({
type:'POST',
url:'fetchksabymonth.php',
dataType: "json",
data:{start_date:start_date,end_date:end_date},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
$('.mrc-center').html('All Arrivals');
$('.mrc-totalreg').html(thousands_separators(data.result.total));
$('.mrc-minors').html(thousands_separators(data.result.minors));
$('.mrc-returns').html(data.result.involuntarypercentage+"%");
$('.males-figure').html(data.result.malepercentage);
$('.females-figure').html(data.result.femalepercentage);
}
else
{
bootbox.alert({
message: "Data not available!",
size: 'small'
});
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//end get total KSA

//get duration
$.ajax({
type:'POST',
url:'fetchdurationbymonth.php',
dataType: "json",
data:{start_date:start_date,end_date:end_date},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
var chart1 = $('#duration_container').highcharts();
chart1.series[0].setData(data[1]['data']);
chart1.xAxis[0].setCategories(data[0]['data']);
chart1.redraw();
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//end get duration

})
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDULc23Uc1FYn7WoEUTOFVXnHx5uDzSWeM" ></script>
<script type="text/javascript" src="js/infobox.js"></script>
<script>
let map;

function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 5,
center: { lat: 18.625138, lng: 43.237123 },
scrollwheel: false,
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},

//styles here
styles:[
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#444444"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.land_parcel",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.locality",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},
{
featureType: 'administrative.country',
elementType: 'labels.text.fill',
stylers: [
{
color: '#bbbbbb',
}
]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [
{color: '#ffffff'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [
{
color: '#ffffff'
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#a6c9d3"
},
{
"visibility": "on"
}
]
},

]

});

var InfoboxOptions = {
//content: labelText
boxStyle: {
//border: "1px solid #999"
background: "white"
,textAlign: "center"
,fontWeight: "normal"
,fontSize: "11px"
,color:'#000'
,padding:'1px'
//,width: "82px"
,opacity: 0.6
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-25, 0)
//,position: regioncenter
,closeBoxURL: ""
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: true
};

var InfoboxLabelOptions = {
boxStyle: {
border: "0px"
,textAlign: "center"
,fontSize: "15px"
,fontWeight:'normal'
,width: "120px"
,color:'#ffffff'
,opacity: 1
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-25, 0)
,closeBoxURL: ""
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: true
};

var InfoboxbluebgLabelOptions = {
boxStyle: {
textAlign: "center"
,fontSize: "12px"
,fontWeight:'bold'
,color:"#999"
,padding:"0px 2px"
,background: "#fff"
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-25, 0)
,closeBoxURL: ""
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: true
};

/****country labels***/
var countrycenter = new google.maps.LatLng(24.460172, 44.132055);
var ibLabel = new InfoBox(InfoboxLabelOptions);
ibLabel.setContent('Saudi Arabia');
ibLabel.setPosition(countrycenter);
ibLabel.open(map);
var countrycenterethiopia = new google.maps.LatLng(9.969257, 37.437349);
var ibLabel = new InfoBox(InfoboxLabelOptions);
ibLabel.setContent('Ethiopia');
ibLabel.setPosition(countrycenterethiopia);
ibLabel.open(map);
var countrycenterdjibouti = new google.maps.LatLng(11.980874, 43.071273);
var ibLabel = new InfoBox(InfoboxbluebgLabelOptions);
ibLabel.setContent('Djibouti');
ibLabel.setPosition(countrycenterdjibouti);
ibLabel.open(map);
/*******end country labels******/

//Ethiopia key
//> 100,000 ---------#4066b8
//50,001-100,000-----#8099d0
//2,501-50,000-------#b2c2e2
//0-2500-------------#d9e0f1

//KSA key
//> 100,000 ---------#ff8d57
//50,001-100,000-----#ffb38f
//2,501-50,000-------#ffd1bc
//0-2500-------------#ffe8dd

// Load GeoJSON.
map.data.loadGeoJson('json/saudi_arabia_regions.json');
map.data.loadGeoJson('json/ethiopia.json');

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle((feature) => {
var color = 'green';
var opacity = 1;
var strokecolor='green';
var strokeweight=0;

if (feature.getProperty('HASC_1') === "SA.AS") {//`Asir
color = asir;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
var regioncenter=new google.maps.LatLng(19.764885, 43.698230);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('HASC_1') === "SA.BA") {//Al Bahah
color = albahah;
opacity = 1;
strokecolor='#999999';
strokeweight=1;

}
if (feature.getProperty('HASC_1') === "SA.HS") {//Al Hudud ash Shamaliyah
color = '#ffffff';
opacity = 1;
strokecolor='#999999';
strokeweight=1;
}
if (feature.getProperty('HASC_1') === "SA.JF") {//Al Jawf
color = '#ffffff';
opacity = 1;
strokecolor='#999999';
strokeweight=1;
}
if (feature.getProperty('HASC_1') === "SA.MD") {//Al Madinah
color = almadinah;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
/****code to get map label***/
var bounds = new google.maps.LatLngBounds();
var multi = feature.getGeometry().getArray();
for (var k = 0; k < multi.length; k++) {
var polys = multi[k].getArray();
for (var i = 0; i < polys.length; i++) {
for (var j = 0; j < polys[i].getLength(); j++) {
bounds.extend(polys[i].getAt(j));
}
}
}
var regioncenter=bounds.getCenter();
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('HASC_1') === "SA.QS") {//Al Quassim
color = alqassim;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
var regioncenter=new google.maps.LatLng(26.597440, 43.298034);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('HASC_1') === "SA.RI") {//Ar Riyad
color = arriyad;
opacity = 1;
strokecolor='#e7eae9';
strokeweight=1;
var regioncenter=new google.maps.LatLng(23.334117, 45.543972);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('HASC_1') === "SA.SH") {//Ash Sharqiyah
color = ashsharqiyah;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
/****code to get map label***/
var bounds = new google.maps.LatLngBounds();
var multi = feature.getGeometry().getArray();
for (var k = 0; k < multi.length; k++) {
var polys = multi[k].getArray();
for (var i = 0; i < polys.length; i++) {
for (var j = 0; j < polys[i].getLength(); j++) {
bounds.extend(polys[i].getAt(j));
}
}
}
var regioncenter=bounds.getCenter();
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('HASC_1') === "SA.HA") {//Ha'il
color = hail;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
var regioncenter=new google.maps.LatLng(27.543459, 41.675508);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('HASC_1') === "SA.JZ") {//Jizan
color = jizan;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
var regioncenter=new google.maps.LatLng(17.411350, 42.744637);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('HASC_1') === "SA.MK") {//Makkah
color = makkah;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
var regioncenter=new google.maps.LatLng(21.945304, 40.519446);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('HASC_1') === "SA.TB") {//Tabuk
color = '#ffffff';
opacity = 1;
strokecolor='#999999';
strokeweight=1;
}
if (feature.getProperty('HASC_1') === "SA.NJ") {//Najran
color = najran;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
var regioncenter=new google.maps.LatLng(18.790335, 46.324550);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}

//ethiopia regions
if (feature.getProperty('hasc_1') === "ET.AA") {//Adis Ababba
color = addisababa;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
/****code to get map label***/
var bounds = new google.maps.LatLngBounds();
var multi = feature.getGeometry().getArray();
for (var k = 0; k < multi.length; k++) {
var polys = multi[k].getArray();
for (var i = 0; i < polys.length; i++) {
for (var j = 0; j < polys[i].getLength(); j++) {
bounds.extend(polys[i].getAt(j));
}
}
}
var regioncenter=bounds.getCenter();
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('hasc_1') === "ET.AF") {//Afar
color = afar;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
var regioncenter=new google.maps.LatLng(12.857946, 41.523322);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('hasc_1') === "ET.AM") {//Amhara
color = amhara;
opacity = 1;
strokecolor='#999999';
strokeweight=1;

var regioncenter=new google.maps.LatLng(11.983235, 38.071254);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('hasc_1') === "ET.BE") {//Benishangul-Gumz
color = benishangul_gumz;
opacity = 1;
strokecolor='#999999';
strokeweight=1;

var regioncenter=new google.maps.LatLng(11.269217, 33.247568);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('hasc_1') === "ET.DD") {//Dire Dawa
color = diredawa;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
var regioncenter=new google.maps.LatLng(10.002314, 41.769635);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('hasc_1') === "ET.HA") {//Harari
color = harari;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
var regioncenter=new google.maps.LatLng(9.124933, 42.182655);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('hasc_1') === "ET.OR") {//Oromia
color = oromia;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
var regioncenter=new google.maps.LatLng(9.015221, 36.451828);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('hasc_1') === "ET.SN") {//SNNP
color = snnp;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
/****code to get map label***/
var bounds = new google.maps.LatLngBounds();
var multi = feature.getGeometry().getArray();
for (var k = 0; k < multi.length; k++) {
var polys = multi[k].getArray();
for (var i = 0; i < polys.length; i++) {
for (var j = 0; j < polys[i].getLength(); j++) {
bounds.extend(polys[i].getAt(j));
}
}
}
var regioncenter=bounds.getCenter();
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('hasc_1') === "ET.TI") {//Tigray
color = tigray;
opacity = 1;
strokecolor='#999999';
strokeweight=1;

var regioncenter=new google.maps.LatLng(14.249129, 38.546939);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('hasc_1') === "ET.SO") {//Somali
color = somali;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
/****code to get map label***/
var bounds = new google.maps.LatLngBounds();
var multi = feature.getGeometry().getArray();
for (var k = 0; k < multi.length; k++) {
var polys = multi[k].getArray();
for (var i = 0; i < polys.length; i++) {
for (var j = 0; j < polys[i].getLength(); j++) {
bounds.extend(polys[i].getAt(j));
}
}
}
var regioncenter=bounds.getCenter();
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}
if (feature.getProperty('hasc_1') === "ET.GA") {//Gambela
color = gambela;
opacity = 1;
strokecolor='#999999';
strokeweight=1;
feature.setProperty("total", 300);

var regioncenter=new google.maps.LatLng(8.007954, 34.701755);
/*******infobox********/
let name = feature.getProperty('Name');
if (typeof name == "undefined") name= feature.getProperty('name_1');
var labelText = name;
var ibLabel = new InfoBox(InfoboxOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(regioncenter);
ibLabel.open(map);
/*******end infobox*****/
/*******end code to get map label******/
}

return /** @type {!google.maps.Data.StyleOptions} */ {
fillColor: color,
strokeColor: strokecolor,
strokeWeight: strokeweight,
fillOpacity: opacity,
};
});

//legend
// Create the legend and display on the map
var legend = document.createElement('div');
legend.id = 'legend';
var content = [];
content.push('<h4>Regions of residence in the KSA</h4>');
content.push('<p><div class="color ksa_first_bucket"></div>> 100,000</p>');
content.push('<p><div class="color ksa_second_bucket"></div>50,001 - 100,000</p>');
content.push('<p><div class="color ksa_third_bucket"></div>2,501 - 50,000</p>');
content.push('<p><div class="color ksa_fourth_bucket"></div>1 - 2500</p>');
content.push('<p><div style="height:1px;"></div></p>');
content.push('<h4>Regions of intended destination <br>in Ethiopia</h4>');
content.push('<p><div class="color ethiopia_first_bucket"></div>> 100,000</p>');
content.push('<p><div class="color ethiopia_second_bucket"></div>50,001 - 100,000</p>');
content.push('<p><div class="color ethiopia_third_bucket"></div>2,501 - 50,000</p>');
content.push('<p><div class="color ethiopia_fourth_bucket"></div>1 - 2500</p>');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
//legend
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(reload);
map.setOptions({
	draggable: true,
	keyboardShortcuts:false,
	disableDoubleClickZoom: true
	});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener("click", (event) => {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {
strokeWeight: 3,
strokeColor: '#999999',
});

let region = event.feature.getProperty('Name');
if (typeof region == "undefined") region= event.feature.getProperty('name_1');
//get start date
var selectedDate = new Date($("#date-from").datepicker("getDate"));
var selectedMonth = selectedDate.getMonth();
var selectedYear = selectedDate.getFullYear();
var firstDate = new Date(selectedYear, selectedMonth , 1, 0);
var firstDay = firstDate.getDate();
var start_date =  selectedYear + "-" + ("0" + (selectedMonth + 1)).slice(-2) + "-" + ("0" + firstDay).slice(-2);
//get end date				
var selectedDate = new Date($("#date-to").datepicker("getDate"));
var selectedMonth = selectedDate.getMonth();
var selectedYear = selectedDate.getFullYear();
var lastDate = new Date(selectedYear, selectedMonth + 1, 0);
var lastDay = lastDate.getDate();
var end_date =  selectedYear + "-" + ("0" + (selectedMonth + 1)).slice(-2) + "-" + ("0" + lastDay).slice(-2);

//fetch data from mysql
$.ajax({
type:'POST',
url:'fetchoneregion.php',
dataType: "json",
data:{start_date:start_date,end_date:end_date,region:region},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var total = data.result.total;
var minors = data.result.minors;
var involuntaryreturns = data.result.involuntaryreturns;
var malepercentage = data.result.malepercentage;
var femalepercentage = data.result.femalepercentage;
if(total==0){
bootbox.alert({
message: "Data not available for this region!",
size: 'small'
});
}
//update right sidebar
$('.mrc-center').html(region);
$('.mrc-totalreg').html(thousands_separators(total));
$('.mrc-minors').html(thousands_separators(minors));
$('.mrc-returns').html(data.result.involuntarypercentage+"%");
$('.males-figure').html(malepercentage);
$('.females-figure').html(femalepercentage);
}
else
{
//bootbox.alert({
//message: "Data not available!",
//size: 'small'
//});
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//end fetch data from mysql

//fetch duration by multiple filter
$.ajax({
type:'POST',
url:'fetchdurationbymultiple.php',
dataType: "json",
data:{region:region,start_date:start_date,end_date:end_date},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){

var chart1 = $('#duration_container').highcharts();
chart1.series[0].setData(data[1]['data']);
chart1.xAxis[0].setCategories(data[0]['data']);
chart1.redraw();

},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//end get duration*/

});

map.data.addListener("mouseover", (event) => {

});

map.data.addListener("mouseout", (event) => {

});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
<div id="wrapper">
<div id="main-container">
<div id="header">
<div class="title">Number of Migrants Returning from the KSA to Ethiopia by Region of Residence <br>in the KSA and Region of Intended Destination in Ethiopia</div>
<div class="subtitle">Click on a region to get more information on the sidebar</div>
</div><!--end header-->
<div id="map"></div>

<div class="ajax-loader">
<img src="ajax-loader.gif" class="img-responsive" />
</div>

<div id="sidebar">
<form>
<div id="date-selectors">

<div class="datepickerdiv">
<label for="select_date_from">From:</label>
<div class="input-group date">
<input type="text" readonly="readonly" id="date-from" class="form-control" value="">
<span class="input-group-addon" id="input_btn_calendar_from"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>

<div class="datepickerdiv1">
<label for="select_date_to">To:</label>
<div class="input-group date">
<input type="text" readonly="readonly" id="date-to" class="form-control" value="">
<span class="input-group-addon" id="input_btn_calendar_to"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>

</div><!--date-selectors-->
</form>

<div class="mrc-center">All Arrivals</div>
<div class="clear-float"></div>
<div class="totalreg">Total Registered:</div> <div class="mrc-totalreg"></div>
<div class="clear-float"></div>
<div class="totalreg" style="line-height:40px;">Children:</div> <div class="mrc-minors"></div>
<div class="clear-float"></div>
<div class="totalreg">Involuntary returns:</div><div class="mrc-returns"></div>
<div class="clear-float"></div>
<div class="mrc-demographic">Demographics</div>
<div class="mrc-demographics-container">

<div class="mrc-demographics-males">
<div class="left-box">
<div class="males-figure"></div>%
</div>
<div class="right-box"><img src='images/male-icon.png' alt="Male" title="Male"></div>
</div>
<div class="mrc-demographics-females">
<div class="left-box">
<div class="females-figure"></div>%
</div>
<div class="right-box"><img src='images/female-icon.png' alt="Female" title="Female"></div>
</div>
</div>
<div class="clear-float"></div>
<div class="ksa-returnees">
Duration of stay in the KSA
</div><!--top three-->

<div class="origin-bar-chart">
<script type="text/javascript">
//global declare options
Highcharts.setOptions({
chart: {
style: {
fontFamily: 'Roboto'
}
},
lang: {
thousandsSep: ','
}
});

$(document).ready(function() {
var options = {
chart: {
renderTo: 'duration_container',
type: 'bar',
events: {
load: function() {
const chart = this,
points = chart.series[0].data,
options = {
dataLabels: {
inside: false,
style: {
color: '#0033a1'
}
}
};

points.forEach(function(point) {
if (point.shapeArgs.height < 30) {
point.update(options, false);
}
});

chart.redraw();
}
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
credits: {
enabled: false
},
plotOptions: {
bar: { 
pointWidth: 20, 
dataLabels: { 
enabled: true,
inside:false,
align:'right',
format: '{point.y:,.0f}',
style: {
textOutline: false,
color: '#fff',
},
}
}
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: ''
},
labels: {
enabled:false
},
gridLineWidth: 0,
plotLines: [{
value: 0,
width: 1,
color: '#0033a1'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ thousands_separators(this.y);
}
},
legend: {
enabled:false,
},
series: [],
}

$.getJSON("fetchduration.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
//options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>

<div id="duration_container" style="height:215px;"></div>
</div><!--end duration bar chart-->

</div><!--sidebar-->

<button type="button" id="reload" class="btn btn-light"><i class="glyphicon glyphicon-repeat"></i> Reset</button>
<script>
$('#reload').click(function() {
    location.reload();
});
</script>

</div>
</div>

</body>
</html>
