<?
	// 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] = [];

	}

	$hasResults = true;

	if( count( $xs ) == 0 ){
		$hasResults = false;
	}

	if( $hasResults ){

		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]
				];
			}


			$jsData = [
				'xs' => array_keys($xs),
				'ys' => array_values($ys)
			];
	}
?>
<div class="row-fluid">
	<div class="row-fluid">
		<div class="span12">
			<h4 style="text-align:center;"><?php echo $title; ?></h4>
		</div>
	</div>


	<?php if( $hasResults ){ ?>
	<div id="chart-<?=$chartId?>" style="min-width: 100%; height:250px; margin: 0 auto"></div>
<center style="height:60px;">
	<?php if( $subtitle != '' ){ ?>
		<div style="font-size:10px;"><?php echo $subtitle; ?></div>
	<?php } ?>
	<?php echo $description; ?>
</center>
	<div id="options-<?=$divId?>" style="height:95px;background:#F5F5F5;width:98%;overflow-x:auto;overflow-y:hidden;<?php if( $hideSlider ) { echo 'display:none;'; } ?>">

	<br/>

	<?php if( $groups && !$hideGroups ){ ?>
		<span class="pull-right">
			<select class="charts-select" id="select-<?=$chartId?>" data-divId="<?php echo $divId; ?>" onchange="loadSubChart( this.id )">
				<?php foreach ( $groups as $key => $value ) {
					$selected = ( $key == $chartId ) ? 'selected="selected"' : '';
					?>
					<option <?php echo $selected; ?> value="<?php echo $key; ?>"><?php echo $value; ?></option>
				<?php } ?>
			</select>
		</span>
	<?php } ?>

	<div class="row-fluid" style="padding:0 20px; font-size:11px;">
		<div class="span3" id="week-<?=$chartId?>">
			<?php
			if( $interval == 'week' ){
				?>
					Weeks <?php echo $from; ?> to <?php echo $to; ?> (of <?php echo $totalWeeks; ?>):
				<?php
			} else if( $interval == 'month' ){
			?>
				Months <?php echo $from_month; ?> to <?php echo $to_month; ?> (of <?php echo $totalMonths; ?>):
			<?php
			} else if( $interval == 'day' ){
			?>
				Months <?php echo $from_day; ?> to <?php echo $to_day; ?> (of <?php echo $totalDays; ?>):
			<?php
			} ?>
		</div>
		<div class="span8">
			<div id="slider-<?=$divId?>" data-from="<?php echo $from; ?>" data-to="<?php echo $to; ?>"></div>
		</div>
	<?php }
	 else {
		echo 'No results for <b>' . $groups[ $chartId ] . '</b>';
	} ?>
</div>

</div>

<?php if( $hasResults ){ ?>
<script type="text/javascript">
$(function () {
	var data = <?=json_encode($jsData, JSON_NUMERIC_CHECK)?>;
	$('#chart-<?=$chartId?>').highcharts({
		chart: {
			type: 'area',
			backgroundColor:'rgba(255, 255, 255, 0.1)'
		},
		title: {
			text: ''
		},
		xAxis: {
			categories: data.xs,
			tickmarkPlacement: 'on',
			title: {
				enabled: false
			},
			labels : {
				rotation: -45,
				align: 'right'
				<?php if( $interval == 'day' ){ ?>,step:10<?php } ?>
				<?php if( $interval == 'week' ){ ?>,step:2<?php } ?>
			}
		},
		yAxis: {
			title: {
				text: '<?=$yName?>'
			},
			labels: {
				formatter: function() {
					return this.value;
				}
			}
		},
		tooltip: {
			pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} <?php echo $unit; ?>)<br/>',
			shared: true
		},
		plotOptions: {
			area: {
				stacking: 'percent',
				lineColor: '#666666',
				lineWidth: 1,
				marker: {
					enabled: false,
					symbol: 'circle',
					radius: 2,
					states: {
						hover: {
							enabled: true
						}
					}
				}
			}
		},
		series: data.ys
	});

	<?php if( !$hideSlider ) { ?>

	$( '#slider-<?=$divId?>' ).slider( {
		range: true,
		min: 1,
		<?php
		if( $interval == 'week' ){
			?>
			values: [ <?php echo $from; ?>, <?php echo $to; ?> ],
			max: <?php echo $totalWeeks; ?>,
			<?php
		} else if( $interval == 'month' ){
		?>
			values: [ <?php echo $from_month; ?>, <?php echo $to_month; ?> ],
			max: <?php echo $totalMonths; ?>,
		<?php
		} else if( $interval == 'day' ){
		?>
			values: [ <?php echo $from_day; ?>, <?php echo $to_day; ?> ],
			max: <?php echo $totalDays; ?>,
		<?php
		} ?>
		change: function( event, ui ) {
			var activeUserDays = $( '#active-user-days' ).val();
			$( '#week-<?=$chartId?>' ).html( '<i class="icon-spinner icon-spin"></i>' );
			$( '#slider-<?=$chartId?>' ).slider( 'disable' );
			$( '#slider-<?=$chartId?>' ).css( 'opacity', 0.4 );
			var self = $( '#<?=$divId?>' );
			var url = '/home/charts/<?=$chartId?>/<?php echo $divId; ?>/?interval=<?php echo $interval;?>&from=' + ui.values[ 0 ] + '&to=' + ui.values[ 1 ] + '&activeUserDays=' + activeUserDays;
			$.ajax( { url: url, }).done(function( data ) { self.html( data ); } );
		}
	} );
	<?php } ?>
});
</script>
<?php } ?>