<div class="wraper responsive-width"> <main class="" id="main"> <div class="main-wrap"> <div class="dashboard-cover"> <div class="common-heading"> <h2>DashBoard</h2> </div> <div class="dashboard-menu-wrap new-dashboard"> <div class="dashboard-tabs"> <a href="<?= base_url(); ?>admin/subject" class="dashboard-tab-link"> <img src="<?= base_url(); ?>assets_admin/images/icons/subjects.png"> <div class="tab-sub-sec"> <h3 class="tab-number"><?php echo ($subject_count) ? $subject_count : '0' ?></h3> <p>Subjects</p> </div> </a> </div> <div class="dashboard-tabs"> <a href="<?= base_url(); ?>admin/course"> <img src="<?= base_url(); ?>assets_admin/images/icons/courses.png"> <div class="tab-sub-sec"> <h3 class="tab-number"><?php echo ($course_count) ? $course_count : '0' ?></h3> <p>Courses</p> </div> </a> </div> <div class="dashboard-tabs"> <a href="<?= base_url(); ?>admin/classroom"> <img src="<?= base_url(); ?>assets_admin/images/icons/classrooms.png"> <div class="tab-sub-sec"> <h3 class="tab-number"><?php echo ($classroom_count) ? $classroom_count : '0' ?></h3> <p>Classrooms</p> </div> </a> </div> <div class="dashboard-tabs"> <a href="<?= base_url(); ?>admin/teacher"> <img src="<?= base_url(); ?>assets_admin/images/icons/teachers.png"> <div class="tab-sub-sec"> <h3 class="tab-number"><?php echo ($teacher_count) ? $teacher_count : '0' ?></h3> <p>Teachers</p> </div> </a> </div> <div class="dashboard-tabs"> <a href="<?= base_url(); ?>admin/student"> <img src="<?= base_url(); ?>assets_admin/images/icons/students.png"> <div class="tab-sub-sec"> <h3 class="tab-number"><?php echo ($student_count) ? $student_count : '0' ?></h3> <p>Students</p> </div> </a> </div> <div class="dashboard-tabs"> <a href="<?= base_url(); ?>admin/exam-view"> <img src="<?= base_url(); ?>assets_admin/images/icons/exams.png"> <div class="tab-sub-sec"> <h3 class="tab-number"><?php echo ($exam_count) ? $exam_count : '0' ?></h3> <p>Exam</p> </div> </a> </div> <div class="dashboard-tabs"> <a href="<?= base_url(); ?>admin/online_session_list"> <img src="<?= base_url(); ?>assets_admin/images/icons/lectures.png"> <div class="tab-sub-sec"> <h3 class="tab-number"><?php echo ($session_count) ? $session_count : '0' ?></h3> <p>Lectures</p> </div> </a> </div> <div class="dashboard-tabs"> <a href="<?= base_url(); ?>admin/get_application"> <img src="<?= base_url(); ?>assets_admin/images/icons/enrollments.png"> <div class="tab-sub-sec"> <h3 class="tab-number"><?php echo ($application_count) ? $application_count : '0' ?></h3> <p>Enrollments</p> </div> </a> </div> </div> <!-- <button type="button" class="btn btn-success" onclick="<?php echo base_url() ?>Admin/sendSMS()">Sign Up</button> --> <div class="subject_lsec dashboard_graph"> <div class="report_sec_cover"> <!-- chart data --> <div class="row"> <div class="col-md-12"> <div class="subject_lhead">Girl's and Boy's Count</div> </div> <div class="col-md-4"> <select id="course_name" name="course_name"> <?php if (!empty($courses)) { ?> <option value="">--- Select Course ----</option> <?php foreach ($courses as $key => $value) { ?> <option value="<?php echo $value['id'] ?>"> <?php echo $value['course_name'] ?></option> <?php } } ?> </select> </div> <div class="col-md-4"> <select id="section" name="section_name" style="width:253px"> </select> </div> <div class="col-md-4"> </div> </div> <div class="row"> <div class="col-md-8"> <div class="charts_section mx-3 my-3" id="girls-boys-chart"> <div class="text-center mt-4" id="data_hidden"> <h5>Select the Course to view Chart</h5> </div> </div> </div> </div> </div> </div> <form method="post" action="<?php echo base_url(); ?>admin/send-message"> <input type="submit" name="submit" class="btn btn-success" value="Submit"> </form> </div> </div> </main> <!--End right-top side--> </div> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/drilldown.js"></script> <script> $(document).ready(function() { $('.user-drpdown').click(function() { $('.drpdown-items').toggle(); }); }); </script> <script> // var graph_data = <?php //echo json_encode($graph_data); ?>; // console.log(graph_data); // Highcharts.setOptions({ // lang: { // drillUpText: '<< Back' // } // }); // Highcharts.chart('recoveryGraf', { // chart: { // type: 'pie' // }, // title: { // text: '' // }, // plotOptions: { // series: { // dataLabels: { // enabled: true, // format: '{point.name}: {point.y:.1f}' // } // } // }, // tooltip: { // headerFormat: '<span style="font-size:11px">{series.name}</span><br>', // pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>' // }, // series: [{ // name: 'Fee Report', // colorByPoint: true, // colors: ['#032da1', '#133ba7', '#2449ad', '#3557b3', '#4665ba', '#5773c0', '#6781c6', '#788fcd', '#899dd3'], // data: [ // <?php // foreach ($graph_data as $v) { // echo "['" . $v['typename'] . "'," . $v['total'] . "],\n"; // } ?> // ] // }], // drilldown: { // series: [{ // name: 'Recycleds', // id: 'Recycleds', // colors: ['#032da1', '#133ba7', '#2449ad', '#3557b3', '#4665ba', '#5773c0', '#6781c6', '#788fcd', '#899dd3'], // data: [ // <?php // foreach ($graph_data as $v) { // echo "['" . $v['typename'] . "'," . $v['total'] . "],\n"; // } ?> // ] // }] // } // }); function theGirlsandBoyChart(boy, girl) { boy = parseInt(boy); girl = parseInt(girl); $('#data_hidden').hide(); var data_title = 'Chart Description'; //Type can be : line, spline, area, areaspline, column, bar, pie, scatter, gauge, arearange, areasplinerange and columnrange $('#girls-boys-chart').highcharts({ chart: { type: 'column', borderWidth: 0 }, title: { text: data_title }, plotOptions: { borderWidth: 0 }, xAxis: { title: { text: 'Girls And Boys', }, min: 1, tickInterval: 1, }, yAxis: { title: { text: 'Total Count', }, }, series: [{ name: "Boy's", data: [0, boy] }, { name: "Girl's", data: [0, girl] }, ] }); //To hide the text "Highcharts.com" which comes as default //$('.highcharts-credits').hide(); //$('.highcharts-legend-item').hide(); } $('#course_name').change(function() { var id = $(this).find(":selected").val(); $.ajax({ url: '<?php echo base_url() . 'admin/get_sections_from_classroom/' ?>' + id, type: 'GET', dataType: 'json', success: function(result) { let section = ''; section += '<option value=""> - Select Section - </option>'; $.each(result, function(key, value) { section += '<option value="' + value['id'] + '">' + value['section_name'] + '</option>'; }); $("#section").html(section); } }); var course_id = $('#course_name').find(":selected").val(); if (course_id > 0) { $.ajax({ url: '<?php echo base_url() . 'admin/get_count_of_girl_and_boy/' ?>' + course_id + '/0', type: 'GET', dataType: 'json', success: function(result) { theGirlsandBoyChart(result['male'], result['female']); } }); } else { alert("Please select the Course "); } }); $('#section').change(function() { var course_id = $('#course_name').find(":selected").val(); var section_id = $(this).find(":selected").val(); if (course_id > 0 && section_id > 0) { $.ajax({ url: '<?php echo base_url() . 'admin/get_count_of_girl_and_boy/' ?>' + course_id + '/' + section_id, type: 'GET', dataType: 'json', success: function(result) { theGirlsandBoyChart(result['male'], result['female']); } }); } else { alert("select the course or section"); } }); </script>