ESH/opd_dashboard_analysis.php
2024-10-23 18:28:06 +05:30

828 lines
36 KiB
PHP

<?php include('techsyn_header.php'); ?>
<!-- Main Content Container for side bar and body-->
<script src="./js/analytics.js"></script>
<script src="./js/Chart.min.js"></script>
<script src="./js/utils.js"></script>
<div class="main-container ace-save-state" id="main-container">
<?php include('techsyn_sidebar.php'); ?>
<!--breadcrumb-->
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li class="#">Graphical Trends</li>
<li class="active">OPD Analysis</li>
</ul>
</div>
<!-- End of breadcrumb -->
<div class="page-content">
<div class="container-fluid">
<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_check5" aria-expanded="false" aria-controls="collapseOne">
Patient Categorywise Trend
</a>
</h5>
<hr>
<form action="" id="exceldata1">
<div class="row">
<div class="col-sm-4">
<label for="">Start Date</label>
<input class="form-control date-picker" style="width:auto" id="startDateCat" name="startDateCat" 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-4">
<label for="">End Date</label>
<input class="form-control date-picker" style="width:auto" id="endDateCat" name="endDateCat" value="<?= date("d-m-Y") ?>" type=" text" data-date-format="dd-mm-yyyy" />
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-success" id="mybtn" onclick="getOpdPatientCatData();">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="getExcelpatient();"><i class="fa fa-download" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
<div id="collapse_check5" class="panel-collapse collapse">
<canvas id="patCatChart"></canvas>
</canvas>
<?php include 'chart_patient_catwise.php'; ?>
</div>
</div>
</div>
<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">
Abnormality Trend
</a>
</h5>
<hr>
<form action="" id="exceldata2">
<div class="row">
<div class="col-sm-4">
<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-4">
<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">
<button type="button" class="btn btn-success" id="mybtn" onclick="getOpdData();">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="getAbnormalityTrend();"><i class="fa fa-download" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
<div id="collapse_check6" class="panel-collapse collapse">
<canvas id="opdAbnormalityChart"></canvas>
</canvas>
<?php include 'chart_opd.php'; ?>
</div>
</div>
</div>
<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_check7" aria-expanded="false" aria-controls="collapseOne">
Ailment System Trend
</a>
</h5>
<hr>
<form action="" id="exceldata3">
<div class="row">
<div class="col-sm-4">
<label for="">Start Date</label>
<input class="form-control date-picker" style="width:auto" id="startDateAilment" name="startDateAilment" 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-4">
<label for="">End Date</label>
<input class="form-control date-picker" style="width:auto" id="endDateAilment" name="endDateAilment" value="<?= date("d-m-Y") ?>" type=" text" data-date-format="dd-mm-yyyy" />
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-success" id="mybtn" onclick="getAilmentData1();">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="getAilmentSystemExcel();"><i class="fa fa-download" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
<div id="collapse_check7" class="panel-collapse collapse">
<canvas id="opdAilmentChart"></canvas>
</canvas>
<?php include 'chart_opd_ailment.php'; ?>
</div>
</div>
</div>
<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_check8" aria-expanded="false" aria-controls="collapseOne">
Ailment System Trend With Department
</a>
</h5>
<hr>
<form action="" id="exceldata4">
<div class="row">
<div class="col-sm-2">
<label for="">Start Date</label>
<input class="form-control date-picker" style="width:auto" id="startDateDept" name="startDateDept" 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="endDateDept" name="endDateDept" value="<?= date("d-m-Y") ?>" type=" text" data-date-format="dd-mm-yyyy" />
</div>
<div class="col-sm-3">
<label for="dept">Department</label>
<select name="dept_id" id="dept_id" class="form-control">
<option value="" selected disabled>--select department--</option>
<?php echo generateOption('department', 'dept_name', 'dept_id', '', ''); ?>
</select>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-success" id="mybtn" onclick="getAilmentDatawithdept();">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="getAilmentWithDeptData();"><i class="fa fa-download" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
<div id="collapse_check8" class="panel-collapse collapse">
<canvas id="opdAilmentDeptChart"></canvas>
</canvas>
<?php include 'chart_opd_ailment_with_department.php'; ?>
</div>
</div>
</div>
<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_check9" aria-expanded="false" aria-controls="collapseOne">
Abnormality Trend With Department
</a>
</h5>
<hr>
<form action="" id="exceldata5">
<div class="row">
<div class="col-sm-2">
<label for="">Start Date</label>
<input class="form-control date-picker" style="width:auto" id="startDateDeptAbn" name="startDateDeptAbn" 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="endDateDeptAbn" name="endDateDeptAbn" value="<?= date("d-m-Y") ?>" type=" text" data-date-format="dd-mm-yyyy" />
</div>
<div class="col-sm-3">
<label for="dept">Department</label>
<select name="dept_id_abn" id="dept_id_abn" class="form-control">
<option value="" selected disabled>--select department--</option>
<?php echo generateOption('department', 'dept_name', 'dept_id', '', ''); ?>
</select>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-success" id="mybtn" onclick="getAbnDeptData();">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="getAbnormalityTrendWithDept();"><i class="fa fa-download" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
<div id="collapse_check9" class="panel-collapse collapse">
<canvas id="opdAbnDeptChart"></canvas>
</canvas>
<?php include 'chart_opd_abnormality_with_department.php'; ?>
</div>
</div>
</div>
<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_check10" aria-expanded="false" aria-controls="collapseOne">
Top 10 Diagnosis Trend
</a>
<div id="SpinnerContainerRisk">
<img src="images/load.gif" id="SpinnerImage" title="loading..." class="loader" />
</div>
</h5>
<hr>
<form action="" id="exceldata">
<div class="row">
<div class="col-sm-4">
<label for="">Start Date</label>
<input class="form-control date-picker" style="width:auto" id="startDateDig" name="startDateDig" value="<?= date('d-m-Y', strtotime(date("d-m-Y") . ' -30 days')) ?>" type=" text" data-date-format="dd-mm-yyyy" />
</div>
<div class="col-sm-4">
<label for="">End Date</label>
<input class="form-control date-picker" style="width:auto" id="endDateDig" name="endDateDig" value="<?= date("d-m-Y") ?>" type=" text" data-date-format="dd-mm-yyyy" />
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-success" onclick="getDigData();">Go</button>
</div>
</div>
</form>
</div>
<div id="collapse_check10" class="panel-collapse collapse">
<canvas id="opdDiagChart"></canvas>
</canvas>
<?php include 'diagnosis_top_10_chart.php'; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.page-content -->
</div>
</div>
<!-- /.main-content -->
<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/css/jquery-ui.custom.min.css" />
<link rel="stylesheet" href="assets/css/chosen.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-datepicker3.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-timepicker.min.css" />
<link rel="stylesheet" href="assets/css/daterangepicker.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-colorpicker.min.css" />
<script type="text/javascript" src="js/typeahead.bundle.js"></script>
<script src="assets/js/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="assets/js/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
<script src="assets/js/chosen.jquery.min.js" type="text/javascript"></script>
<script src="assets/js/spinbox.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap-timepicker.min.js" type="text/javascript"></script>
<script src="assets/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="assets/js/jquery.dataTables.bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="assets/js/buttons.flash.min.js" type="text/javascript"></script>
<script src="assets/js/buttons.html5.min.js" type="text/javascript"></script>
<script src="assets/js/buttons.print.min.js" type="text/javascript"></script>
<script src="assets/js/buttons.colVis.min.js" type="text/javascript"></script>
<script src="assets/js/dataTables.select.min.js" type="text/javascript"></script>
<script src="assets/js/moment.min.js" type="text/javascript"></script>
<script src="assets/js/daterangepicker.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap-colorpicker.min.js" type="text/javascript"></script>
<script src="assets/js/jquery.knob.min.js" type="text/javascript"></script>
<script src="assets/js/autosize.min.js" type="text/javascript"></script>
<script src="assets/js/jquery.inputlimiter.min.js" type="text/javascript"></script>
<script src="assets/js/jquery.maskedinput.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap-tag.min.js" type="text/javascript"></script>
<script src="assets/js/ace-elements.min.js" type="text/javascript"></script>
<script>
$("#SpinnerContainerRisk").hide();
function getOpdPatientCatData() {
var start_date = $("#startDateCat").val();
var end_date = $("#endDateCat").val();
document.querySelector("#collapse_check5").innerHTML = '<canvas id="patCatChart"></canvas>';
$.ajax({
type: 'post',
url: 'chart_patient_catwise_datewise.php',
data: {
start_date: start_date,
end_date: end_date
},
dataType: 'json',
success: function(Mdata) {
var ctx = document.getElementById('patCatChart').getContext('2d');
var chartData = Mdata['checkup_data'];
var xaxis = Mdata['total_patient_cat']
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 getExcelpatient() {
document.forms['exceldata1'].action = "patient_categorywise_excel.php";
document.forms['exceldata1'].method = 'POST';
document.forms['exceldata1'].target = '_blank'
document.forms['exceldata1'].submit();
}
function getAbnormalityTrend() {
document.forms['exceldata2'].action = "abnormality_trend_excel.php";
document.forms['exceldata2'].method = 'POST';
document.forms['exceldata2'].target = '_blank'
document.forms['exceldata2'].submit();
}
function getAilmentSystemExcel() {
document.forms['exceldata3'].action = "ailment_system_excel.php";
document.forms['exceldata3'].method = 'POST';
document.forms['exceldata3'].target = '_blank'
document.forms['exceldata3'].submit();
}
function getAilmentWithDeptData() {
document.forms['exceldata4'].action = "ailment_system_with_dept_excel.php";
document.forms['exceldata4'].method = 'POST';
document.forms['exceldata4'].target = '_blank'
document.forms['exceldata4'].submit();
}
function getAbnormalityTrendWithDept() {
document.forms['exceldata5'].action = "abnormality_trend_with_dept_excel.php";
document.forms['exceldata5'].method = 'POST';
document.forms['exceldata5'].target = '_blank'
document.forms['exceldata5'].submit();
}
function getOpdData() {
var start_date = $("#startDate").val();
var end_date = $("#endDate").val();
document.querySelector("#collapse_check6").innerHTML = '<canvas id="opdAbnormalityChart"></canvas>';
$.ajax({
type: 'post',
url: 'chart_opd_datewise.php',
data: {
start_date: start_date,
end_date: end_date
},
dataType: 'json',
success: function(Mdata) {
var ctx = document.getElementById('opdAbnormalityChart').getContext('2d');
var chartData = Mdata['checkup_data'];
var xaxis = Mdata['total_abn_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 getAilmentData1() {
var start_date = $("#startDateAilment").val();
var end_date = $("#endDateAilment").val();
document.querySelector("#collapse_check7").innerHTML = '<canvas id="opdAilmentChart"></canvas>';
$.ajax({
type: 'post',
url: 'chart_opd_ailment_datewise.php',
data: {
start_date: start_date,
end_date: end_date
},
dataType: 'json',
success: function(Mdata) {
var ctx = document.getElementById('opdAilmentChart').getContext('2d');
var chartData = Mdata['checkup_data'];
var xaxis = Mdata['total_ailment_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 getAilmentDatawithdept() {
var start_date = $("#startDateDept").val();
var end_date = $("#endDateDept").val();
var dept_id = $("#dept_id").val();
console.log(start_date + " " + end_date + " " + dept_id);
document.querySelector("#collapse_check8").innerHTML = '<canvas id="opdAilmentDeptChart"></canvas>';
$.ajax({
type: 'post',
url: 'chart_opd_ailment_with_dept_datewise.php',
data: {
start_date: start_date,
end_date: end_date,
dept_id: dept_id
},
dataType: 'json',
success: function(Mdata) {
var ctx = document.getElementById('opdAilmentDeptChart').getContext('2d');
var chartData = Mdata['checkup_data'];
var xaxis = Mdata['total_ailment_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 getAbnDeptData() {
var start_date = $("#startDateDeptAbn").val();
var end_date = $("#endDateDeptAbn").val();
var dept_id = $("#dept_id_abn").val();
console.log(start_date + " " + end_date + " " + dept_id);
document.querySelector("#collapse_check9").innerHTML = '<canvas id="opdAbnDeptChart"></canvas>';
$.ajax({
type: 'post',
url: 'chart_opd_abnormality_with_dept_datewise.php',
data: {
start_date: start_date,
end_date: end_date,
dept_id: dept_id
},
dataType: 'json',
success: function(Mdata) {
var ctx = document.getElementById('opdAbnDeptChart').getContext('2d');
var chartData = Mdata['checkup_data'];
var xaxis = Mdata['total_abnormality_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 getDigData() {
var start_date = $("#startDateDig").val();
var end_date = $("#endDateDig").val();
$("#SpinnerContainerRisk").show();
document.querySelector("#collapse_check10").innerHTML = '<canvas id="opdDiagChart"></canvas>';
$.ajax({
type: 'post',
url: 'diagnosis_top_10_chart_datewise.php',
data: {
start_date: start_date,
end_date: end_date
},
dataType: 'json',
success: function(Mdata) {
console.log(Mdata['diag_name']);
var ctx = document.getElementById('opdDiagChart').getContext('2d');
var chartData = Mdata['checkup_data'];
// var xaxis = Mdata['diag_name']
for (var i = 0; i < Mdata['diag_name'].length; i++) {
xaxis[i] = Mdata['diag_name'][i];
}
console.log(xaxis);
// for (let i = 0; i < 7; i++) {
// xaxis[0][i] = (xaxis[0][i]);
// }
// console.log(xaxis[0]);
prepareChart('pie', chartData, xaxis, "Top 10 Diagnosis Trend");
$("#SpinnerContainerRisk").hide();
},
error: function(date) {
$("#SpinnerContainerRisk").hide();
}
})
}
function prepareChart(chartType, chartData, labels, header) {
var data = {
labels: labels,
datasets: [{
label: header,
data: chartData,
backgroundColor: [
'rgba(210,105,30,0.8)',
'rgba(244,164,96,0.8)',
'rgba(222,184,135,0.8)',
'rgba(188,143,143,0.8)',
'rgba(176,196,222,0.8)',
'rgba(184,134,11,0.8)',
'rgba(238,232,170,0.8)',
'rgba(189,183,107,0.8)',
'rgba(128,128,0,0.8)',
'rgba(255,255,0,0.8)'
],
borderColor: [
'rgb(255, 99, 132,0.8)',
'rgb(75, 192, 192,0.8)',
'rgb(255, 205, 86,0.8)',
'rgba(255,182,193,0.8)',
'rgba(219,112,147,0.8)',
'rgba(139,69,19,0.8)',
'rgba(210,105,30,0.8)',
'rgba(244,164,96,0.8)',
'rgba(222,184,135,0.8)',
'rgba(188,143,143,0.8)'
],
borderWidth: 1
}]
};
var ctx2 = document.getElementById('opdDiagChart').getContext('2d');
var myChart2 = new Chart(ctx2, {
type: 'pie',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
},
legend: {
display: true,
position: 'bottom',
},
title: {
display: true,
text: header,
},
layout: {
padding: 20
}
}
});
}
</script>
<?php include('techsyn_footer.php'); ?>