<?php
echo '<pre>';var_dump( 1 );exit();
$isPopup = ( $_GET[ 'popup' ] ? true : false );
if( $isPopup ){
?>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800">
	<link href="/assets/css/core/core.css" media="screen" rel="stylesheet" type="text/css" />
	<script src="/assets/js/core/core.js" type="text/javascript"></script>
	<script src="/assets/js/highcharts.src.js" type="text/javascript"></script>
<?
}
echo '<pre>';var_dump( 1 );exit();
	// group up the data by order of data items recieved
	// 0: X
	// 1: Y
	// 2: Group

	$categories = [];
	$ys = [];
	$group = [];

	// set up x labels and empty objects
	foreach ($data as $item) {
		$vars = get_object_vars($item);

		// X
		$xName = key($vars);
		$x = array_shift($vars);
		$xs[$x] = true;


		$yName = key($vars);
		$y = array_shift($vars);

		$group = array_shift($vars);

		$ys[$group] = [];

	}

	foreach ($xs as $k => $v) {
		$xx .= "'".str_replace("'","\\'",$k)."', ";
	}
	$xx = substr($xx,0,-2);

	// fill empty columns
	foreach ($xs as $k => $v) {
		foreach ($ys as $kk => $vv) {
			$ys[$kk][$k] = 0;
		}
	}


	// gather data
	foreach ($data as $item) {
		$vars = get_object_vars($item);

		// X
		$x = array_shift($vars);
		$xs[$x] = true;

		// Y & group
		$y = array_shift($vars);

		$groupName = key($vars);
		$group = array_shift($vars);

		$ys[$group][$x] = $y;

	}

	// remove assoc vals and add proper keys
	foreach ($ys as $k => $v) {
		$ys[$k] = array_values($ys[$k]);
		$ys[$k] = [
			'name' => $k,
			'data' => $ys[$k]
		];
	}

	$data = array();
	foreach ($ys as $y) {
		$data[] = [ $y[ 'name' ], $y[ 'data' ][0] ];
	}
	$jsData = [
		'xs' => array_keys($xs),
		'ys' => $data
	];
?>
<div class="row-fluid">
	<div class="row-fluid">
		<div class="span12">
			<h4 style="text-align:center;"><?php echo $title; ?></h4>
		</div>
	</div>
	<div id="chart-<?=$chartId?>" style="min-width: 100%; height:250px; margin: 0 auto"></div>
	<center>
		<?php echo $description; ?>
	</center>
</div>
<hr />
<script type="text/javascript">
$(function () {
	var data = <?=json_encode($jsData, JSON_NUMERIC_CHECK)?>;
	$('#chart-<?=$chartId?>').highcharts({
				chart: {
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false,
						backgroundColor:'rgba(255, 255, 255, 0.1)'
				},
				title: {
						text: ''
				},
				tooltip: {
					pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)'
				},
				plotOptions: {
						pie: {
								allowPointSelect: true,
								cursor: 'pointer',
								dataLabels: {
										enabled: true,
										color: '#000000',
										connectorColor: '#000000',
										format: '{series.name}: <b>{point.percentage:.1f}%</b>'
								}
						}
				},
				series: [{
						type: 'pie',
						name: 'Active users',
						data: data.ys
				}]
		});
});
</script>
