929 lines
35 KiB
PHP
929 lines
35 KiB
PHP
<?php include('techsyn_header.php');
|
|
//print_r($_SESSION);
|
|
?>
|
|
<link rel="stylesheet" href="css/wizard.css">
|
|
<script src="js/Chart.min.js"></script>
|
|
<style type="text/css">
|
|
.hidden-radio {
|
|
position: absolute;
|
|
top: 11px;
|
|
left: 27px;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 100%;
|
|
background: #fff;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<?php /* if($_SESSION['RoleId']==7){echo "<script>window.location.replace('emp_details.php')</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>
|
|
</ul>
|
|
</div>
|
|
<!-- End of breadcrumb -->
|
|
<div class="page-content">
|
|
<form id="medical_form">
|
|
<div class="row">
|
|
|
|
<div class="col-sm-9 col-sm-offset-2 wizard-card">
|
|
|
|
<div class="col-sm-4">
|
|
<div class="choice" data-toggle="wizard-radio" rel="tooltip" title=""
|
|
data-original-title="Injury">
|
|
<input type="radio" name="task" value="pre_employment">
|
|
<div class="icon bg-yellow">
|
|
<i class="ace-icon fa fa-stethoscope"></i>
|
|
</div>
|
|
<h6>
|
|
<span class="info-box-text"> Health Surveillance</span> <span
|
|
class="info-box-number">
|
|
<? echo getPending_Medical_HealthSurvellianceCount(); ?>/<?= getTodayHealthSurvellianceCount(); ?>
|
|
<small>Cases</small>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-sm-5">
|
|
<div class="choice" data-toggle="wizard-radio" rel="tooltip" title=""
|
|
data-original-title="Injury">
|
|
<input type="radio" name="task" value="direct_test_lab">
|
|
<div class="icon bg-red">
|
|
<i class="ace-icon fa fa-stethoscope"></i>
|
|
</div>
|
|
<h6>
|
|
<span class="info-box-text">DIRECT TEST</span> <span class="info-box-number">
|
|
<? echo getTodayLabSurvellianceCount(); ?>
|
|
<small>Cases</small>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- /.row -->
|
|
<div class="row">
|
|
<div class="col-sm-6 " style="padding-top: 30px;margin-left: 10px">
|
|
<div class="box box-success ">
|
|
<div class="box-header box-header-flat">
|
|
<h5 class="box-title lighter">
|
|
<a role="button" data-toggle="collapse" href="#collapse_check3"
|
|
aria-expanded="false" aria-controls="collapseOne">
|
|
NOTICES
|
|
</a>
|
|
|
|
</h5>
|
|
</div>
|
|
<div id="collapse_check3" class="panel-collapse collapse">
|
|
|
|
<?php include 'notice_details_dashboard_card.php'; ?>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-sm-5 " style="padding-top: 30px;">
|
|
<div class="box box-success ">
|
|
<div class="box-header box-header-flat">
|
|
<h5 class="box-title lighter">
|
|
<a role="button" data-toggle="collapse" href="#collapse_check8"
|
|
aria-expanded="false" aria-controls="collapseOne">
|
|
MEDICAL EXAMINATION PENDING
|
|
</a>
|
|
|
|
</h5>
|
|
</div>
|
|
<div id="collapse_check8" class="panel-collapse collapse">
|
|
|
|
<?php include 'due_examination_date_dashboard.php'; ?>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- /.row -->
|
|
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-sm-8" style="padding-top: 30px;">
|
|
<div class="box box-success ">
|
|
<div class="box-header box-header-flat">
|
|
<h5 class="box-title lighter">
|
|
<a role="button" data-toggle="collapse" href="#collapse_check6"
|
|
aria-expanded="false" aria-controls="collapseOne">
|
|
MEDICAL EXAMINATION
|
|
</a>
|
|
|
|
|
|
</h5>
|
|
<hr>
|
|
<form action="" id="exceldata">
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
<label for="">Start Date</label>
|
|
<input class="form-control date-picker" style="width:auto" id="startDate"
|
|
name="startDate"
|
|
value="<?= date('d-m-Y', strtotime(date("d-m-Y") . ' -7 days')) ?>"
|
|
type=" text" data-date-format="dd-mm-yyyy" />
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-3">
|
|
<label for="">End Date</label>
|
|
<input class="form-control date-picker" style="width:auto" id="endDate"
|
|
name="endDate" value="<?= date("d-m-Y") ?>" type=" text"
|
|
data-date-format="dd-mm-yyyy" />
|
|
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<label for="pat_cat">Category</label>
|
|
<select name="pat_cat" id="pat_cat" class="form-control">
|
|
<option value="" selected disabled>--select--</option>
|
|
<?php echo generateOption('patient_category','patient_cat_name','patient_cat_id','','') ?>
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<button type="button" class="btn btn-success" id="mybtn"
|
|
onclick="getMedicalDate();">Go</button>
|
|
</div>
|
|
|
|
<div class="col-sm-2">
|
|
<button type="button" data-toggle="tooltip" data-placement="top"
|
|
title="Download Excel" class="btn btn-primary" id="mybtn"
|
|
onclick="getExcel();"><i class="fa fa-download"
|
|
aria-hidden="true"></i></button>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
<div id="collapse_check6" class="panel-collapse collapse" style="height:60vh;">
|
|
<canvas id="medicalExamChart"></canvas>
|
|
|
|
</canvas>
|
|
<?php include 'chart_medical_exam.php'; ?>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.page-content -->
|
|
</div>
|
|
</div>
|
|
<!-- /.main-content -->
|
|
</div>
|
|
<?php include('techsyn_footer.php'); ?>
|
|
<script type="text/javascript">
|
|
function getMedicalDate() {
|
|
var start_date = $("#startDate").val();
|
|
var end_date = $("#endDate").val();
|
|
var pat_cat = $("#pat_cat").val();
|
|
document.querySelector("#collapse_check6").innerHTML = '<canvas id="medicalExamChart"></canvas>';
|
|
$.ajax({
|
|
type: 'post',
|
|
url: 'chart_medical_exam_datewise.php',
|
|
data: {
|
|
start_date: start_date,
|
|
end_date: end_date,
|
|
pat_cat: pat_cat
|
|
},
|
|
dataType: 'json',
|
|
success: function(Mdata) {
|
|
|
|
var ctx = document.getElementById('medicalExamChart').getContext('2d');
|
|
var chartData = Mdata['checkup_data'];
|
|
var xaxis = Mdata['medical_exam_name']
|
|
|
|
var colors = [];
|
|
for (var i = 0; i < chartData.length; i++) {
|
|
colors.push("#" + Math.floor(Math.random() * 16777215).toString(16));
|
|
}
|
|
var dataset = [];
|
|
// for (var i = 0; i < chartData.length; i++) {
|
|
dataset.push({
|
|
label: "count",
|
|
data: chartData,
|
|
borderColor: colors,
|
|
backgroundColor: colors,
|
|
fill: false,
|
|
});
|
|
// }
|
|
|
|
var data = {
|
|
labels: xaxis,
|
|
datasets: dataset
|
|
}
|
|
var myChart = new Chart(ctx, {
|
|
type: 'horizontalBar',
|
|
data: data,
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
precision: 0,
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
error: function(date) {
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
function getInjuryData() {
|
|
var start_date = $("#startDateInjury").val();
|
|
var end_date = $("#endDateInjury").val();
|
|
|
|
document.querySelector("#collapse_check7").innerHTML = '<canvas id="chart_monthly_injury"></canvas>';
|
|
$.ajax({
|
|
type: 'post',
|
|
url: 'chart_injury_datewise.php',
|
|
data: {
|
|
start_date: start_date,
|
|
end_date: end_date
|
|
},
|
|
dataType: 'json',
|
|
success: function(Mdata) {
|
|
var ctx = document.getElementById('chart_monthly_injury').getContext('2d');
|
|
var chartData = Mdata['injury_data'];
|
|
var xaxis = Mdata['injury_class_name']
|
|
|
|
|
|
var colors = [];
|
|
for (var i = 0; i < chartData.length; i++) {
|
|
colors.push("#" + Math.floor(Math.random() * 16777215).toString(16));
|
|
}
|
|
var dataset = [];
|
|
// for (var i = 0; i < chartData.length; i++) {
|
|
dataset.push({
|
|
label: "count",
|
|
data: chartData,
|
|
borderColor: colors,
|
|
backgroundColor: colors,
|
|
fill: false,
|
|
});
|
|
// }
|
|
|
|
var data = {
|
|
labels: xaxis,
|
|
datasets: dataset
|
|
}
|
|
var myChart = new Chart(ctx, {
|
|
type: 'horizontalBar',
|
|
data: data,
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
precision: 0,
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
},
|
|
error: function(date) {
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
function getExcel() {
|
|
|
|
$("#exceldata").attr('method', 'POST');
|
|
$("#exceldata").attr('target', '_blank');
|
|
$("#exceldata").attr('action', 'medical_examination_excel.php');
|
|
$("#exceldata").submit();
|
|
}
|
|
|
|
function getInjuryExcel() {
|
|
|
|
$("#excelinjurydata").attr('method', 'POST');
|
|
$("#excelinjurydata").attr('target', '_blank');
|
|
$("#excelinjurydata").attr('action', 'injury_type_excel.php');
|
|
$("#excelinjurydata").submit();
|
|
}
|
|
|
|
|
|
jQuery(function($) {
|
|
$('.easy-pie-chart.percentage').each(function() {
|
|
var $box = $(this).closest('.infobox');
|
|
var barColor = $(this).data('color') || (!$box.hasClass('infobox-dark') ? $box.css('color') :
|
|
'rgba(255,255,255,0.95)');
|
|
var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)' : '#E2E2E2';
|
|
var size = parseInt($(this).data('size')) || 50;
|
|
$(this).easyPieChart({
|
|
barColor: barColor,
|
|
trackColor: trackColor,
|
|
scaleColor: false,
|
|
lineCap: 'butt',
|
|
lineWidth: parseInt(size / 10),
|
|
animate: ace.vars['old_ie'] ? false : 1000,
|
|
size: size
|
|
});
|
|
})
|
|
$('.sparkline').each(function() {
|
|
var $box = $(this).closest('.infobox');
|
|
var barColor = !$box.hasClass('infobox-dark') ? $box.css('color') : '#FFF';
|
|
$(this).sparkline('html', {
|
|
tagValuesAttribute: 'data-values',
|
|
type: 'bar',
|
|
barColor: barColor,
|
|
chartRangeMin: $(this).data('min') || 0
|
|
});
|
|
});
|
|
//flot chart resize plugin, somehow manipulates default browser resize event to optimize it!
|
|
//but sometimes it brings up errors with normal resize event handlers
|
|
$.resize.throttleWindow = false;
|
|
var placeholder = $('#piechart-placeholder').css({
|
|
'width': '98%',
|
|
'min-height': '300px'
|
|
});
|
|
|
|
function drawPieChart(placeholder, data, position) {
|
|
$.plot(placeholder, data, {
|
|
series: {
|
|
pie: {
|
|
show: true,
|
|
tilt: 0.8,
|
|
highlight: {
|
|
opacity: 0.25
|
|
},
|
|
stroke: {
|
|
color: '#fff',
|
|
width: 2
|
|
},
|
|
startAngle: 2
|
|
}
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: position || "ne",
|
|
labelBoxBorderColor: null,
|
|
margin: [-30, 15]
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true
|
|
}
|
|
})
|
|
}
|
|
var data = Array();
|
|
$(document).ready(function() {
|
|
//loadChartData(30);
|
|
});
|
|
|
|
function loadChartData(days) {
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "select_mostused_item.php?days=" + days,
|
|
cache: false,
|
|
dataType: "json",
|
|
success: function(returnData) {
|
|
console.log(returnData);
|
|
data = returnData;
|
|
// drawPieChart(placeholder, data);
|
|
/**
|
|
we saved the drawing function and the data to redraw with different position later when switching to RTL mode dynamically
|
|
so that's not needed actually.
|
|
*/
|
|
placeholder.data('chart', data);
|
|
placeholder.data('draw', drawPieChart);
|
|
},
|
|
error: function(returnData) {
|
|
console.log('error' + returnData);
|
|
}
|
|
})
|
|
}
|
|
//pie chart tooltip example
|
|
var $tooltip = $("<div class='tooltip top in'><div class='tooltip-inner'></div></div>").hide().appendTo(
|
|
'body');
|
|
var previousPoint = null;
|
|
placeholder.on('plothover', function(event, pos, item) {
|
|
if (item) {
|
|
if (previousPoint != item.seriesIndex) {
|
|
previousPoint = item.seriesIndex;
|
|
var tip = item.series['label'] + " : " + item.series['percent'].toFixed(2) + '%';
|
|
$tooltip.show().children(0).text(tip);
|
|
}
|
|
$tooltip.css({
|
|
top: pos.pageY + 10,
|
|
left: pos.pageX + 10
|
|
});
|
|
} else {
|
|
$tooltip.hide();
|
|
previousPoint = null;
|
|
}
|
|
});
|
|
/* var data = [
|
|
{ label: "social networks", data: 38.7, color: "#68BC31"},
|
|
{ label: "search engines", data: 24.5, color: "#2091CF"},
|
|
{ label: "ad campaigns", data: 8.2, color: "#AF4E96"},
|
|
{ label: "direct traffic", data: 18.6, color: "#DA5430"},
|
|
{ label: "other", data: 10, color: "#FEE074"}
|
|
]*/
|
|
/////////////////////////////////////
|
|
$(document).one('ajaxloadstart.page', function(e) {
|
|
$tooltip.remove();
|
|
});
|
|
var d1 = [];
|
|
for (var i = 0; i < Math.PI * 2; i += 0.5) {
|
|
d1.push([i, Math.sin(i)]);
|
|
}
|
|
var d2 = [];
|
|
for (var i = 0; i < Math.PI * 2; i += 0.5) {
|
|
d2.push([i, Math.cos(i)]);
|
|
}
|
|
var d3 = [];
|
|
for (var i = 0; i < Math.PI * 2; i += 0.2) {
|
|
d3.push([i, Math.tan(i)]);
|
|
}
|
|
//Android's default browser somehow is confused when tapping on label which will lead to dragging the task
|
|
//so disable dragging when clicking on label
|
|
var agent = navigator.userAgent.toLowerCase();
|
|
if (ace.vars['touch'] && ace.vars['android']) {
|
|
$('#tasks').on('touchstart', function(e) {
|
|
var li = $(e.target).closest('#tasks li');
|
|
if (li.length == 0) return;
|
|
var label = li.find('label.inline').get(0);
|
|
if (label == e.target || $.contains(label, e.target)) e.stopImmediatePropagation();
|
|
});
|
|
}
|
|
})
|
|
$(".choice").on("click", function() {
|
|
var v = $(this).closest("div").find("input[name='task']").attr("checked", "checked");
|
|
task = $(this).closest("div").find("input[name='task']").val()
|
|
$("#medical_form").attr('method', 'POST');
|
|
if (task == 'pre_employment') {
|
|
// $("#medical_form").attr('action', 'pending_medical_examination_list.php');
|
|
$("#medical_form").attr('action', 'add_select_patient.php');
|
|
}
|
|
if (task == 'opd') {
|
|
$("#medical_form").attr('action', 'add_select_patient.php');
|
|
}
|
|
if (task == 'peme') {
|
|
$("#medical_form").attr('action', 'add_select_patient.php');
|
|
}
|
|
if (task == 'peme_short') {
|
|
$("#medical_form").attr('action', 'add_select_patient.php');
|
|
}
|
|
if (task == 'pohc_half') {
|
|
$("#medical_form").attr('action', 'add_select_patient.php');
|
|
}
|
|
if (task == 'pohc') {
|
|
$("#medical_form").attr('action', 'add_select_patient.php');
|
|
}
|
|
if (task == 'eye_check') {
|
|
$("#medical_form").attr('action', 'add_select_patient.php');
|
|
}
|
|
if (task == 'foodhand_exam') {
|
|
$("#medical_form").attr('action', 'add_select_patient.php');
|
|
}
|
|
if (task == 'covid') {
|
|
$("#medical_form").attr('action', 'add_select_patient.php');
|
|
}
|
|
if (task == 'ffi') {
|
|
$("#medical_form").attr('action', 'add_select_patient.php');
|
|
}
|
|
if (task == 'chs') {
|
|
$("#medical_form").attr('action', 'add_select_canteen.php');
|
|
}
|
|
if (task == 'khs') {
|
|
$("#medical_form").attr('action', 'add_select_kitchen.php');
|
|
}
|
|
if (task == 'dlf') {
|
|
$("#medical_form").attr('action', 'add_select_patient.php');
|
|
}
|
|
if (task == 'mcovid') {
|
|
$("#medical_form").attr('action', 'covid_monitoring.php');
|
|
}
|
|
if (task == 'direct_test_lab') {
|
|
$("#medical_form").attr('action', 'add_select_patient.php');
|
|
}
|
|
$("#medical_form").submit();
|
|
});
|
|
</script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// $(".choice").on("click", function () {
|
|
// var v = $(this).closest("div").find("input[name='task']").attr("checked","checked");
|
|
// if(v.val()=='visitor_opd'){
|
|
// $("#reception_form").attr('action', 'visitor_add_select_patient.php');
|
|
// }else{
|
|
// $("#reception_form").attr('action', 'add_select_patient.php');
|
|
// }
|
|
// $("#reception_form").attr('method', 'POST');
|
|
// $("#reception_form").submit();
|
|
// });
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: 'covid_case_weekly_trends.php',
|
|
data: $("#reception_form").serialize(),
|
|
dataType: 'json',
|
|
success: function(data) {
|
|
if (data != null) {
|
|
var labels = [];
|
|
var percentage_bmi_total_array = [];
|
|
var total_emp = 0;
|
|
var total_emp_sum = 0;
|
|
var bmi_total_sum = 0;
|
|
var percentage_bmi_total = 0.0;
|
|
// @var confirm_case - get the total confirm case
|
|
// @var quarantine_case - get the total quarantine case
|
|
// @var discharge - get the total discharge patient
|
|
var confirm_case = 0;
|
|
var quarantine_case = 0;
|
|
var discharge = 0;
|
|
if (Object.keys(data).length > 0) {
|
|
for (var i = 0; i < Object.keys(data).length; i++) {
|
|
total_emp = parseInt(data[i].week);
|
|
total_emp_sum = total_emp_sum + total_emp;
|
|
confirm_case += parseInt(data[i].confirm_case);
|
|
quarantine_case += parseInt(data[i].quarantine_case);
|
|
discharge += parseInt(data[i].discharge);
|
|
var bmi_total = parseInt(data[i].todays_case);
|
|
bmi_total_sum += bmi_total;
|
|
var j = 0;
|
|
labels[i] = 'Week:' + data[i].week;
|
|
if (total_emp != 0 && total_emp != null) {
|
|
percentage_bmi_total = (bmi_total / data[i].total_active) * 100;
|
|
// if(data[i].confirm_case == ''){
|
|
// percentage_bmi_total_array.push([0, data[i].quarantine_case, data[i].discharge]);
|
|
// } else if(data[i].quarantine_case == ''){
|
|
// percentage_bmi_total_array.push([data[i].confirm_case, 0, data[i].discharge]);
|
|
// }else {
|
|
// }
|
|
percentage_bmi_total_array.push([data[i].confirm_case, data[i]
|
|
.quarantine_case, data[i].discharge
|
|
]);
|
|
} else {
|
|
percentage_bmi_total = "Not Available";
|
|
}
|
|
}
|
|
}
|
|
var total_percentage = "";
|
|
if (total_emp_sum == 0) {
|
|
total_percentage = "Not Available";
|
|
} else {
|
|
total_percentage = (bmi_total_sum / total_emp_sum) * 100;
|
|
}
|
|
var content1 =
|
|
"<canvas id=\"chart3\" style=\"display: block; width: 500px; height: 250px;\" class=\"chartjs-render-monitor\"></canvas>";
|
|
$("#covid_weekly_report").html(content1);
|
|
var header = "Covid Case Weekly Trends";
|
|
percentage_bmi_total_array[Object.keys(data).length] = ['Confirmed Case',
|
|
'Quarantine Case', 'Discharged'
|
|
]
|
|
// console.log('array length in weekly trends: '+percentage_bmi_total_array[Object.keys(data).length]+'lenth '+Object.keys(data).length);
|
|
prepareChart('line', percentage_bmi_total_array, labels, header);
|
|
}
|
|
},
|
|
error: function(data) {}
|
|
});
|
|
// $.ajax({
|
|
// type:'POST',
|
|
// url:'covid_active_vs_new_cases.php',
|
|
// data:$("#reception_form").serialize(),
|
|
// dataType:'json',
|
|
// success:function(data){
|
|
// if(data!=null){
|
|
// var labels=[];
|
|
// var percentage_bmi_total_array = [];
|
|
// var total_emp=0;
|
|
// var total_emp_sum=0;
|
|
// var bmi_total_sum=0;
|
|
// var percentage_bmi_total=0.0;
|
|
// if(Object.keys(data).length>0){
|
|
// for(var i=0;i<Object.keys(data).length;i++){
|
|
// total_emp=parseInt(data[i].date);
|
|
// total_emp_sum=total_emp_sum+total_emp;
|
|
// var bmi_total= parseInt(data[i].todays_case);
|
|
// bmi_total_sum+=bmi_total;
|
|
// var j = 0;
|
|
// labels[i]=data[i].date;
|
|
// if(total_emp!=0 && total_emp!=null){
|
|
// percentage_bmi_total_array.push([data[i].total_case, data[i].todays_case]);
|
|
// }else{
|
|
// percentage_bmi_total="Not Available";
|
|
// }
|
|
// }
|
|
// }
|
|
// console.log('total array; before label: '+percentage_bmi_total_array+" length is "+percentage_bmi_total_array.length);
|
|
// var total_percentage="";
|
|
// if(total_emp_sum==0){
|
|
// total_percentage="Not Available";
|
|
// }else{
|
|
// total_percentage=(bmi_total_sum/total_emp_sum)*100;
|
|
// }
|
|
// var content1="<canvas id=\"chart3\" style=\"display: block; width: 500px; height: 250px;\" class=\"chartjs-render-monitor\"></canvas>";
|
|
// $("#covid_daily_report").html(content1);
|
|
// var header="Covid Active Vs New Cases";
|
|
// // console.log('line chart array data: '+percentage_bmi_total_array);
|
|
// percentage_bmi_total_array.push(['Total Case', 'New Case']);
|
|
// prepareChart('line',percentage_bmi_total_array,labels,header);
|
|
// }
|
|
// } ,
|
|
// error:function(data){
|
|
// }
|
|
// });
|
|
});
|
|
</script>
|
|
<script>
|
|
function prepareChart(chartType, chartData, labels, header) {
|
|
try{
|
|
var color = Chart.helpers.color;
|
|
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';
|
|
};
|
|
if (chartType == 'bar') {
|
|
var data = chartData;
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
backgroundColor: window.chartColors.green,
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
} else if (chartType == 'doughnut') {
|
|
var data = chartData;
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: header,
|
|
backgroundColor: [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'#003f5c',
|
|
'58508d',
|
|
'#2f4b7c',
|
|
'#665191',
|
|
'#a05195',
|
|
'#d45087',
|
|
'#f95d6a',
|
|
'#ff7c43',
|
|
'#ffa600',
|
|
],
|
|
borderColor: window.chartColors.white,
|
|
borderWidth: 1,
|
|
data: chartData,
|
|
hoverOffset: 4
|
|
}]
|
|
};
|
|
} else if (chartType == 'line') {
|
|
var data = chartData;
|
|
console.log('chart data: ' + chartData[0]);
|
|
// get the dataset label names count
|
|
var dataset_labels_count = chartData[(chartData.length) - 1].length;
|
|
var lc_data = [];
|
|
var lc_label = [];
|
|
var j = 0;
|
|
for (var i = 0; i < chartData.length; i++) {
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
|
lc_label[j] = chartData[i][j];
|
|
}
|
|
}
|
|
// for (var i = 0; i < dataset_labels_count; i++) {
|
|
// for(var j = 0; j < chartData.length; j++){
|
|
// console.log("chart Data: "+chartData[j][i]);
|
|
// lc_data[i][j] = chartData[j][i];
|
|
// }
|
|
// }
|
|
for (var i = 0; i < data.length - 1; i++) {
|
|
for (var j = 0; j < i; j++) {
|
|
const tmp = data[i][j];
|
|
data[i][j] = data[j][i];
|
|
data[j][i] = tmp;
|
|
}
|
|
}
|
|
console.log('labels: ' + lc_label);
|
|
console.log('data: ' + data[1]);
|
|
const background_color = [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(255, 205, 86)',
|
|
'#003f5c',
|
|
'58508d',
|
|
'#2f4b7c',
|
|
'#665191',
|
|
'#a05195',
|
|
'#d45087',
|
|
'#f95d6a',
|
|
'#ff7c43',
|
|
'#ffa600',
|
|
];
|
|
var datasets_array = []
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
|
datasets_array.push({
|
|
label: lc_label[j],
|
|
data: data[j],
|
|
borderColor: background_color[j]
|
|
});
|
|
}
|
|
var barChartData = {
|
|
labels: labels,
|
|
datasets: datasets_array
|
|
};
|
|
}
|
|
if (chartType == 'line') {
|
|
var ctx1 = document.getElementById("chart3").getContext("2d");
|
|
chart = new Chart(ctx1, {
|
|
type: chartType,
|
|
data: barChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
var label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', {
|
|
style: 'percent',
|
|
currency: 'USD'
|
|
}).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
},
|
|
enabled: true,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
precision: 0,
|
|
// Include a dollar sign in the ticks
|
|
callback: function(value, index, values) {
|
|
return value + '';
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
var ctx1 = document.getElementById("chart3").getContext("2d");
|
|
chart = new Chart(ctx1, {
|
|
type: chartType,
|
|
data: barChartData,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: header,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
var label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('en-US', {
|
|
style: 'percent',
|
|
currency: 'USD'
|
|
}).format(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
},
|
|
enabled: true,
|
|
mode: 'index',
|
|
position: 'nearest',
|
|
custom: customTooltips
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
precision: 0,
|
|
// Include a dollar sign in the ticks
|
|
callback: function(value, index, values) {
|
|
return value + '%';
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}catch(e){
|
|
console.log(e);
|
|
}
|
|
// chart.destroy();
|
|
}
|
|
</script>
|