<?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>