<?php include('techsyn_header.php'); ?> <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; } .header { /* text-align: center; */ font-weight: 600; margin-bottom: 20px; padding-top: 1rem; padding-left: 3rem; color: #448ab3; } .header-title { font-size: 18px; margin-bottom: 5px; } .header-subtitle { font-size: 16px; margin-bottom: 20px; } .box-report { box-shadow: 10px 14px 8px rgba(0, 0, 0, 0.25); } .container { display: flex; justify-content: space-between; align-items: flex-start; } .spirometry-table, .abnormal-table, #ppbs-table, #audio-table, #bpTable { border-collapse: collapse; text-align: center; } .spirometry-table th, .spirometry-table td, .abnormal-table th, .abnormal-table td { border: 1px solid black; padding: 10px; } .spirometry-table th, .abnormal-table th, th { background-color: #d3d3d3; } .spirometry-header, .abnormal-header { background-color: #8b8b8b; font-weight: bold; text-align: center; } .mild, #ppbs-mild-label, #audio-mild-label { background-color: #ffd700; } .moderate, #ppbs-moderate-label, #audio-moderate-label { background-color: #b0c4de; } .severe, #ppbs-severe-label, #audio-severe-label { background-color: #ff6347; color: white; } .normal, #ppbs-normal-label, #audio-normal-label { background-color: #98fb98; } .total { background-color: #b0c4de; font-weight: bold; } .restrictive, .obstructive { font-weight: bold; } </style> <?php if ($_SESSION['RoleId'] == 7) { echo "<script>window.location.replace('emp_details.php')</script>"; } ?> <script src="js/Chart.min.js"></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'); $total_item = NearExpryItemsCount(); $total_item_amb = NearExpryItemsCountForAmbulance(); ?> <!--breadcrumb--> <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="content"> <!-- Start new dashboard view --> <div class="container-fluid"> <form id="doctor_form"> <div class="row" style="margin-top: 10px;"> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box choice" data-toggle="wizard-radio" rel="tooltip" title="OPDs" data-original-title="OPDs"> <span class="info-box-icon bg-aqua "><input type="radio" name="task" class="hidden-radio" value="opd"><i class="fa fa-user-md"></i></span> <!-- <div class="icon bg-aqua"> <i class="ace-icon fa fa-user-md"></i> </div> --> <div class="info-box-content"><br> <span class="info-box-text">Pending OPD</span> <span class="info-box-number"> <?php echo getTodayOpdPendingCosultationCount() ?> <?php //echo getTodayOpdCount() ?><small> Cases </small> </span> </div> </div> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box choice" data-toggle="wizard-radio" rel="tooltip" title="OPDs" data-original-title="OPDs"> <span class="info-box-icon bg-aqua "><input type="radio" name="task" class="hidden-radio" value="opd-total"><i class="fa fa-user-md"></i></span> <!-- <div class="icon bg-aqua"> <i class="ace-icon fa fa-user-md"></i> </div> --> <div class="info-box-content"><br> <span class="info-box-text">Total OPD</span> <span class="info-box-number"> <?php //echo getTodayOpdPendingCosultationCount() ?> <?php echo getTodayOpdCount() ?><small> Cases </small> </span> </div> </div> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="Injury"> <span class="info-box-icon bg-red "><input type="radio" name="task" class="hidden-radio" value="injury"><i class="fa fa-heartbeat"></i></span> <!-- <div class="icon bg-red"> <span class="bg-red"><i class="ace-icon fa fa-heartbeat"></i></span> </div> --> <div class="info-box-content"><br> <span class="info-box-text">Pending Injury - Accident On Duty</span> <span class="info-box-number"> <?php echo getTodayInjuryPendingCosultationCount(); ?> <?php //echo getTodayInjuryCount(); ?> <small> Cases</small> </span> </div> </div> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="Injury"> <span class="info-box-icon bg-red "><input type="radio" name="task" class="hidden-radio" value="injury-total"><i class="fa fa-heartbeat"></i></span> <!-- <div class="icon bg-red"> <span class="bg-red"><i class="ace-icon fa fa-heartbeat"></i></span> </div> --> <div class="info-box-content"><br> <span class="info-box-text">Total Injury - Accident On Duty</span> <span class="info-box-number"> <?php //echo getTodayInjuryPendingCosultationCount(); ?> <?php echo getTodayInjuryCount(); ?> <small> Cases</small> </span> </div> </div> </div> <!-- /.row --> <!-- <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-aqua "> <input type="radio" name="task" class="hidden-radio" value="ffi"> <i class="fa fa-cutlery"></i> </span> <div class="info-box-content"> <br> <span class="info-box-text"> Food Handler </span> <span class="info-box-number"> <?php //echo getPending_infection(); ?>/ <?php //echo getTodayapproval('ffi'); ?> <small>Cases</small> </span> </div> </div> </div> --> <!-- <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-aqua "> <input type="radio" name="task" class="hidden-radio" value="chs"> <i class="fa fa-cutlery"></i> </span> <div class="info-box-content"> <br> <span class="info-box-text"> Canteen Hygiene </span> <span class="info-box-number"> <?php //echo getPending_canteen(); ?>/ <?php //echo getTodayapproval('chs'); ?> <small>Cases</small> </span> </div> </div> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-yellow"> <input type="radio" name="task" class="hidden-radio" value="khs"> <i class="fa fa-cutlery"></i> </span> <div class="info-box-content"> <br> <span class="info-box-text"> Kitchen Hygiene </span> <span class="info-box-number"> <?php //echo getPending_kitchen(); ?>/ <?php //echo getTodayapproval('khs'); ?> <small>Cases</small> </span> </div> </div> </div> --> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="This is good if you travel alone."> <span class="info-box-icon bg-green "><input type="radio" name="task" class="hidden-radio" value="sickness"><i class="fa fa-bed"></i></span> <!-- <div class="icon bg-green"> <i class="ace-icon fa fa-bed"></i> </div> --> <div class="info-box-content"><br> <span class="info-box-text">Fitness</span> <span class="info-box-number"> <?php echo getTodaySicknessCountByMedical(); ?>/ <?php echo getTodaySicknessCount(); ?> <small>Cases</small> </span> </div> </div> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice" onclick="location.href=register_user_list.php"> <span class="info-box-icon bg-aqua "><input type="radio" name="task" class="hidden-radio" value="pme" onclick="location.href=register_user_list.php"><i class="fa fa-stethoscope"></i></span> <div class="info-box-content"> <br> <span class="info-box-text"> Health Surveillance </span> <span class="info-box-number"> <?= getPending_doctor_HealthSurvellianceCount(); ?>/ <?= getTodayHealthSurvellianceCount(); +getHealthSurvellianceCount(); ?> <small>Cases</small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-red"> <input type="radio" name="task" class="hidden-radio" value="indent"> <i class="fa fa-shopping-cart"></i> </span> <div class="info-box-content"> <br> <span class="info-box-text"> Indent </span> <span class="info-box-number"> <?php echo getPending_indent(); ?>/ <?php echo getTodayapproval_indent(); ?> <small>Items</small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-yellow"> <input type="radio" name="task" class="hidden-radio" value="appointment"> <i class=" fa fa-calendar-o"></i> </span> <div class="info-box-content"> <br> <span class="info-box-text"> Appointments </span> <span class="info-box-number"> <?php echo getTodayappointment_details_pending_Count(); ?>/ <?php echo getTodayappointment_detailsCount(); ?> <small>Appointments</small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box choice" data-toggle="wizard-radio" rel="tooltip" title="OPDs" data-original-title="OPDs"> <!-- <input type="radio" name="task" value="visitor_opd"> --> <span class="info-box-icon bg-green "><input type="radio" name="task" class="hidden-radio" value="p"><i class="ace-icon fa fa-plus-square"></i></span> <div class="info-box-content"><br> <span class="info-box-text">Pending Purchase Items</span> <span class="info-box-number"> <?php echo PendingPurchaseItems() ?> <small>Items</small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box choice mb-3"> <span class="info-box-icon bg-green "><input type="radio" name="task" class="hidden-radio" value="itemStock"><i class="ace-icon fa fa-plus-square"></i></span> <div class="info-box-content"><br> <span class="info-box-text">Items Stock</span> <span class="info-box-number"><?php echo getTotalStockCount() ?> <small>Items</small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <!-- /.col --> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box choice mb-3"> <span class="info-box-icon bg-green "><input type="radio" name="task" class="hidden-radio" value="ambItemStock"><i class="ace-icon fa fa-plus-square"></i></span> <div class="info-box-content"><br> <span class="info-box-text">Ambulance Item Stock</span> <span class="info-box-number"><?php echo getTotalStockCountAmbulance() ?> <small>Items</small> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <!-- fix for small devices only --> <!-- <div class="clearfix hidden-md-up"></div> --> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box choice mb-3"> <span class="info-box-icon bg-green "><input type="radio" name="task" class="hidden-radio" value="Code"><i class="ace-icon fa fa-opencart"></i></span> <div class="info-box-content"><br> <span class="info-box-text">Items Inward In Stock</span> <span class="info-box-number"><?php echo getTodayProcurementCount() ?> <small>Items</small></span> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-red"><input type="radio" name="task" class="hidden-radio" value="stock"><i class="fa fa-clock-o"></i></span> <div class="info-box-content"><br> <span class="info-box-text">Issued Items From Stock</span> <span class="info-box-number"><?php echo getTodayIssueCount() ?> <small>Items</small></span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-red"><input type="radio" name="task" class="hidden-radio" value="exp"><i class="fa fa-clock-o"></i></span> <div class="info-box-content"><br> <span class="info-box-text">Near Expiring Medicine</span> <span class="info-box-number"><?php echo $total_item ?> <small>Items</small></span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-red"><input type="radio" name="task" class="hidden-radio" value="ambExp"><i class="fa fa-clock-o"></i></span> <div class="info-box-content"><br> <span class="info-box-text">Ambulance Near Expiring Medicine</span> <span class="info-box-number"><?php echo $total_item_amb ?> <small>Items</small></span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-red"><input type="radio" name="task" class="hidden-radio" value="expiry"><i class="fa fa-clock-o"></i></span> <div class="info-box-content"><br> <span class="info-box-text">Expiry Items</span> <span class="info-box-number"><?php echo getExpiredMedCount() ?> <small>Items</small></span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-red"><input type="radio" name="task" class="hidden-radio" value="ambExpiry"><i class="fa fa-clock-o"></i></span> <div class="info-box-content"><br> <span class="info-box-text">Ambulance Expiry Items</span> <span class="info-box-number"><?php echo getExpiredMedCount() ?> <small>Items</small></span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-red"><input type="radio" name="task" class="hidden-radio" value="indent"><i class="fa fa-shopping-cart"></i></span> <div class="info-box-content"><br> <span class="info-box-text">Indents</span> <span class="info-box-number"><?php echo getIndentCount() ?> <small>Items</small></span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-red"><input type="radio" name="task" class="hidden-radio" value="shift"><i class="fa fa-clock-o"></i></span> <div class="info-box-content"><br> <span class="info-box-text">Staff Handover Notes</span> <span class="info-box-number"> <small>Current Shift : <?php echo getCurrentShift() ?></small></span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-red"><input type="radio" name="task" class="hidden-radio" value="mockdrill"><i class="fa fa-clock-o"></i></span> <div class="info-box-content"><br> <span class="info-box-text">Mockdrill</span> <span class="info-box-number"> <small>Count : <?php echo getMockDrillCount() ?></small></span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- <div class="col-12 col-sm-6 col-md-3"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-red"> <input type="radio" name="task" class="hidden-radio" value="checklist"> <i class="fa fa-shopping-cart"></i> </span> <div class="info-box-content"> <br> <span class="info-box-text">Checklist </span> <span class="info-box-number"> <?php //echo getPending_inventory_checklist_status(); ?>/ <?php //echo getTodayapproval_inventory_checklist_status(); ?> <small>Cases</small> </span> </div> </div> </div> --> <!-- <div class="col-12 col-sm-6 col-md-3" style="margin-left: -10px"> <div class="info-box mb-3 choice"> <span class="info-box-icon bg-green "> <input type="radio" name="task" class="hidden-radio" value="dlf"> <i class="fa fa-car"></i> </span> <div class="info-box-content"> <br> <span class="info-box-text"> DLME </span> <span class="info-box-number"> <?php //echo getPending_dlf(); ?>/ <?php //echo getTodayapproval('dlf'); ?> <small>Cases</small> </span> </div> </div> </div> --> </form> </div> <!-- Charts start here --> <div class="row"> <!-- OSI Weekly Report Card --> <div class="col-md-6"> <div class="card"> <div class="card-body"> <div> <h3 id="chartHeader" style="cursor: pointer; text-align: center;">OSI Weekly Report </h3> <div id="osiLoadingIcon" style="display: none;"> <img src="assets\images\loading-spinner.gif" alt="Loading..." /> </div> <canvas id="appointmentChart" style="display: none;"></canvas> </div> </div> </div> </div> <!-- Injury Weekly Report Card --> <div class="col-md-6"> <div class="card"> <div class="card-body"> <div> <h3 id="injuryReportHeader" style="cursor: pointer;text-align: center;">Injury Weekly Report</h3> <div id="injuryLoadingIcon" style="display: none;"> <img src="assets\images\loading-spinner.gif" alt="Loading..." /> </div> <canvas id="injuryClassChart" style="display: none;"></canvas> </div> </div> </div> </div> </div> <br> <?php include('health_index_charts.php'); ?> <br> <div class="row"> <div class="col-sm-11 wizard-card" style="margin: 20px 17px 0px 13px; padding:20px 0 20px 25px;"> <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_check" aria-expanded="false" aria-controls="collapseOne" id="ali"> Next One Calibration - ( Total :<?php $c = $_SESSION['current_ohcttype']; $sql_reorder_items = "SELECT item_id,b.item_name, qty from calibration_item_tbl a left join tbl_items b on b.item_id=a.cat_id where a.next_cali BETWEEN now() and NOW() + INTERVAL 30 day order by b.item_name "; error_log('query: 262626262 ' . $sql_reorder_items); $results_reorder_items = mysqli_query($conn, $sql_reorder_items); // $total = mysqli_fetch_assoc($results_reorder_items); $total = mysqli_num_rows($results_reorder_items); echo $total; ?> Pending : <?php $c = $_SESSION['current_ohcttype']; $sql_reorder_pending = "SELECT a.status from calibration_item_tbl a left join tbl_items b on b.item_id=a.cat_id"; error_log('query: 2611 ' . $sql_reorder_pending); $results_reorder_pending = mysqli_query($conn, $sql_reorder_pending); // $total = mysqli_fetch_assoc($results_reorder_pending); $approved = 0; $pending = 0; while ($countFetch = mysqli_fetch_assoc($results_reorder_pending)) { if ($countFetch['status'] == 'P') { $pending += 1; } else { $approved += 1; } } // echo $pendingtotal = mysqli_num_rows($results_reorder_pending); echo $approved . " / " . $pending; ?>) </a> </h5> </div> <div id="collapse_check" class="panel-collapse collapse"> <div id="collapse_check"> <table width="100%" class="table table-bordered table-hover"> <thead class="thin-border-bottom"> <tr> <th style="background-color:white; color:black"><i class="ace-icon fa fa-caret-right blue"></i>Item</th> <th style="background-color:white; color:black"><i class="ace-icon fa fa-caret-right blue"></i>Available Qty</th> <th style="background-color:white; color:black"><i class="ace-icon fa fa-caret-right blue"></i>Min. Qty </th> <th style="background-color:white; color:black"><i class="ace-icon fa fa-caret-right blue"></i>Next Calibration Date </th> </tr> </thead> <tbody id="loaddata"> </tbody> </table> <!-- /.box-main --> </div> <script> $(document).ready(function() { var limit = 5; if (limit == 5) { $("#load").attr('value', 'Show Data'); } }); </script> <center> <input name="load" id="load" class="form-control btn btn-primary" style="width: 90%;" type="submit" value="Load More" onClick="loadmore()"> </center> <script> var limit = 0; var starting = 0; // var limit = 5; // // $("#load").inner('Loading.....'); // const myTimeout = setTimeout(loadmore, 2000); function loadmore() { // limit = 0; // var starting = 0; $("#load").attr('value', 'Loading.....'); // starting= 0; limit += 10; starting = limit - 10; console.log(starting); console.log("starting " + starting); $.ajax({ url: 'callibration_list_table.php', data: { limit: limit, start: starting }, success: function(data) { if (data == 0) { console.log("btn"); $("#load").attr('value', 'Data Over'); } else { var d = JSON.parse(data); var html = ''; jQuery.each(d, function(index, item) { console.log(item.item_id); var status = ""; if (item.status == 'P') { status = "PENDING"; } else { status = "APPROVED"; } html += '<tr><td style="color:#FF4233">' + item .item_name + '</td><td style="color:#FF4233">' + item.stock_qty + '</td><td style="color:#FF4233">' + item .reorder_dispensary_level + '</td>' + '</td><tr>'; }); $("#loaddata").append(html); } } }); // $("#load").inner('LOAD MORE'); $("#load").attr('value', 'LOAD MORE'); } </script> <!-- /.box-body --> </div> </div> </div> </div> <div class="box-report" style="background-color: white;margin-top: 2rem;"> <div class="header" id="analysisHeader" style="cursor: pointer;"> <div class="header-subtitle">Abnormal Spirometry reports Analysis </div> </div> <div id="contentContainer" class="container" style="display:none;"> <div id="annualLoadingIcon" style="display: none;"> <img src="assets/images/loading-spinner.gif" alt="Loading..." /> </div> <!-- Spirometry Severity Classification Table --> <table class="spirometry-table"> <tr> <th colspan="3" class="spirometry-header">Spirometry Severity Classification</th> </tr> <tr> <th>Classification</th> <th>FVC<br>(Restrictive)</th> <th>FEV1/FVC<br>(Obstructive)</th> </tr> <tr> <td class="mild">Mild</td> <td class="restrictive">70-80</td> <td class="obstructive">70-80</td> </tr> <tr> <td class="moderate">Moderate</td> <td class="restrictive">65-70</td> <td class="obstructive">65-70</td> </tr> <tr> <td class="severe">Severe</td> <td class="restrictive"><65</td> <td class="obstructive"><65</td> </tr> </table> <!-- Abnormal Spirometry Reports Table --> <table class="abnormal-table"> <tr> <th colspan="5" class="abnormal-header">Abnormal Spirometry Reports</th> </tr> <tr> <th>Classification</th> <th>Restrictive</th> <th>Obstructive</th> <th>Total Abnormal</th> <th>Grand Total</th> </tr> <tr> <td class="mild">Mild</td> <td id="fvc-mild">0</td> <td id="fev1-mild">0</td> <td id="total-mild">0</td> <td rowspan="3" id="grand-total">0</td> </tr> <tr> <td class="moderate">Moderate</td> <td id="fvc-moderate">0</td> <td id="fev1-moderate">0</td> <td id="total-moderate">0</td> </tr> <tr> <td class="severe">Severe</td> <td id="fvc-severe">0</td> <td id="fev1-severe">0</td> <td id="total-severe">0</td> </tr> <tr> <td class="normal">Normal</td> <td colspan="4" id="total-normal">0</td> </tr> <tr> <td class="total">Total</td> <td colspan="4" class="total" id="total-count">0</td> </tr> </table> </div> <!-- Abnormal Spirometry Graphs --> <div id="graphContainer" style="display:none;"> <div style="display: flex; justify-content: space-around; margin-top: 2rem;"> <div style="width: 500px; height: 250px;"> <canvas id="abnormalSpirometryChart"></canvas> </div> <div style="width: 500px; height: 250px;"> <canvas id="departmentChart" width="400" height="200"></canvas> </div> </div> <div style="width: 500px; height: 250px; margin: 3rem 4rem;"> <canvas id="departmentAbnormalityChart"></canvas> </div> </div> </div> <!-- Abnormal Audiometry --> <div class="box-report" style="background-color: white;margin-top: 2rem;"> <div class="header" id="abnormalHeader" style="cursor: pointer;"> <div class="header-subtitle">Abnormal Audiometry</div> </div> <div id="abnormalContainer" class="container" style="display: none;"> <div id="abnormalLoadingIcon" style="display: none;"> <img src="assets/images/loading-spinner.gif" alt="Loading..." /> </div> <div class="container"> <table id="audio-table"> <tr> <th>Severity Classification</th> <th>Numbers</th> <th>Total Abnormal</th> </tr> <tr> <td class="audio-severity" id="audio-mild-label">Mild</td> <td class="audio-numbers" id="audio-mild-count">0</td> <td rowspan="3" class="audio-total-abnormal" id="audio-total-abnormal">0</td> </tr> <tr> <td class="audio-severity" id="audio-moderate-label">Moderate</td> <td class="audio-numbers" id="audio-moderate-count">0</td> </tr> <tr> <td class="audio-severity" id="audio-severe-label">Severe</td> <td class="audio-numbers" id="audio-severe-count">0</td> </tr> <tr> <td class="audio-normal-label" id="audio-normal-label">Normal</td> <td colspan="2" class="audio-normal-count" id="audio-normal-count">0</td> </tr> <tr> <td class="audio-grand-total-label" id="audio-grand-total-label">Grand Total</td> <td colspan="2" class="audio-grand-total" id="audio-grand-total">0</td> </tr> </table> </div> </div> <div id="abnormalgraphContainer" style="display:none;"> <div style="display: flex; justify-content: space-around; margin-top: 2rem;"> <div style=" width: 400px; height: 250px;"> <canvas id="audio-severity-chart"></canvas> </div> <div style="width: 500px; height: 250px;"> <canvas id="audiodepartmentChart" width="400" height="200"></canvas> </div> </div> <div style="width: 500px; height: 250px;margin: 1rem;"> <canvas id="departmentaudioAbnormalityChart" width="400" height="200"></canvas> </div> </div> </div> <!-- Abnormal Blood Sugar Level report --> <div class=" box-report" style="background-color: white;"> <div class="header" id="ppbs-header" style="cursor: pointer;"> <div class="header-subtitle">Abnormal Blood Sugar Level report</div> </div> <div id="ppbs-content" style="display: none; "> <div id="ppbsLoadingIcon" style="display: none;"> <img src="assets/images/loading-spinner.gif" alt="Loading..." /> </div> <div class="container"> <table id="ppbs-table"> <tr> <th>Severity Classification</th> <th>Numbers</th> <th>Total Abnormal</th> </tr> <tr> <td class="ppbs-severity" id="ppbs-mild-label">Mild (200mgdl - 250mgdl)</td> <td class="ppbs-numbers" id="ppbs-mild-count">0</td> <td rowspan="3" class="ppbs-total-abnormal" id="ppbs-total-abnormal">0</td> </tr> <tr> <td class="ppbs-severity" id="ppbs-moderate-label">Moderate (251mgdl - 300mgdl)</td> <td class="ppbs-numbers" id="ppbs-moderate-count">0</td> </tr> <tr> <td class="ppbs-severity" id="ppbs-severe-label">Severe (>300mgdl)</td> <td class="ppbs-numbers" id="ppbs-severe-count">0</td> </tr> <tr> <td class="ppbs-normal-label" id="ppbs-normal-label">Normal</td> <td colspan="2" class="ppbs-normal-count" id="ppbs-normal-count">0</td> </tr> <tr> <td class="ppbs-grand-total-label" id="ppbs-grand-total-label">Grand Total</td> <td colspan="2" class="ppbs-grand-total" id="ppbs-grand-total">0</td> </tr> </table> </div> <div style="display: block; width: 500px; height: 250px; margin: 3rem 4rem;"> <canvas id="abnormalbloodsugarlevel" style="display: none;"></canvas> </div> </div> </div> <!-- Abnormal Blood pressure report --> <div class="box-report" style="background-color: white; "> <div class="header" id="bp-header" style="cursor: pointer;"> <div class="header-subtitle">Abnormal Blood Pressure report </div> </div> <div id="bp-content" style="display: none; margin-top: 2rem;"> <div id="bpLoadingIcon" style="display: none;"> <img src="assets/images/loading-spinner.gif" alt="Loading..." /> </div> <div style="display: flex; "> <div class="container"> <table id="bpTable"> <tr> <th>Blood Pressure Classification</th> <th>SBP <br> mmHg</th> <th>DBP <br> mmHg</th> </tr> <tr> <td class="bp-normal">Normal</td> <td><120</td> <td>and <80</td> </tr> <tr> <td class="mild">Prehypertension</td> <td>120–139</td> <td>or 80–89</td> </tr> <tr> <td class="moderate">Stage 1 Hypertension</td> <td>140–159</td> <td>or 90–99</td> </tr> <tr> <td class="severe">Stage 2 Hypertension</td> <td>>160</td> <td>or >100</td> </tr> </table> </div> <div class="container"> <table cellpadding="10" cellspacing="0" style="border-collapse: collapse; text-align: center; width: 60%;" id="bpTable"> <tr> <td colspan="4" style="background-color: #00BFFF; font-weight: bold;">Abnormal Blood Pressure Levels</td> </tr> <tr> <td style="font-weight: bold;">Classification</td> <td style="font-weight: bold;">Numbers</td> <td style="font-weight: bold;">Total</td> </tr> <tr> <td>Prehypertension</td> <td id="prehypertension" style="background-color: yellow;">0</td> <td id="prehypertension-total" rowspan="3">0</td> </tr> <tr> <td>Hypertension - 1st stage</td> <td id="stage1" style="background-color: orange;">0</td> </tr> <tr> <td>Hypertension - 2nd stage</td> <td id="stage2" style="background-color: red;">0</td> </tr> <tr> <td>Normal</td> <td id="bpnormal" colspan="2" style="background-color: lightgreen;">0</td> </tr> <tr> <td style="font-weight: bold;">Grand Total</td> <td colspan="2" id="bp-grand-total">0</td> </tr> </table> </div> </div> <div style=" display: block; width: 500px; height: 250px;margin: 3rem 4rem;"> <canvas id="abnormalbloodpressurelevel"></canvas> </div> </div> </div> <!-- Abnormal Body Mass Index --> <div class="box-report" style="background-color: white;"> <div class="header" id="bmi-header" style="cursor: pointer;"> <div class="header-subtitle">Abnormal Body Mass Index Report </div> </div> <div id="bmi-content" style="display: none; margin-top: 2rem;"> <div id="bmiLoadingIcon" style="display: none;"> <img src="assets/images/loading-spinner.gif" alt="Loading..." /> </div> <div style="display: flex; margin-top: 2rem;"> <div class="container"> <table cellpadding="10" cellspacing="0" style="border-collapse: collapse; text-align: center; width: 30%;" id="bmiTable"> <tr> <td colspan="4" style="background-color: #00BFFF; font-weight: bold;">Abnormal Body Mass</td> </tr> <tr> <td style="font-weight: bold;">Classification</td> <td style="font-weight: bold;">Numbers</td> <td style="font-weight: bold;">Total</td> </tr> <tr> <td>Underweight (Below 18.5) </td> <td id="underweight" style="background-color: yellow;">0</td> <td id="underweight-total" rowspan="3">0</td> </tr> <tr> <td>Overweight (25.0 - 29.9) </td> <td id="overweight" style="background-color: orange;">0</td> </tr> <tr> <td>Obese ( 30.0 and Above) </td> <td id="obese" style="background-color: red;">0</td> </tr> <tr> <td>Normal (18.5 – 24.9) </td> <td id="bminormal" colspan="2" style="background-color: lightgreen;">0</td> </tr> <tr> <td style="font-weight: bold;">Grand Total</td> <td colspan="2" id="bmi-grand-total">0</td> </tr> </table> </div> <div style=" display: block; width: 500px; height: 250px;margin: 3rem 4rem;"> <canvas id="abnormalbmilevel"></canvas> </div> </div> <!-- Abnormal Haemoglobin levels --> <div class="header"> <div class="header-subtitle">Abnormal Haemoglobin levels </div> </div> <div style="display: flex; margin-top: 2rem;"> <div style="margin-left: 7rem;"> <table cellpadding="10" cellspacing="0" style="border-collapse: collapse; text-align: center" id="bmiTable"> <tr> <td colspan="4" style="background-color: #00BFFF; font-weight: bold;">Abnormal Hemoglobin levels/Anemia </td> </tr> <tr> <td style="font-weight: bold;">Classification</td> <td style="font-weight: bold;">Numbers</td> <td style="font-weight: bold;">Total</td> </tr> <tr> <td>Mild (10-10.10 g/dl) </td> <td id="hbg-mild" style="background-color: yellow;">0</td> <td id="hbg-mild-total" rowspan="3">0</td> </tr> <tr> <td>Moderate (8-9.9g/dl) </td> <td id="hbg-moderate" style="background-color: orange;">0</td> </tr> <tr> <td>Severe (8g/dl and above) </td> <td id="hbg-severe" style="background-color: red;">0</td> </tr> <tr> <td>Normal (>11g/dl) </td> <td id="hbg-normal" colspan="2" style="background-color: lightgreen;">0</td> </tr> <tr> <td style="font-weight: bold;">Grand Total</td> <td colspan="2" id="hbg-grand-total">0</td> </tr> </table> </div> <div style=" display: block; width: 500px; height: 250px;margin: 3rem 4rem;"> <canvas id="abnormalhbglevel"></canvas> </div> </div> </div> </div> </div> <!-- End new dashboard view --> </div> <!-- /.content --> </div> <!-- /.main-content-inner --> </div> <!-- /.main-content --> </div> <!-- /.main-container ace-save-state --> <?php include('techsyn_footer.php'); ?> <script> $(document).ready(function() { $(" .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() // alert(task); $("#doctor_form").attr('method', 'POST'); if (task == 'opd') { $("#doctor_form").attr('action', 'pending_patient_list.php'); } else if (task == 'opd-total') { $("#doctor_form").attr('action', 'opd_list.php'); } else if (task == 'direct-opd') { $("#doctor_form").attr('action', 'add_select_patient.php'); } else if (task == 'injury') { $("#doctor_form").attr('action', 'pending_injury_list.php'); } else if (task == 'injury-total') { $("#doctor_form").attr('action', 'aod_list.php'); } else if (task == 'visitor_opd') { $("#doctor_form").attr('action', 'visitor_details.php'); } else if (task == 'pme') { $("#doctor_form").attr('action', 'medical_examination_list.php'); } else if (task == 'sickness') { $("#doctor_form").attr('action', 'pending_fitness_list.php'); } else if (task == 'ffi') { $("#doctor_form").attr('action', 'pending_infection_list.php'); } else if (task == 'chs') { $("#doctor_form").attr('action', 'pending_chs_list.php'); } else if (task == 'khs') { $("#doctor_form").attr('action', 'pending_chs_list.php'); } else if (task == 'indent') { $("#doctor_form").attr('action', 'approval_indent.php'); } else if (v.val() == 'appointment') { $("#doctor_form").attr('action', 'patient_appointment.php'); } else if (task == "checklist") { $("#doctor_form").attr('action', 'pending_checklist.php'); } else if (task == 'dlf') { $("#doctor_form").attr('action', 'pending_dlf_list.php'); } else if (task == 'Code') { $("#doctor_form").attr('action', 'procurement_list.php'); } else if (task == 'stock') { $("#doctor_form").attr('action', 'item_issue_list.php'); } else if (task == 'direct') { $("#doctor_form").attr('action', 'direct_medicine_issue.php'); } else if (task == 'expiry') { $("#doctor_form").attr('action', 'expiry_list.php'); } else if (task == 'ambExpiry') { $("#doctor_form").attr('action', 'mis_expiry_list.php'); } else if (task == 'indent') { $("#doctor_form").attr('action', 'indent_form.php'); } else if (task == 'exp') { $("#doctor_form").attr('action', 'pending_expiry_list.php'); } else if (task == 'ambExp') { $("#doctor_form").attr('action', 'pending_mis_expiry_list.php'); } else if (task == 'itemStock') { $("#doctor_form").attr('action', 'stock_list.php'); } else if (task == 'ambItemStock') { $("#doctor_form").attr('action', 'ambulance_stock.php'); } else if (task == 'shift') { $("#doctor_form").attr('action', 'communication_details.php'); } else if (task == 'mockdrill') { $("#doctor_form").attr('action', 'mockdrill.php'); } $("#doctor_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) {} // }); }); //OSI weekly graph function setupAppointmentChart(chartId) { var chartLoaded = false; var chartElement = document.getElementById(chartId); var header = document.getElementById("chartHeader"); header.addEventListener("click", function() { chartElement.style.display = chartElement.style.display === 'none' ? 'block' : 'none'; if (!chartLoaded && chartElement.style.display === 'block') { showLoadingIcon(true, 'osiLoadingIcon'); $.ajax({ url: 'fetch_appointment_data.php', type: 'GET', dataType: 'json', success: function(data) { WeeklyOSIChart(chartId, data); chartLoaded = true; showLoadingIcon(false, 'osiLoadingIcon'); }, error: function(error) { console.error('Error:', error); showLoadingIcon(false, 'osiLoadingIcon'); } }); } }); } function showLoadingIcon(show, loadingIconId) { document.getElementById(loadingIconId).style.display = show ? 'block' : 'none'; } function WeeklyOSIChart(chartId, data) { var dates = data.dates; var opdCases = data.opd_cases; var injuryCases = data.injury_cases; var sicknessCases = data.sickness_cases; console.log("dates:", dates); console.log("opdCases:", opdCases); console.log("injuryCases:", injuryCases); console.log("sicknessCases:", sicknessCases); var datasets = [{ label: 'OPD Cases', data: opdCases, borderColor: 'blue', fill: false }, { label: 'Injury Cases', data: injuryCases, borderColor: 'red', fill: false }, { label: 'Sickness Cases', data: sicknessCases, borderColor: 'green', fill: false } ]; var config = { type: 'line', data: { labels: dates, datasets: datasets }, options: { responsive: true, // title: { // display: true, // text: 'OSI Weekly Report' // }, legend: { position: 'bottom' }, scales: { xAxes: [{ ticks: { autoSkip: false, maxRotation: 90, minRotation: 30 } }], yAxes: [{ ticks: { beginAtZero: true, callback: function(value) { if (value % 1 === 0) { return value; } } } }] } } }; var ctx = document.getElementById(chartId).getContext('2d'); new Chart(ctx, config); } setupAppointmentChart('appointmentChart'); //Injury weekly graph document.addEventListener('DOMContentLoaded', function() { var chartLoaded = false; document.getElementById('injuryReportHeader').addEventListener('click', function() { var chartElement = document.getElementById('injuryClassChart'); chartElement.style.display = chartElement.style.display === 'none' ? 'block' : 'none'; if (!chartLoaded && chartElement.style.display === 'block') { loadInjuryClassChart(); chartLoaded = true; } }); }); function loadInjuryClassChart() { showLoadingIcon(true, 'injuryLoadingIcon'); $.ajax({ url: 'fetch_injury_class_data.php', type: 'GET', dataType: 'json', success: function(data) { console.log(data); createInjuryClassChart('injuryClassChart', data); showLoadingIcon(false, 'injuryLoadingIcon'); }, error: function(error) { console.error('Error:', error); showLoadingIcon(false, 'injuryLoadingIcon'); } }); } function createInjuryClassChart(chartId, graphData) { var ctx = document.getElementById(chartId).getContext('2d'); var datasets = []; var usedColors = []; graphData.labels.forEach(function(label, index) { var key = Object.keys(graphData.data)[index]; var data = graphData.data[key]; var color = getRandomColor(usedColors); usedColors.push(color); datasets.push({ label: label, data: data, borderColor: color, fill: false }); }); new Chart(ctx, { type: 'line', data: { labels: graphData.dates, datasets: datasets }, options: { responsive: true, // title: { // display: true, // text: 'Injury Weekly Report' // }, legend: { position: 'bottom' }, scales: { xAxes: [{ ticks: { autoSkip: false, maxRotation: 90, minRotation: 30 } }], yAxes: [{ ticks: { beginAtZero: true, callback: function(value) { if (value % 1 === 0) { return value; } } } }] } } }); } function getRandomColor(usedColors) { var letters = '0123456789ABCDEF'; var color; var isUnique = false; while (!isUnique) { color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } if (!usedColors.includes(color)) { isUnique = true; } } return color; } 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)); } const dataset = []; // for (var i = 0; i < chartData.length; i++) { dataset.push({ label: "count", data: chartData, borderColor: colors, backgroundColor: colors, fill: false, }); // } const 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 getDatesBetween(startDate, endDate) { const currentDate = new Date(startDate.getTime()); const dates = []; while (currentDate <= endDate) { let d = new Date(currentDate); let day = d.getDate(); let month = d.getMonth() + 1; month = ("0" + month).slice(-2); let year = d.getFullYear(); day = ("0" + day).slice(-2); dates.push(year + "-" + month + "-" + day); currentDate.setDate(currentDate.getDate() + 1); } return dates; } function gettrainingData() { training_date(); var training_id = $("#training_id").val(); var startDatetraining = $("#trainingDate1").val(); var startDatetraining = startDatetraining.split("-").reverse().join("-"); var date1 = new Date(startDatetraining); var endDatetraining = $("#trainingDate2").val(); var endDatetraining = endDatetraining.split("-").reverse().join("-"); var date2 = new Date(endDatetraining); let allDates = getDatesBetween(date1, date2); // alert(allDates); document.querySelector("#collapse_training").innerHTML = '<canvas id="chart_monthly_training"></canvas>'; $.ajax({ type: 'post', url: 'chart_training_datewise.php', data: { allDates: allDates, training_id: training_id, }, dataType: 'json', success: function(Mdata) { var ctx = document.getElementById('chart_monthly_training').getContext('2d'); var chartData = Mdata['count']; var xaxis = Mdata['date'] 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 gettrainingExcel() { $("#exceltrainingdata").attr('method', 'POST'); $("#exceltrainingdata").attr('target', '_blank'); $("#exceltrainingdata").attr('action', 'training_report_excel.php'); $("#exceltrainingdata").submit(); } function getInjuryExcel() { $("#excelinjurydata").attr('method', 'POST'); $("#excelinjurydata").attr('target', '_blank'); $("#excelinjurydata").attr('action', 'injury_type_excel.php'); $("#excelinjurydata").submit(); } function printDashboard() { html2canvas(document.getElementById("dashboard"), { onrendered: function(canvas) { var img = canvas.toDataURL(); //image data of canvas // var doc = new jsPDF('p','pt','a2'); var doc = new jsPDF('l', 'mm', [300, 350]); doc.addImage(img, 10, 10); doc.save('graph.pdf'); } }); } </script> <script> 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("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 + '%'; } } }] } } }); } // chart.destroy(); } function training_date() { var training = $('#training_id').val(); $.ajax({ url: 'select_assign_training.php', data: { training: training }, type: 'POST', dataType: 'json', success: function(data) { $("#trainingDate1").val(data.from_date); document.getElementById("trainingDate1").setAttribute("max", data.to_date); document.getElementById("trainingDate1").setAttribute("min", data.from_date); $("#trainingDate2").val(data.to_date); document.getElementById("trainingDate2").setAttribute("max", data.to_date); document.getElementById("trainingDate2").setAttribute("min", data.from_date); }, error: function(data) { BootstrapDialog.alert('Error Populating Reports Details'); return; } }); } // window.onload = gettrainingData(); </script> <!-- <script src="jspdf.min.js"></script> --> <!-- <script src="html2canvas.min.js"></script> --> <script> $(document).ready(function() { let isContentVisible = false; let spirometryChart = null; let departmentChart = null; let departmentAbnormalityChart = null; $('#analysisHeader').on('click', function() { if (isContentVisible) { $('#contentContainer, #graphContainer').slideUp(); isContentVisible = false; } else { $('#annualLoadingIcon').show(); $('#contentContainer, #graphContainer').slideDown(); // AJAX call to fetch data $.ajax({ url: 'rule_equation_graph.php', method: 'GET', dataType: 'json', success: function(response) { $('#annualLoadingIcon').hide(); console.log('res:', response); updateTable(response); // Create or update Spirometry chart if (spirometryChart) { spirometryChart.destroy(); } createSpirometryChart(response); // Create or update Department chart if (departmentChart) { departmentChart.destroy(); } createDepartmentChart(response); // Create or update Department Abnormality chart if (departmentAbnormalityChart) { departmentAbnormalityChart.destroy(); } createDepartmentAbnormalityChart(response); }, error: function(xhr, status, error) { $('#annualLoadingIcon').hide(); console.error('AJAX Error: ' + status + error); } }); isContentVisible = true; } }); function createSpirometryChart(data) { const fvcData = data.FVC.abnormality_counts; const fev1Data = data.FEV1.abnormality_counts; const spirometryData = { labels: ['Mild', 'Moderate', 'Severe'], datasets: [{ label: 'FVC (Restrictive)', data: [fvcData['Mild'], fvcData['Moderate'], fvcData['Severe']], backgroundColor: '#01b4c6', borderColor: '#01b4c6', borderWidth: 1 }, { label: 'FEV1 (Obstructive)', data: [fev1Data['Mild'], fev1Data['Moderate'], fev1Data['Severe']], backgroundColor: '#c4acf3', borderColor: '#c4acf3', borderWidth: 1 } ] }; const spirometryConfig = { type: 'bar', data: spirometryData, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, stacked: true, ticks: { stepSize: 1 } }, x: { stacked: true } }, plugins: { legend: { display: true, position: 'bottom' }, title: { display: true, text: 'ABNORMAL SPIROMETRY' } } } }; const spirometryCtx = document.getElementById('abnormalSpirometryChart').getContext('2d'); spirometryChart = new Chart(spirometryCtx, spirometryConfig); } function createDepartmentChart(data) { const departmentWiseCounts = data.department_wise_counts; const departments = Object.keys(departmentWiseCounts); const mildCounts = departments.map(dept => departmentWiseCounts[dept].Mild); const moderateCounts = departments.map(dept => departmentWiseCounts[dept].Moderate); const severeCounts = departments.map(dept => departmentWiseCounts[dept].Severe); const departmentData = { labels: departments, datasets: [{ label: 'Mild', data: mildCounts, backgroundColor: '#fed700', borderColor: '#fed700', borderWidth: 1 }, { label: 'Moderate', data: moderateCounts, backgroundColor: 'rgba(54, 162, 235, 0.6)', borderColor: 'rgba(54, 162, 235, 0.6)', borderWidth: 1 }, { label: 'Severe', data: severeCounts, backgroundColor: '#fe6347', borderColor: '#fe6347', borderWidth: 1 } ] }; const departmentConfig = { type: 'bar', data: departmentData, options: { responsive: true, maintainAspectRatio: false, scales: { x: { beginAtZero: true, stacked: true }, y: { beginAtZero: true, stacked: true, ticks: { stepSize: 1 } } }, plugins: { legend: { display: true, position: 'bottom' }, title: { display: true, text: 'DEPARTMENT WISE SEVERITY DISTRIBUTION' } } } }; const departmentCtx = document.getElementById('departmentChart').getContext('2d'); departmentChart = new Chart(departmentCtx, departmentConfig); } function createDepartmentAbnormalityChart(data) { const departmentCounts = data.department_wise_counts; const labels = Object.keys(departmentCounts); const abnormalData = []; const normalData = []; labels.forEach(department => { const abnormalityTotal = departmentCounts[department].Mild + departmentCounts[department].Moderate + departmentCounts[department].Severe; abnormalData.push(abnormalityTotal); normalData.push(departmentCounts[department].Normal); }); const chartData = { labels: labels, datasets: [{ label: 'Abnormal', data: abnormalData, backgroundColor: '#fed700', borderColor: '#fed700', borderWidth: 1 }, { label: 'Normal', data: normalData, backgroundColor: '#01b4c6', borderColor: '#01b4c6', borderWidth: 1 } ] }; const departmentAbnormalityConfig = { type: 'bar', data: chartData, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, stacked: true, ticks: { stepSize: 1 } }, x: { stacked: true } }, plugins: { legend: { display: true, position: 'bottom' }, title: { display: true, text: 'DEPARTMENT WISE ABNORMALITY vs NORMAL' } } } }; const departmentAbnormalityCtx = document.getElementById('departmentAbnormalityChart').getContext('2d'); departmentAbnormalityChart = new Chart(departmentAbnormalityCtx, departmentAbnormalityConfig); } function updateTable(data) { let fvcData = data.FVC.abnormality_counts; $("#fvc-mild").text(fvcData.Mild || 0); $("#fvc-moderate").text(fvcData.Moderate || 0); $("#fvc-severe").text(fvcData.Severe || 0); let fev1Data = data.FEV1.abnormality_counts; $("#fev1-mild").text(fev1Data.Mild || 0); $("#fev1-moderate").text(fev1Data.Moderate || 0); $("#fev1-severe").text(fev1Data.Severe || 0); let totalMild = (fvcData.Mild || 0) + (fev1Data.Mild || 0); let totalModerate = (fvcData.Moderate || 0) + (fev1Data.Moderate || 0); let totalSevere = (fvcData.Severe || 0) + (fev1Data.Severe || 0); $("#total-mild").text(totalMild); $("#total-moderate").text(totalModerate); $("#total-severe").text(totalSevere); let totalAbnormal = totalMild + totalModerate + totalSevere; let totalNormal = fvcData.Normal + fev1Data.Normal; $("#total-normal").text(totalNormal); let grandTotal = totalMild + totalModerate + totalSevere; let Total = grandTotal + totalNormal; $("#grand-total").text(grandTotal); $("#total-count").text(Total); } }); //abnormal audiometry $(document).ready(function() { let isAbnormalContentVisible = false; let audiospirometryChart = null; let audiodepartmentChart = null; let audiodepartmentAbnormalityChart = null; $('#abnormalHeader').on('click', function() { if (isAbnormalContentVisible) { $('#abnormalContainer, #abnormalgraphContainer').slideUp(); isAbnormalContentVisible = false; } else { $('#abnormalLoadingIcon').show(); $('#abnormalContainer, #abnormalgraphContainer').slideDown(); $.ajax({ url: 'abnormality_count.php', type: 'GET', dataType: 'json', success: function(response) { console.log(response) $('#abnormalLoadingIcon').hide(); let overalldata = response['OverallCounts']; updateAudioTable(overalldata); // Destroy old chart instances if they exist if (audiospirometryChart) audiospirometryChart.destroy(); if (audiodepartmentChart) audiodepartmentChart.destroy(); if (audiodepartmentAbnormalityChart) audiodepartmentAbnormalityChart.destroy(); // Create new charts audiospirometryChart = createAudioSeverityChart(overalldata); audiodepartmentChart = createAudioDepartmentChart(response); audiodepartmentAbnormalityChart = createDepartmentAudioAbnormalityChart(response); }, error: function(xhr, status, error) { $('#abnormalLoadingIcon').hide(); console.error('AJAX Error:', status, error); } }); isAbnormalContentVisible = true; } }); function updateAudioTable(data) { $('#audio-mild-count').text(data['Mild Hearing Loss'] || 0); $('#audio-moderate-count').text(data['Moderate Hearing Loss'] || 0); $('#audio-severe-count').text(data['Severe Hearing Loss'] || 0); $('#audio-normal-count').text(data['Normal'] || 0); let totalAbnormal = (data['Mild Hearing Loss'] || 0) + (data['Moderate Hearing Loss'] || 0) + (data['Severe Hearing Loss'] || 0); $('#audio-total-abnormal').text(totalAbnormal); let grandTotal = totalAbnormal + (data['Normal'] || 0); $('#audio-grand-total').text(grandTotal); } function createAudioSeverityChart(data) { let ctx = document.getElementById('audio-severity-chart').getContext('2d'); return new Chart(ctx, { type: 'bar', data: { labels: ['Mild', 'Moderate', 'Severe'], datasets: [{ label: 'Severity Classification', data: [ data['Mild Hearing Loss'] || 0, data['Moderate Hearing Loss'] || 0, data['Severe Hearing Loss'] || 0 ], backgroundColor: ['#fed700', 'rgba(54, 162, 235, 0.6)', '#fe6347'], borderColor: ['#fed700', 'rgba(54, 162, 235, 0.6)', '#fe6347'], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }, plugins: { legend: { display: true, position: 'bottom' }, title: { display: true, text: 'SEVERITY CLASSIFICATION' } } } }); } function createAudioDepartmentChart(data) { const departmentWiseCounts = data.DepartmentWiseCounts; const departments = Object.keys(departmentWiseCounts); const mildCounts = departments.map(dept => departmentWiseCounts[dept]['Mild Hearing Loss'] || 0); const moderateCounts = departments.map(dept => departmentWiseCounts[dept]['Moderate Hearing Loss'] || 0); const severeCounts = departments.map(dept => departmentWiseCounts[dept]['Severe Hearing Loss'] || 0); let ctx = document.getElementById('audiodepartmentChart').getContext('2d'); return new Chart(ctx, { type: 'bar', data: { labels: departments, datasets: [{ label: 'Mild Hearing Loss', data: mildCounts, backgroundColor: '#fed700', borderColor: '#fed700', borderWidth: 1 }, { label: 'Moderate Hearing Loss', data: moderateCounts, backgroundColor: 'rgba(54, 162, 235, 0.6)', borderColor: 'rgba(54, 162, 235, 0.6)', borderWidth: 1 }, { label: 'Severe Hearing Loss', data: severeCounts, backgroundColor: '#fe6347', borderColor: '#fe6347', borderWidth: 1 }] }, options: { scales: { x: { beginAtZero: true, stacked: true }, y: { beginAtZero: true, stacked: true, ticks: { stepSize: 1 } } }, plugins: { legend: { display: true, position: 'bottom' }, title: { display: true, text: 'DEPARTMENT WISE AUDIO SEVERITY' } } } }); } function createDepartmentAudioAbnormalityChart(data) { const departmentCounts = data.DepartmentWiseCounts; const labels = Object.keys(departmentCounts); const abnormalData = []; const normalData = []; labels.forEach(department => { const abnormalityTotal = departmentCounts[department]['Mild Hearing Loss'] + departmentCounts[department]['Moderate Hearing Loss'] + departmentCounts[department]['Severe Hearing Loss']; abnormalData.push(abnormalityTotal); normalData.push(departmentCounts[department]['Normal']); }); let ctx = document.getElementById('departmentaudioAbnormalityChart').getContext('2d'); const chartData = { labels: labels, datasets: [{ label: 'Abnormal', data: abnormalData, backgroundColor: '#fed700', borderColor: '#fed700', borderWidth: 1 }, { label: 'Normal', data: normalData, backgroundColor: '#01b4c6', borderColor: '#01b4c6', borderWidth: 1 } ] }; return new Chart(ctx, { type: 'bar', data: chartData, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, stacked: true, ticks: { stepSize: 1 } }, x: { stacked: true } }, plugins: { legend: { display: true, position: 'bottom' }, title: { display: true, text: 'DEPARTMENT WISE ABNORMALITY vs NORMAL' } } } }); } }); //ppbs report $(document).ready(function() { let chartLoaded = false; const chartElement = document.getElementById('abnormalbloodsugarlevel'); const header = document.getElementById('ppbs-header'); const loadingIconId = 'ppbsLoadingIcon'; header.addEventListener('click', function() { // Toggle content visibility $("#ppbs-content").toggle(); // Only make the AJAX request if the content is visible and the chart is not loaded if ($("#ppbs-content").is(":visible") && !chartLoaded) { showLoadingIcon(true, loadingIconId); $("#abnormalbloodsugarlevel").show(); // Show the canvas $.ajax({ url: 'ppbs_rule_equation.php', type: 'GET', dataType: 'json', success: function(response) { const ppbsData = response.PPBS.abnormality_counts; updatePPBSTable(ppbsData); const spirometryConfig = { type: 'bar', data: { labels: ['Abnormality Levels'], // X-axis labels datasets: [{ label: 'Mild', data: [ppbsData['Mild']], backgroundColor: '#fed700', borderColor: '#fed700', borderWidth: 1 }, { label: 'Moderate', data: [ppbsData['Moderate']], backgroundColor: 'rgba(54, 162, 235, 0.6)', borderColor: 'rgba(54, 162, 235, 0.6)', borderWidth: 1 }, { label: 'Severe', data: [ppbsData['Severe']], backgroundColor: '#fe6347', borderColor: '#fe6347', borderWidth: 1 } ] }, options: { scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }, plugins: { legend: { display: true, position: 'bottom' }, title: { display: true, text: 'SEVERITY CLASSIFICATION' } } } }; const spirometryCtx = chartElement.getContext('2d'); new Chart(spirometryCtx, spirometryConfig); // Create the chart chartLoaded = true; showLoadingIcon(false, loadingIconId); // Hide the loading icon }, error: function(xhr, status, error) { console.error("Error fetching data: ", status, error); showLoadingIcon(false, loadingIconId); // Hide the loading icon } }); } }); function showLoadingIcon(show, loadingIconId) { document.getElementById(loadingIconId).style.display = show ? 'block' : 'none'; } function updatePPBSTable(data) { $('#ppbs-mild-count').text(data['Mild']); $('#ppbs-moderate-count').text(data['Moderate']); $('#ppbs-severe-count').text(data['Severe']); $('#ppbs-normal-count').text(data['Normal']); const totalAbnormal = data['Mild'] + data['Moderate'] + data['Severe']; $('#ppbs-total-abnormal').text(totalAbnormal); const grandTotal = totalAbnormal + data['Normal']; $('#ppbs-grand-total').text(grandTotal); } }); //blood pressure $(document).ready(function() { let bpchartLoaded = false; const bpchartElement = document.getElementById('abnormalbloodpressurelevel'); const bpheader = document.getElementById('bp-header'); const bploadingIconId = 'bpLoadingIcon'; bpheader.addEventListener('click', function() { $("#bp-content").toggle(); if ($("#bp-content").is(":visible") && !bpchartLoaded) { showLoadingIcon(true, bploadingIconId); $("#abnormalbloodpressurelevel").show(); $.ajax({ url: 'bp_rule_equation.php', type: 'GET', dataType: 'json', success: function(data) { console.log("bp", data); updateBPTable(data); const sbpData = data.SBP.abnormality_counts; const dbpData = data.DBP.abnormality_counts; const spirometryBpConfig = { type: 'bar', data: { labels: ['Abnormality Levels'], datasets: [{ label: 'Prehypertension', data: [sbpData['PREHYPERTENSION'] + dbpData['PREHYPERTENSION']], backgroundColor: '#fed700', borderColor: '#fed700', borderWidth: 1 }, { label: 'Hypertension - 1st Stage', data: [sbpData['STAGE1 HYPERTENSION'] + dbpData['STAGE1 HYPERTENSION']], backgroundColor: 'rgba(54, 162, 235, 0.6)', borderColor: 'rgba(54, 162, 235, 0.6)', borderWidth: 1 }, { label: 'Hypertension - 2nd Stage', data: [sbpData['STAGE2 HYPERTENSION'] + dbpData['STAGE2 HYPERTENSION']], backgroundColor: '#fe6347', borderColor: '#fe6347', borderWidth: 1 } ] }, options: { scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }, plugins: { legend: { display: true, position: 'bottom', }, title: { display: true, text: 'Abnormal Blood Pressure Levels', } }, } }; const spirometryBpCtx = document.getElementById('abnormalbloodpressurelevel').getContext('2d'); new Chart(spirometryBpCtx, spirometryBpConfig); bpchartLoaded = true; showLoadingIcon(false, bploadingIconId); }, error: function(xhr, status, error) { console.error("Error fetching data: ", status, error); showLoadingIcon(false, bploadingIconId); } }); } }); function showLoadingIcon(show, loadingIconId) { document.getElementById(loadingIconId).style.display = show ? 'block' : 'none'; } function updateBPTable(data) { const prehypertensionTotal = data.SBP.abnormality_counts["PREHYPERTENSION"] + data.DBP.abnormality_counts["PREHYPERTENSION"]; const stage1Total = data.SBP.abnormality_counts["STAGE1 HYPERTENSION"] + data.DBP.abnormality_counts["STAGE1 HYPERTENSION"]; const stage2Total = data.SBP.abnormality_counts["STAGE2 HYPERTENSION"] + data.DBP.abnormality_counts["STAGE2 HYPERTENSION"]; const normalTotal = data.SBP.abnormality_counts["NORMAL"] + data.DBP.abnormality_counts["NORMAL"]; const grandTotal = prehypertensionTotal + stage1Total + stage2Total + normalTotal; $('#prehypertension').text(prehypertensionTotal); $('#stage1').text(stage1Total); $('#stage2').text(stage2Total); $('#bpnormal').text(normalTotal); $('#prehypertension-total').text(prehypertensionTotal + stage1Total + stage2Total); $('#bp-grand-total').text(grandTotal); } }); //Abnormal Body Mass Index and Abnormal Haemoglobin levels $(document).ready(function() { let bmichartLoaded = false; const bmiChartElement = document.getElementById('abnormalbmilevel'); const hbgChartElement = document.getElementById('abnormalhbglevel'); const bmiHeader = document.getElementById('bmi-header'); const bmiLoadingIconId = 'bmiLoadingIcon'; bmiHeader.addEventListener('click', function() { $("#bmi-content").toggle(); if ($("#bmi-content").is(":visible") && !bmichartLoaded) { showLoadingIcon(true, bmiLoadingIconId); $("#abnormalbmilevel, #abnormalhbglevel").show(); $.ajax({ url: 'bp_rule_equation.php', type: 'GET', dataType: 'json', success: function(data) { console.log("bp", data); updateBMITable(data); updateHBGTable(data); const bmiData = data.BMI.abnormality_counts; const hbgData = data.HBG.abnormality_counts; const spirometryBmiConfig = { type: 'pie', data: { labels: ['Underweight', 'Overweight', 'Obese'], datasets: [{ label: 'Abnormality Levels', data: [bmiData['UNDERWEIGHT'], bmiData['OVERWEIGHT'], bmiData['OBESE']], backgroundColor: ['#ffff00', '#faa700', '#fe6347'], borderColor: ['#ffff00', '#faa700', '#fe6347'], borderWidth: 1 }] }, options: { plugins: { legend: { display: true, position: 'bottom', }, title: { display: true, text: 'Abnormal Body Mass', } }, } }; const spirometryBmiCtx = bmiChartElement.getContext('2d'); new Chart(spirometryBmiCtx, spirometryBmiConfig); const spirometryHbgConfig = { type: 'bar', data: { labels: ['Abnormality Levels'], datasets: [{ label: 'Mild', data: [hbgData['Mild']], backgroundColor: '#ffff00', borderColor: '#ffff00', borderWidth: 1 }, { label: 'Moderate', data: [hbgData['Moderate']], backgroundColor: '#faa700', borderColor: '#faa700', borderWidth: 1 }, { label: 'Severe', data: [hbgData['Severe']], backgroundColor: '#fe6347', borderColor: '#fe6347', borderWidth: 1 } ] }, options: { scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }, plugins: { legend: { display: true, position: 'bottom', }, title: { display: true, text: 'Anemia', } }, } }; const spirometryHbgCtx = hbgChartElement.getContext('2d'); new Chart(spirometryHbgCtx, spirometryHbgConfig); bmichartLoaded = true; showLoadingIcon(false, bmiLoadingIconId); }, error: function(xhr, status, error) { console.error("Error fetching data: ", status, error); showLoadingIcon(false, bmiLoadingIconId); } }); } }); function showLoadingIcon(show, loadingIconId) { document.getElementById(loadingIconId).style.display = show ? 'block' : 'none'; } function updateBMITable(data) { const underweight = data.BMI.abnormality_counts["UNDERWEIGHT"]; const overweight = data.BMI.abnormality_counts["OVERWEIGHT"]; const obese = data.BMI.abnormality_counts["OBESE"]; const normal = data.BMI.abnormality_counts["NORMAL"]; const grandTotal = underweight + overweight + obese + normal; $('#underweight').text(underweight); $('#overweight').text(overweight); $('#obese').text(obese); $('#bminormal').text(normal); $('#underweight-total').text(underweight + overweight + obese); $('#bmi-grand-total').text(grandTotal); } function updateHBGTable(data) { const hbgMild = data.HBG.abnormality_counts["Mild"]; const hbgModerate = data.HBG.abnormality_counts["Moderate"]; const hbgSevere = data.HBG.abnormality_counts["Severe"]; const hbgNormal = data.HBG.abnormality_counts["NORMAL"]; const grandTotal = hbgMild + hbgModerate + hbgSevere + hbgNormal; $('#hbg-mild').text(hbgMild); $('#hbg-moderate').text(hbgModerate); $('#hbg-severe').text(hbgSevere); $('#hbg-normal').text(hbgNormal); $('#hbg-mild-total').text(hbgMild + hbgModerate + hbgSevere); $('#hbg-grand-total').text(grandTotal); } }); </script>