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>

<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>&nbsp;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">
                                    <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>

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

$.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>

<script>
    function goBack() {
        window.location.href = "<?php echo base_url('report-page');?>";
    }
</script>

<?php echo view('includes/footer'); ?>