370 lines
11 KiB
PHP
370 lines
11 KiB
PHP
|
<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=\"covid_weekly_report\" 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){
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
function prepareChart(chartType, chartData, labels, header){
|
||
|
|
|
||
|
|
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("covid_weekly_report").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: {
|
||
|
|
// Include a dollar sign in the ticks
|
||
|
|
callback: function(value, index, values) {
|
||
|
|
return value +'';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
var ctx1 = document.getElementById("covid_weekly_report").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: {
|
||
|
|
// Include a dollar sign in the ticks
|
||
|
|
callback: function(value, index, values) {
|
||
|
|
return value +'%';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// chart.destroy();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|