<section class="content-header">
	<h1>
		<?php echo $app_title;?>
		<small><?php echo $app_desc;?></small>
	</h1>
</section>

<!-- Main content -->
<section class="content">
	<div class="row">
		<div class="col-md-6">
			<div class="box box-solid box-success pieno2">
				<div class="box-header">
					<h3 class="box-title">Tingkat Pensiun</h3>
				</div><!-- /.box-header-->
				<div class="box-body">
					<div id="pie1" style="height: 375px; max-width: 100%; margin: 0 auto"></div>
				</div><!-- /.box-body-->
				<div class="overlay"><i class="fa fa-refresh fa-spin"></i></div>
			</div><!-- /.box-->
		</div><!-- /.col-md-->

		<div class="col-md-6">
			<div class="box box-solid box-success pieno1">
				<div class="box-header">
					<h3 class="box-title">Tipe Pensiun</h3>
				</div><!-- /.box-header-->
				<div class="box-body">
					<div id="pie2" style="height: 375px; max-width: 100%; margin: 0 auto"></div>
				</div><!-- /.box-body-->
				<div class="overlay"><i class="fa fa-refresh fa-spin"></i></div>
			</div><!-- /.box-->
		</div><!-- /.col-md-->
	</div><!-- /.row-->

	<div class="row">
		<div class="col-md-6">
			<div class="box box-solid box-danger pieno1">
				<div class="box-header">
					<h3 class="box-title">Tingkat Kecemasan</h3>
				</div><!-- /.box-header-->
				<div class="box-body">
					<div id="pie3" style="height: 375px; max-width: 100%; margin: 0 auto"></div>
				</div><!-- /.box-body-->
				<div class="overlay"><i class="fa fa-refresh fa-spin"></i></div>
			</div><!-- /.box-->
		</div><!-- /.col-md-->

		<div class="col-md-6">
			<div class="box box-solid box-danger pieno2">
				<div class="box-header">
					<h3 class="box-title">Tipe Kecemasan</h3>
				</div><!-- /.box-header-->
				<div class="box-body">
					<div id="pie4" style="height: 375px; max-width: 100%; margin: 0 auto"></div>
				</div><!-- /.box-body-->
				<div class="overlay"><i class="fa fa-refresh fa-spin"></i></div>
			</div><!-- /.box-->
		</div><!-- /.col-md-->
	</div><!-- /.row-->
	
          <!-- Default box -->
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">Title</h3>
              <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
                <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              Start creating your amazing application!
            </div><!-- /.box-body -->
            <div class="box-footer">
              Footer
            </div><!-- /.box-footer-->
          </div><!-- /.box -->

</section><!-- /.content -->

<script src="<?php echo ASSETS_URL;?>plugins/highcharts/highcharts.js" type="text/javascript"></script>
<script src="<?php echo ASSETS_URL;?>plugins/highcharts/highcharts-more.js" type="text/javascript"></script>
<script src="<?php echo ASSETS_URL;?>plugins/highcharts/modules/exporting.js" type="text/javascript"></script>

<script type="text/javascript">
var optionPie;	
$(document).ready(function(){

	optionPie = {
		chart: {
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false,
			type: 'pie'
		},
		title: {
			text: ''
		},
		tooltip: {
			pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				maxStaggerLines:1,
				cursor: 'pointer',
				//dataLabels: {
					//enabled: false
				//},
				dataLabels: {
	                enabled: true,
	                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
	                style: {
	                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
	                    width: '75px',
	                }
	            },				
				showInLegend: true
			}
		},
		series: [],
		credits : {enabled : false},
	};

	$.getJSON('<?php echo site_url('home/fnGrafikPie');?>',function(data){
	   if(data)
	   {
			$(".content-header").find('small').text('ARS ('+data.total_peserta+' Peserta)');
			optionPie.chart.renderTo = 'pie1';
			optionPie.title.text = 'Hasil Analisa<br/>Tingkat Kesiapan Pensiun';
			optionPie.series[0]	= data.pie1;
			var chart1 = new Highcharts.Chart(optionPie);

			optionPie.chart.renderTo = 'pie2';
			optionPie.title.text = 'Hasil Analisa<br/>Tipe Pensiun';
			optionPie.series[0]	= data.pie2;
			var chart2 = new Highcharts.Chart(optionPie);

			optionPie.chart.renderTo = 'pie3';
			optionPie.title.text = 'Hasil Analisa<br/>Tingkat Kecemasan Pensiun';
			optionPie.series[0]	= data.pie3;
			var chart2 = new Highcharts.Chart(optionPie);
			
			optionPie.chart.renderTo = 'pie4';
			optionPie.title.text = 'Proporsi Penyebab<br/>Kecemasan Utama';
			optionPie.series[0]	= data.pie4;
			var chart4 = new Highcharts.Chart(optionPie);    		
			
			$(".overlay").remove();
	   }
});

});
</script>
