<?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">Pending Health Surveillance</span> <span class="info-box-number">
<?php echo getPending_Medical_HealthSurvellianceCount(); ?>/<?= getTodayHealthSurvellianceCount(); ?>
<small>Cases</small>
</div>
</div>
<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="direct_medical_entry">
<div class="icon bg-red">
<i class="ace-icon fa fa-stethoscope"></i>
</div>
<h6>
<span class="info-box-text"> Health Surveillance</span> <span class="info-box-number">
<?php 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">
<?php echo getTodayLabSurvellianceCount(); ?>
<small>Cases</small>
</div>
</div> -->
</div>
</div>
</form>
<div class="row">
<div class="col-sm-5" style="padding-top: 30px;margin-left: 10px">
<div class="box box-success">
<div class="box-header box-header-flat clickable" id="noticeTableHeader">
<h5 class="box-title lighter">
<a role="button" data-toggle="collapse" href="#collapse_notice_table" aria-expanded="false" aria-controls="collapseOne">
Notices
</a>
</h5>
</div>
<div id="collapse_notice_table" class="panel-collapse collapse">
<div id="notice_table_content" class="table-responsive">
<div id="noticeTableLoadingIcon" style="display: none;">
<img src="assets/images/loading-spinner.gif" alt="Loading..." />
</div>
<table class="table table-bordered table-hover" id="noticeTable">
<thead class="thin-border-bottom">
<tr>
<th><i class="ace-icon fa fa-caret-right blue"></i>Notice Details</th>
<th><i class="ace-icon fa fa-caret-right blue"></i>Issued By</th>
<th><i class="ace-icon fa fa-caret-right blue"></i>Issued To</th>
<th><i class="ace-icon fa fa-caret-right blue"></i>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-6" style="padding-top: 30px;margin-left: 1rem;">
<div class="box box-success">
<div class="box-header box-header-flat clickable" id="medicalTableHeader">
<h5 class="box-title lighter">
<a role="button" data-toggle="collapse" href="#collapse_medical_table" aria-expanded="false" aria-controls="collapseOne">
Medical Examination Pending
</a>
</h5>
</div>
<div id="collapse_medical_table" class="panel-collapse collapse">
<div id="medical_table_content">
<div id="medicalTableLoadingIcon" style="display: none;">
<img src="assets/images/loading-spinner.gif" alt="Loading..." />
</div>
<table class="table table-bordered table-hover" id="medicalTable">
<thead class="thin-border-bottom">
<tr>
<th><i class="ace-icon fa fa-caret-right blue"></i>Name</th>
<th><i class="ace-icon fa fa-caret-right blue"></i>Medi. Exam. Type</th>
<th><i class="ace-icon fa fa-caret-right blue"></i>Previous Medi. Exam. Date</th>
<th><i class="ace-icon fa fa-caret-right blue"></i>Due Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</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 id="medicalExamLink" 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") . ' -1 month')) ?>" 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="goButton" onclick="getMedicalData();">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; position: relative;">
<div class="loading-spinner" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); z-index: 9999;">
<img src="assets\images\loading-spinner.gif" alt="Loading..." style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />
</div>
<canvas id="medicalExamChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<!-- /.page-content -->
</div>
</div>
<!-- /.main-content -->
</div>
<?php include('techsyn_footer.php'); ?>
<script type="text/javascript">
//notice
$(document).ready(function() {
var noticeTableLoaded = false;
$('#noticeTableHeader').click(function() {
toggleNoticeTable();
});
function toggleNoticeTable() {
$('#collapse_notice_table').toggle();
if ($('#collapse_notice_table').is(':visible') && !noticeTableLoaded) {
loadNoticeTable();
noticeTableLoaded = true;
}
}
function loadNoticeTable() {
$('#noticeTableLoadingIcon').show();
$.ajax({
url: 'notice_details_dashboard_card.php',
type: 'GET',
dataType: 'json',
success: function(response) {
displayNoticeTable(response);
$('#noticeTableLoadingIcon').hide();
},
error: function(xhr, status, error) {
console.error(error);
$('#noticeTableLoadingIcon').hide();
}
});
}
function displayNoticeTable(response) {
var data = response.data;
var tableBody = $('#noticeTable tbody');
tableBody.empty();
data.forEach(function(item) {
var row = '<tr>' +
'<td>' + item.notice_details + '</td>' +
'<td>' + item.issued_by + '</td>' +
'<td>' + item.issued_to + '</td>' +
'<td>' + item.status + '</td>' +
'</tr>';
tableBody.append(row);
});
var dataTable = $('#noticeTable').DataTable();
var dataTableContainer = dataTable.table().container();
$(dataTableContainer).addClass('table-background-white');
}
});
//medical examination
$(document).ready(function() {
var medicalDataLoaded = false;
function toggleMedicalExam() {
$('#collapse_check6').toggle();
if ($('#collapse_check6').is(':visible') && !medicalDataLoaded) {
getMedicalData();
medicalDataLoaded = true;
}
}
$("#goButton").on("click", function() {
getMedicalData();
});
$("#medicalExamLink").on("click", function() {
toggleMedicalExam();
});
function getMedicalData() {
var startDate = $("#startDate").val();
var endDate = $("#endDate").val();
var patCat = $("#pat_cat").val();
$(".loading-spinner").show();
$.ajax({
type: 'post',
url: 'chart_medical_exam_datewise.php',
data: {
startDate: startDate,
endDate: endDate,
patCat: patCat
},
dataType: 'json',
success: function(response) {
console.log("Received medical data:", response);
renderMedicalExamChart(response);
medicalDataLoaded = true;
},
error: function(xhr, status, error) {
console.error('Error fetching medical exam data:', error);
$(".loading-spinner").hide();
}
});
}
function renderMedicalExamChart(data) {
try {
var ctx = document.getElementById('medicalExamChart').getContext('2d');
var chartData = data['checkup_data'] || [];
var xaxis = data['medical_exam_name'] || [];
if (xaxis.length === 0 || chartData.length === 0) {
console.error('Empty data received for medical exam chart.');
return;
}
if (window.medicalExamChart && window.medicalExamChart instanceof Chart) {
window.medicalExamChart.destroy();
}
var colors = chartData.map(() => "#" + Math.floor(Math.random() * 16777215).toString(16));
var dataset = [{
label: "count",
data: chartData,
borderColor: colors,
backgroundColor: colors,
fill: false,
}];
var chartOptions = {
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
precision: 0,
}
}]
}
};
var chartData = {
labels: xaxis,
datasets: dataset
};
window.medicalExamChart = new Chart(ctx, {
type: 'horizontalBar',
data: chartData,
options: chartOptions
});
} catch (error) {
console.error('Error rendering medical exam chart:', error);
} finally {
$(".loading-spinner").hide();
}
}
});
// medical examination pending
$(document).ready(function() {
var medicalTableLoaded = false;
$('#medicalTableHeader').click(function() {
toggleMedicalTable();
});
function toggleMedicalTable() {
$('#collapse_medical_table').toggle();
if ($('#collapse_medical_table').is(':visible') && !medicalTableLoaded) {
loadMedicalTable();
medicalTableLoaded = true;
}
}
function loadMedicalTable() {
$('#medicalTableLoadingIcon').show();
$.ajax({
url: 'due_examination_date_dashboard.php',
type: 'GET',
dataType: 'json',
success: function(response) {
displayMedicalTable(response);
$('#medicalTableLoadingIcon').hide();
},
error: function(xhr, status, error) {
console.error(error);
$('#medicalTableLoadingIcon').hide();
}
});
}
function displayMedicalTable(response) {
var data = response.data;
var tableBody = $('#medicalTable tbody');
tableBody.empty();
data.forEach(function(item) {
var row = '<tr>' +
'<td>' + item.name + '</td>' +
'<td>' + item.exam_type + '</td>' +
'<td>' + item.prev_exam_date + '</td>' +
'<td>' + item.due_date + '</td>' +
'</tr>';
tableBody.append(row);
});
var dataTable = $('#medicalTable').DataTable();
var dataTableContainer = dataTable.table().container();
$(dataTableContainer).addClass('table-background-white');
}
});
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');
}
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');
}
if (task == 'direct_medical_entry') {
$("#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>