461 lines
10 KiB
PHP
461 lines
10 KiB
PHP
|
|
|
|
<style>
|
|
#modal-add-hygiene {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.modal-dialog {
|
|
padding: 15px;
|
|
width: 50%;
|
|
}
|
|
</style>
|
|
<div class="modal fade" id="modal-add-emp-hygiene_view"
|
|
name="modal-add-emp-hygiene_view" role="dialog" aria-hidden="true">
|
|
<form role="form" id="emp_hyg_checkup_form1"
|
|
name="emp_hyg_checkup_form1" action="#" method="post">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="widget-header">
|
|
<h5 class="widget-title">Employee Hygiene Checkup</h5>
|
|
<div class="widget-toolbar">
|
|
<div class="widget-menu">
|
|
<a href="#" class="close" data-action="close"
|
|
data-dismiss="modal"> <i class="ace-icon fa fa-times"></i>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
|
|
|
|
<div class="form-group col-sm-6">
|
|
<label for="hygieneParameter">Employee</label>
|
|
<div id="empName1" name="empName1"></div>
|
|
<input type="hidden" class="form-control" name="hyg_check_id"
|
|
id="hyg_check_id" required />
|
|
</div>
|
|
|
|
<div class="form-group col-sm-6">
|
|
<label for="currentValue">Checkup Date</label>
|
|
<div class="input-group">
|
|
<div name="CheckupDate1" id="CheckupDate1"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
|
<div class="panel-body" style="padding: 0px;">
|
|
<input type="hidden" name="parameterRow" id="parameterRow"
|
|
value="0">
|
|
<table class="table table-bordered table-hover"
|
|
id="hygieneParameterTable1">
|
|
<tr class="active">
|
|
<th width="10%">Sr</th>
|
|
<th width="40%">Hygiene Parameter</th>
|
|
<th width="40%">Result</th>
|
|
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="modal-body">
|
|
<div class="widget-header">
|
|
<h5 class="widget-title">History</h5>
|
|
</div>
|
|
<div class="row">
|
|
|
|
|
|
<div class="form-group col-sm-12">
|
|
<input type="hidden" name="empHistoryRow" id="empHistoryRow"
|
|
value="0">
|
|
|
|
|
|
|
|
<table class="table table-bordered table-hover"
|
|
id="empHistoyTable1">
|
|
<tr class="active">
|
|
<th width="5%">Sr</th>
|
|
<th width="30%">Checkup Date</th>
|
|
<th width="30%">Hygiene Parameter</th>
|
|
<th width="30%">Result</th>
|
|
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12" style="padding-top: 30px">
|
|
<div class="widget-box transparent">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="widget-body">
|
|
<div class="widget-main no-padding">
|
|
<div id="canvas-holder1" 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="chart"
|
|
style="display: block; width: 1013px; height: 506px;"
|
|
width="1013" height="506" class="chartjs-render-monitor"></canvas>
|
|
<div id="chartjs-tooltip" class="center"
|
|
style="opacity: 0; left: 527.674px; top: 88.722px; font-family: & amp; amp; quot; Helvetica Neue&amp; amp; quot; , Helvetica , Arial, sans-serif; font-size: 12px; font-style: normal; padding: 6px;">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>April</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="chartjs-tooltip-key"
|
|
style="background: rgb(255, 61, 103); border-color: rgb(255, 61, 103); border-width: 2px"></span>My
|
|
First dataset: 93</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="chartjs-tooltip-key"
|
|
style="background: rgb(5, 155, 255); border-color: rgb(5, 155, 255); border-width: 2px"></span>My
|
|
Second dataset: 2</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<!-- /.widget-main -->
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- /.widget-box -->
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- PAGE CONTENT ENDS -->
|
|
</div>
|
|
<!-- /.widget-box -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script async="" src="./js/analytics.js"></script>
|
|
<script src="./js/Chart.min.js"></script>
|
|
<script src="./js/utils.js"></script>
|
|
<script>
|
|
|
|
|
|
var myData=[];
|
|
var mylabels=[];
|
|
var iron = [];
|
|
var Zinc=[];
|
|
var carbon_mono_oxide=[];
|
|
var calcium=[];
|
|
var Sodium=[];
|
|
|
|
|
|
function select_hyg_param(emp_id) {
|
|
|
|
myData=[];
|
|
mylabels=[];
|
|
iron = [];
|
|
Zinc=[];
|
|
carbon_mono_oxide=[];
|
|
calcium=[];
|
|
Sodium=[];
|
|
|
|
$.ajax({
|
|
type:'get',
|
|
url:'select_emp_hygiene_graph.php',
|
|
data:{'emp_id':emp_id},
|
|
dataType:'json',
|
|
async:false,
|
|
success:function(data){
|
|
for(var i=0;i<data.length;i++){
|
|
if(data[i].hygiene_parameter=='Zinc'){
|
|
myData.push(parseFloat(data[i].checkup_form_value));
|
|
mylabels.push(data[i].checkup_date);
|
|
}else if(data[i].hygiene_parameter=='Sodium'){
|
|
Sodium.push(parseFloat(data[i].checkup_form_value));
|
|
mylabels.push(data[i].checkup_date);
|
|
}
|
|
else if(data[i].hygiene_parameter=='Iron'){
|
|
iron.push(parseFloat(data[i].checkup_form_value));
|
|
mylabels.push(data[i].checkup_date);
|
|
}
|
|
else if(data[i].hygiene_parameter=='Carbon mono oxide'){
|
|
carbon_mono_oxide.push(parseFloat(data[i].checkup_form_value));
|
|
mylabels.push(data[i].checkup_date);
|
|
}
|
|
else if(data[i].hygiene_parameter=='calcium'){
|
|
calcium.push(parseFloat(data[i].checkup_form_value));
|
|
mylabels.push(data[i].checkup_date);
|
|
}
|
|
}
|
|
},
|
|
error:function(data){
|
|
|
|
}
|
|
});
|
|
|
|
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 lineChartData = {
|
|
labels: mylabels,
|
|
datasets: [ {
|
|
label: ' Zinc',
|
|
data:myData,
|
|
borderColor: window.chartColors.blue,
|
|
pointBackgroundColor: window.chartColors.blue,
|
|
fill: false,
|
|
|
|
}, {
|
|
label: ' Iron',
|
|
data:iron,
|
|
borderColor: window.chartColors.green,
|
|
pointBackgroundColor: window.chartColors.green,
|
|
fill: false,
|
|
|
|
} , {
|
|
label: 'CO3',
|
|
data:carbon_mono_oxide,
|
|
borderColor: window.chartColors.red,
|
|
pointBackgroundColor: window.chartColors.red,
|
|
fill: false,
|
|
|
|
}, {
|
|
label: 'Calcium',
|
|
data:calcium,
|
|
borderColor: window.chartColors.yellow,
|
|
pointBackgroundColor: window.chartColors.yellow,
|
|
fill: false,
|
|
|
|
}, {
|
|
label: 'Sodium',
|
|
data:Sodium,
|
|
borderColor: window.chartColors.grey,
|
|
pointBackgroundColor: window.chartColors.grey,
|
|
fill: false,
|
|
|
|
}
|
|
|
|
]
|
|
};
|
|
|
|
//window.onload = function() {
|
|
var chartEl = document.getElementById('chart');
|
|
window.myLine = new Chart(chartEl, {
|
|
type: 'line',
|
|
data: lineChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: 'Hygiene Parameter'
|
|
},
|
|
tooltips: {
|
|
enabled: false,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend:{
|
|
display:true,
|
|
position: 'bottom',
|
|
},
|
|
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
<style>
|
|
.btn.btn-app.btn-sm {
|
|
width: 110px
|
|
}
|
|
|
|
.btn-xl {
|
|
width: 120px !important;
|
|
height: 100px;
|
|
}
|
|
|
|
.btn-xxl {
|
|
width: 170px !important;
|
|
height: 100px;
|
|
}
|
|
|
|
.label-xs {
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
.label-xs-header {
|
|
font-size: 10px !important;
|
|
text-align: left;
|
|
margin-left: 0px;
|
|
padding-left: 0px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.profile-info-name {
|
|
font-size: 10px !important;
|
|
text-align: left;
|
|
width: 35%;
|
|
}
|
|
|
|
.profile-info-value {
|
|
font-size: 10px !important;
|
|
text-align: left;
|
|
width: 65%;
|
|
}
|
|
|
|
.widget-title {
|
|
font-size: 12px;
|
|
}
|
|
|
|
#panel-title2>a, #panel-title2>a:active {
|
|
display: block;
|
|
font-size: 12px;
|
|
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial,
|
|
sans-serif;
|
|
color: #337ab7;
|
|
height: 10px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#panel-heading2 a:before {
|
|
font-family: 'Glyphicons Halflings';
|
|
content: "\e114";
|
|
float: right;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
#panel-heading2.active a:before {
|
|
-webkit-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
</style> |