ESH/agewise_distribution_emp.php

<?php  include('techsyn_header.php'); ?>    
<script async="" src="./js/analytics.js"></script>
		<script src="./js/Chart.min.js"></script>
		<script src="./js/utils.js"></script>
		
<!-- Main Content Container for side bar and body-->
     <div class="main-container ace-save-state" id="main-container">
		<script type="text/javascript">
			try{ace.settings.loadState('main-container')}catch(e){}
		</script>
<?php  include('techsyn_sidebar.php'); ?>    

<!--breadcrumb-->
<?php 


?>

<div class="main-content">
    <div class="main-content-inner">
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="#">Home</a>
                </li>
                <li class="active">Dashboard</li>
					<div class="nav-search" id="nav-search" style="width:170px;">
						<form id="flex_form_opd">
								<input type="hidden" name="flex_opd_id"id="flex_opd_id">
								<select class="chosen-select form-control" id="emp_list" name="emp_list" data-placeholder="Goto Employee.." onchange="opd_form(this.value)">
									<option></option>
									<?php 
									$sql_emp="SELECT id, CONCAT(fname, ' ', lname, '-', emp_code) AS emp_details FROM employee order by fname";
									generate_options($sql_emp,'','id','emp_details','id',$id);
									?>
								</select>
						</form>
					</div>		
            </ul>



        <!-- End of breadcrumb -->
		
</div>
     <div>
      
</div>
<div class="col-sm-6" style="padding-top: 30px">
					<div class="widget-box transparent">

						<h4 class="widget-title lighter">
							<i class="ace-icon fa fa-star orange"></i> AGEWISE DISTRIBUTION OF EMPLOYEES

						</h4>




						<div class="widget-body">
							<div class="widget-main no-padding">
								<div id="canvas-holder3" style="width: 100%;">
									<div class="chartjs-size-monitor">
										<div class="chartjs-size-monitor-expand">
											<div class=""></div>
										</div>
										<div class="chartjs-size-monitor-shrink">
											<div class=""></div>
										</div>
									</div>
									<canvas id="chart3"
										style="display: block; width: 1013px; height: 506px;"
										width="1013" height="506" class="chartjs-render-monitor"></canvas>



								</div>
								<!-- /.widget-main -->
							</div>
							<!-- /.widget-body -->
						</div>
						<!-- /.widget-box -->
					</div>




					<!-- PAGE CONTENT ENDS -->
				</div>
</div><!-- /.main-content -->
</div>
<?php  include('techsyn_footer.php'); ?>    
<style>
.input-group-addon {
	height:25px;
	width:30px;
	padding: 0px 0px;
}

</style>
<style>

</style>
<script>
var color = Chart.helpers.color;
 parameter_names=<?php  echo json_encode($emp_agewise_percentage_dist)?>;
Chart.defaults.global.pointHitDetectionRadius = 1;

		var customTooltips = function(tooltip) {
			// Tooltip Element
			var tooltipEl = document.getElementById('chartjs-tooltip');

			if (!tooltipEl) {
				tooltipEl = document.createElement('div');
				tooltipEl.id = 'chartjs-tooltip';
				tooltipEl.innerHTML = '<table></table>';
				this._chart.canvas.parentNode.appendChild(tooltipEl);
			}

			// Hide if no tooltip
			if (tooltip.opacity === 0) {
				tooltipEl.style.opacity = 0;
				return;
			}

			// Set caret Position
			tooltipEl.classList.remove('above', 'below', 'no-transform');
			if (tooltip.yAlign) {
				tooltipEl.classList.add(tooltip.yAlign);
			} else {
				tooltipEl.classList.add('no-transform');
			}

			function getBody(bodyItem) {
				return bodyItem.lines;
			}

			// Set Text
			if (tooltip.body) {
				var titleLines = tooltip.title || [];
				var bodyLines = tooltip.body.map(getBody);

				var innerHtml = '<thead>';

				titleLines.forEach(function(title) {
					innerHtml += '<tr><th>' + title + '</th></tr>';
				});
				innerHtml += '</thead><tbody>';

				bodyLines.forEach(function(body, i) {
					var colors = tooltip.labelColors[i];
					var style = 'background:' + colors.backgroundColor;
					style += '; border-color:' + colors.borderColor;
					style += '; border-width: 2px';
					var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
					innerHtml += '<tr><td>' + span + body + '</td></tr>';
				});
				innerHtml += '</tbody>';

				var tableRoot = tooltipEl.querySelector('table');
				tableRoot.innerHTML = innerHtml;
			}

			var positionY = this._chart.canvas.offsetTop;
			var positionX = this._chart.canvas.offsetLeft;

			// Display, position, and set styles for font
			tooltipEl.style.opacity = 1;
			tooltipEl.style.left = positionX + tooltip.caretX + 'px';
			tooltipEl.style.top = positionY + tooltip.caretY + 'px';
			tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
			tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
			tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
			tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
		};
 
 
		var barChartData = {
			labels: ['18-25 Age', '26-30 Age', '31-40 Age', '40-51 Age', '>50 Age',],
			datasets: [{
				label: 'Age Wise Percentage Distribution',
				backgroundColor: window.chartColors.green,
				borderColor: window.chartColors.red,
				borderWidth: 1,
				data: parameter_names,
			}]

		};


			var ctx1 = document.getElementById('chart3');
		var chart = new Chart(ctx1, {
				type: 'bar',
				data: barChartData,
				 options: {
		 title: {
						display: true,
						text: 'Age Wise Percentage Distribution',
					},
					tooltips: {
						callbacks: {
                label: function(tooltipItems, data) {
                    return data.datasets[tooltipItems.datasetIndex].label +':' + tooltipItems.yLabel + ' %';
                }
            },
						enabled: true,
						mode: 'index',
						position: 'nearest',
						custom: customTooltips
					},
					legend:{
						display:true,
						position: 'bottom',
					},
        scales: {
            yAxes: [{
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return  value +' %';
                    }
                }
            }]
        }
    }
			});

 function getSubBusinnessUnit(){
	 
	 
	 
	 
 }
 
$('#startDate1').datepicker( {
    format: "mm-yyyy",
    viewMode: "months", 
    minViewMode: "months"
});
$('#endDate1').datepicker( {
    format: "mm-yyyy",
    viewMode: "months", 
    minViewMode: "months"
});

</script>