<?php
include_once"config.php";

$city = mysqli_query($con, "select emirate.* from emirate inner join area on emirate.id = area.pid where area.status = 1 group by emirate.name");
$city2 = mysqli_query($con, "select emirate.* from emirate inner join area on emirate.id = area.pid where area.status = 1 group by emirate.name");

?>
<script>
window.onload = function() {
<?php $i=0; while($c2 = mysqli_fetch_array($city2)){$i++ ?>
var chart<?= $i;?> = new CanvasJS.Chart("chartContainer<?= $i;?>", {
	animationEnabled: true,
	title: {
		text: " "
	},
	data: [{
		type: "pie",
		startAngle: 240,
		yValueFormatString: "##0.00\"%\"",
	//	indexLabel: "{label} {y}",
		indexLabel: "{label}",
		dataPoints: [
		<?php  
	$pid2 = $c2['id']; 
	$area2 = mysqli_query($con, "select * from area where pid= '$pid2' and status = 1 order by name");
	while( $a2 = mysqli_fetch_array($area2)){
?>
			{y: <?= $a2['percent']; ?>, label: "<?= $a2['name']; ?>"},
		<?php }  ?>
		]
	}]
});

chart<?= $i;?>.render();
<?php } ?>
}


</script>
<div id="area " style="margin-top:45px">

<h2><em><?= $Area_title; ?></em></h2>

<?php $bra=0; while($c = mysqli_fetch_array($city)){ $bra++;
	$pid = $c['id'];
	
$area = mysqli_query($con, "select * from area where pid= '$pid' and status = 1 order by name");
	?>
		<section >
	<?php if($bra%2!=0){}else{ ?>

<div class="col-7" ><div id="chartContainer<?= $bra;?>" style="height: 370px; width: 100%;"></div></div>
<?php } ?>
<div  style="margin-bottom:40px;">
<div class="col-5">
<h3><?= $c['name'];?> </h3>
<table border="0" cellpadding="7" width="100%" cellspacing="0">
<thead>
<tr>
<td width="80%">Area</td>
<td width="20%">Counts</td>
</tr>
</thead>
<tbody>
<?php while( $a = mysqli_fetch_array($area)){?>
<tr>
<td><?= $a['name']; ?></td>
<td><?= number_format($a['value']); ?></td>
</tr>
<?php } ?></tbody>
</table>

</div>
<?php if($bra%2!=0){ ?>
<div class="col-7" ><div  id="chartContainer<?= $bra;?>" style="height: 370px; width: 100%;"></div></div>
<?php } ?>
</div>

<div style="clear:both"></div>

</section>
<hr>
<?php } ?>

</div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>