<style> .dashboard-tabs a { justify-content: start; } .dashboard-tabs .tab-sub-sec p { font-size: 14px; font-weight: 500; } </style> <div class="wraper responsive-width"> <main class="" id="main"> <div class="main-wrap"> <div class="dashboard-cover"> <div class="common-heading"> <h2>Inventory DashBoard</h2> </div> <div class="row"> <div class="dashboard-tabs col"> <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>Total Items</p> </div> </a> </div> <div class="dashboard-tabs col"> <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>Total Purchase</p> </div> </a> </div> <div class="dashboard-tabs col"> <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>Total Sales</p> </div> </a> </div> <div class="dashboard-tabs col"> <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>Total Stocks</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>