<?php
include_once"config.php";
$sp = mysqli_query($con, "select * from special_category where status = 1 ");
$second = $third = $first = null;
if($sp->num_rows > 5){
$co = $sp->num_rows/3
?>

<?php $cp=0; foreach($sp as $a){ $cp++;
if($cp==1){
$first .= '<tr>
<td>'. $a['name'].$cp.'</td>
<td>'.number_format($a['value']).'</td>
</tr>';
}elseif($cp == 2){
$second .= '<tr>
<td>'. $a['name'].$cp.'</td>
<td>'.number_format($a['value']).'</td>
</tr>';	
}elseif($cp == 3){
$third .= '<tr>
<td>'. $a['name'].$cp.'</td>
<td>'.number_format($a['value']).'</td>
</tr>';	
$cp = 0;
}
 } ?>


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

<h2><em>Special Categories Visitors</em></h2>
<div class="col-4" style="margin-bottom:40px;">
<h3> </h3>
<table border="0" cellpadding="7" width="100%" cellspacing="0">
<thead>
<tr>
<td width="80%">Categories</td>
<td width="20%">Counts</td>
</tr>
</thead>
<tbody>
<?= $first;?>
</tbody>
</table>

</div>



<div class="col-4" style="margin-bottom:40px;">
<h3> </h3>
<table border="0" cellpadding="7" width="100%" cellspacing="0">
<thead>
<tr>
<td width="80%">Categories</td>
<td width="20%">Counts</td>
</tr>
</thead>
<tbody>
<?= $second;?>
</tbody>
</table>

</div>

<div class="col-4" style="margin-bottom:40px;">
<h3> </h3>
<table border="0" cellpadding="7" width="100%" cellspacing="0">
<thead>
<tr>
<td width="80%">Categories</td>
<td width="20%">Counts</td>
</tr>
</thead>
<tbody>
<?= $third;?>
</tbody>
</table>

</div>
</div>
<?php }else{ ?>
<div id="area " style="margin-top:45px">

<h2><em>Special Categories Visitors</em></h2>
<div class="col-6" style="margin-bottom:40px;">
<h3> </h3>
<table border="0" cellpadding="7" width="100%" cellspacing="0">
<thead>
<tr>
<td width="80%">Categories</td>
<td width="20%">Counts</td>
</tr>
</thead>
<tbody>
<?php foreach($sp as $a){ ?>
<tr>
<td><?= $a['name'];?></td>
<td><?= $a['value'];?></td>
</tr>
<?php } ?>
</tbody>
</table>

</div>



<div class="col-6">
<script>
window.onload = function() {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title: {
		text: ""
	},
	data: [{
		type: "pie",
		startAngle: 240,
		yValueFormatString: "##0.00\"%\"",
		indexLabel: "{label} {y}",
		dataPoints: [
		<?php foreach($sp as $a) { ?>
		{y: <?= $a['percent'];?>, label: "<?= $a['name'];?>"},
		<?php } ?>
		]
	}]
});
chart.render();

}
</script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</div>
</div>
<?php } ?>