EVOLUTION-NINJA
Edit File: student_report.php
<?php echo view('includes/home_sidebar');?> <link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel='stylesheet'> <style> #leftDiv{ height: 1090px; } .table-report .thead-std { background-color: #005054 !important; color: white; } .table-report tbody tr td:nth-child(1) { background-color: #E2ECFF; color: black; } .table-report tbody tr td:nth-child(2) { color: black; } .table-report tbody tr td:nth-child(3) { color: black; } .sto-chart { background-color: #affae1; padding: 10px; border-radius: 10px; } .btn-fee { background-color: #005054; color: white; } .btn-fee:hover { background-color: #005054; color: white; } .btn-report { background-color: #6fa60b; color: white; float: right; } .btn-report:hover { background-color: #6fa60b; color: white; } </style> <main id="rightDiv"> <div class="container-fluid "> <div class="row fee-structure"> <div class="col-sm-6"> <h2 style="color: #005054;">Student Report</h2> </div> <div class="col-sm-4"> </div> <div class="col-sm-2"> <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button> </div> </div> <!-- --> <div class="row mt-3"> <div class="col-sm-12 "> <div class="row"> <div class="col-sm-8"> <form id="fee-report"> <div class="row"> <div class="col-sm-4"> <label>From</label> <input type="text" name="fromdate" id="fromdate" class="form-control" autocomplete="off" /> </div> <div class="col-sm-4 ml-1"> <label>To</label> <input type="text" name="todate" id="todate" class="form-control" autocomplete="off" /> </div> <!-- <div class="col-sm-3 mt-4"> </div> --> <div class="col-sm-3 mt-4"> <button type="submit" class="btn btn-report">Get Report</button> </div> </div> <span class='mt-3'>** This reports shows only completed student details **</span> <div class="alert alert-warning mt-3" id='warning' role="alert"> Default last 3 month Report </div> </form> </div> <div class="col-sm-2 mt-4"> <button id="export-to-excel-btn" class="btn btn-fee" onclick="exportToPdf()">Export to Pdf</button> </div> </div> <!-- table --> <div class="row mt-3" id="pdf-div"> <div class="col-sm-7"> <table class="table table-bordered text-center table-report mt-3"> <!-- --> <thead> <tr> <th class="thead-std">Header</th> <th class="thead-std">Number Of Student</th> <th class="thead-std">Percentage</th> </tr> </thead> <!-- --> <tbody id="report-body"> </tbody> </table> </div> <div class="col-sm-4 mt-3"> <h5>Total Students = <span id="total"></span></h5> <div style="width: 100%; max-width: 600px; margin: auto;"> <canvas id="chart" style="max-width: 100%; height: 400px;"></canvas> </div> </div> </div> </div> </div> </div> </main> </section> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.all.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script> <script> // setTimeout(() => { // $('#warning').hide(); // }, 3000); $(document).ready(function () { $("#fromdate").datepicker({ dateFormat: 'yy-mm-dd' }); $("#todate").datepicker({ dateFormat: 'yy-mm-dd' }); $('#fee-report').submit(function (e) { e.preventDefault(); var formData = new FormData($(this)[0]); // $('#warning').hide(); studentreport(formData); }); function studentreport(formData) { $.ajax({ type: 'post', url: "<?php echo base_url('student-report-main');?>", data: formData, contentType: false, processData: false, success: function (response) { if (response.result == 1) { var data = response.data; var totalStudents = data.totalstudnets; var tbody = $('#report-body'); tbody.empty(); var series = []; var labels = []; $.each(data, function (header, count) { if (header !== 'totalstudnets') { var percentage = (totalStudents > 0) ? ((count / totalStudents) * 100).toFixed(2) : 0; var row = '<tr>' + '<td>' + header + '</td>' + '<td>' + count + '</td>' + '<td>' + percentage + '%</td>' + '</tr>'; tbody.append(row); series.push(count); labels.push(header); } }); var totalRow = '<tr>' + '<td><strong>Total</strong></td>' + '<td><strong>' + totalStudents + '</strong></td>' + '<td><strong>100%</strong></td>' + '</tr>'; tbody.append(totalRow); $('#total').text(totalStudents); piechart(series, labels); } else { Swal.fire({ icon: "error", title: response.message, showConfirmButton: false, timer: 1000 }); } }, error: function (xhr, status, error) { Swal.fire({ icon: "error", title: "An error occurred", text: error, showConfirmButton: false, timer: 2000 }); } }); } $('#fee-report').submit(); }); let myChart; function piechart(series, labels) { const ctx = document.getElementById('chart').getContext('2d'); if (myChart) { myChart.destroy(); } function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } const backgroundColors = series.map(() => getRandomColor()); const data = { labels: labels, datasets: [{ label: 'Student Report', data: series, backgroundColor: backgroundColors, hoverOffset: 4 }] }; const config = { type: 'doughnut', data: data, }; myChart = new Chart(ctx, config); } </script> <script> function exportToPdf() { var pdfDiv = document.getElementById('pdf-div'); var doc = new jsPDF('p', 'mm', 'a4'); html2canvas(pdfDiv, { scale: 2, useCORS: true, onclone: function (clonedDoc) { clonedDoc.getElementById('chart').style.display = 'block'; } }).then(canvas => { var imgData = canvas.toDataURL('image/png'); var imgWidth = 210; var pageHeight = 297; var imgHeight = canvas.height * imgWidth / canvas.width; var heightLeft = imgHeight; var position = 0; doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); heightLeft -= pageHeight; while (heightLeft >= 0) { position = heightLeft - imgHeight; doc.addPage(); doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); heightLeft -= pageHeight; } doc.save('students report.pdf'); }); } </script> <!-- BACK BUTTON SCRIPT --> <script> function goBack() { window.location.href = "<?php echo base_url('report-page');?>"; } </script> <?php echo view('includes/footer'); ?>