<?php include('techsyn_header.php'); include('log_entry.php'); // if (! isset ( $_SESSION ['RoleCode'] ) || $_SESSION ['RoleCode'] != "RCP") { // echo "<script>location.href='accessDenied.php'</script>"; // } ?> <link rel="stylesheet" href="css/wizard.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script> <style type="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> .hidden-radio { position: absolute; top: 11px; left: 27px; width: 60px; height: 60px; border-radius: 100%; background: #fff; opacity: 0; cursor: pointer; } </style> <style> .myDiv{ display:none; padding:10px 0; } .fixed_headers { width: 100%; table-layout: fixed; border-collapse: collapse; } .fixed_headers th { text-decoration: underline; } .fixed_headers th, .fixed_headers td { padding: 5px; text-align: left; border: 1px solid; } .fixed_headers td:nth-child(1), .fixed_headers th:nth-child(1) { min-width: 200px; } .fixed_headers td:nth-child(2), .fixed_headers th:nth-child(2) { min-width: 200px; } .fixed_headers td:nth-child(3), .fixed_headers th:nth-child(3) { width: 350px; } .fixed_headers thead { background-color: #333; color: #FDFDFD; } .fixed_headers thead tr { display: block; position: relative; } .fixed_headers tbody { display: block; overflow: auto; width: 100%; height: 100px; } .fixed_headers tbody tr:nth-child(even) { background-color: #DDD; } </style> <?php if ($_SESSION['RoleId'] == 7) { echo "<script>window.location.replace('emp_details.php')</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'); ?> <!--breadcrumb--> <?php // print_r($_SESSION); ?> <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="container-fluid"> <form name="rule_chart" id="rule_chart"> <div class="row"></div> <div class="row"> <div class="col-sm-4"> <label>OHC TYPE</label> <select id="ohc_type_id" name="ohc_type_id" style="width:100%"> <option value="">select ohc</option> <?php echo generateOption('ohc_type','ohc_type_name','ohc_type_id','',''); ?> </select> </div> <div class="col-sm-4" > <label>Chart name</label> <select name='chart_id' id='chart_id' style="width:100%" onchange="selectresults(this.value);"> <option value="" disabled="" selected="">select chart type</option> <?php echo generateOption('rule_chart', 'chart_name', 'chart_id', '', '') ?> </select> </div> <div class="col-sm-4"> <label>Gender</label> <select name="rule_gender" id="rule_gender" style="width:100%"> <option value="">ALL</option> <option value="M">Male</option> <option value="F">Female</option> </select> </div> </div> <div class="row"> <div class="col-sm-4" style="padding: 10px;"> <label>result</label> <!-- <input type="text" name="rule_result" id="rule_result" /> --> <select name="rule_result" id="rule_result" style="width:100%"> <option value="" disabled="" selected="">select the result option </option> </select> </div> <div class="col-sm-4" style="padding: 10px;"> <div class="col-sm-6"> <label>Date FROM</label> <input type="Date" name="rule_start_date" id="rule_start_date" style="width:100%;"/> </div> <div class="col-sm-6"> <label>DATE TO</label> <input type="Date" name="rule_end_date" id="rule_end_date" style="width:100%;" /> </div> </div> <div class="col-sm-4" style="padding: 10px;"> <label>Filter Option</label> <select id="myselection" style="width:100%;"> <option>Select Filter Option</option> <option value="Two">use fiter for particular entity</option> <option value="Three">For multi entities(i.e multiple departments etc based on result)</option> </select> </div> <div class="row"></div> <div id="showThree" class="myDiv"> <div class="col-sm-6"> <label> select type</label> <select id="chart_type_id" name="chart_type_id" style="width:100%"> <option value="">select type</option> <option value="department">Department wise</option> <option value="designation">Designation wise</option> <option value="client">Client wise</option> </select> </div> </div> <div id="showTwo" class="myDiv"> <div class="col-sm-4" style="padding: 10px;"> <label>Department</label> <select id="dept" name="dept" style="width:100%"> <option value="">select department</option> <?php echo generateOption('department','dept_name','dept_id','',''); ?> </select> </div> <div class="col-sm-4" style="padding: 10px;"> <label>Designation</label> <select id="desig" name="desig" style="width:100%"> <option value="">select designation</option> <?php echo generateOption('designation','designation_name','designation_id','',''); ?> </select> </div> <div class="col-sm-4" style="padding: 10px;"> <label>cient</label> <select id="cli" name="cli" style="width:100%"> <option value="">select client</option> <?php echo generateOption('client_master','client_name','client_id','',''); ?> </select> </div> <div class="col-sm-4" style="padding: 10px;"> <label>Years</label> <!-- <select id="years" name="years" style="width:100%"> --> <select id="years" name="years[]" class="chosen-select" multiple="multiple" style="width:100%"> <?php for($i = 1950 ; $i <= date('Y'); $i++){ echo "<option>$i</option>"; } ?> </select> </div> </div> </div> <div class="row"> <div class="col-sm-4"></div> <div class="col-sm-4"></div> <div class="col-sm-4"></div> <div class="col-sm-4"></div> </div> <div class="row" style="text-align: center;"> <button type="button" class="btn btn-info btn-sm save_button" onclick="make_chart();"><i class="ace-icon fa fa-floppy-o bigger-110"></i>Submit </button> </div> </form> <div class="row" style="padding-right: 30px;"> <!-- <div class="col-md-5 charts" style="margin: 20px 17px 0px 13px; padding: 20px 0 20px 25px"> <div class="card mt-4"> <div class="card-header card-title" style="padding: 10px 0 20px 10px">Pie Chart</div> <div class="card-body" > <div class="chart-container pie-chart chart-containing-container"> <canvas id="pie_chart"></canvas> </div> </div> </div> </div> --> <div class="col-md-5 charts" style="margin: 20px 17px 0px 13px; padding: 20px 0 20px 25px"> <div class="card mt-4"> <div class="card-header card-title" style="padding: 10px 0 20px 10px">Pie Chart</div> <div class="card-body"> <div class="chart-container pie-chart chart-containing-container"> <canvas id="pie_chart"></canvas> </div> </div> </div> </div> <div class="col-md-5 charts" style="margin: 20px 17px 0px 13px; padding: 20px 0 20px 25px"> <div class="card mt-4"> <div class="card-header card-title" style="padding: 10px 0 20px 10px">Doughnut Chart</div> <div class="card-body"> <div class="chart-container doughnut_chart chart-containing-container"> <canvas id="doughnut_chart"></canvas> </div> </div> </div> </div> <div class="col-md-5 charts" style="margin: 20px 17px 0px 13px; padding: 20px 0 20px 25px"> <div class="card mt-4 mb-4"> <div class="card-header card-title" style="padding: 10px 0 20px 10px">Bar Chart</div> <div class="card-body"> <div class="chart-container bar_chart chart-containing-container"> <canvas id="bar_chart"></canvas> </div> </div> </div> </div> <div class="col-md-5 charts" style="margin: 20px 17px 0px 13px; padding: 20px 0 20px 25px"> <div class="card mt-4 mb-4"> <div class="card-header card-title" style="padding: 10px 0 20px 10px">Table</div> <div class="card-body"> <table id="myTable" class="table table-bordered order-list"> <caption style="text-align: center;">RESULTS AND NO</caption> <tbody> </tbody> </table> </div> </div> </div> </div> </div> <!-- /.page-content --> </div> </div> <!-- /.main-content --> </div> <?php include('techsyn_footer.php'); ?> <script> function make_chart() { var flag=0; if($('#chart_id').val()==null) { flag=1; BootstrapDialog.alert("select the chart Name"); } else if($('#myselection').val()=="Three"){ if (($('#rule_result').val()=="")) { flag=1; BootstrapDialog.alert("select the Result Value"); } } if(flag==0) { create_chart(); } } $(document).ready(function(){ $('#myselection').on('change', function(){ var demovalue = $(this).val(); $("div.myDiv").hide(); $("#show"+demovalue).show(); $('#chart_type_id').val(""); $('#desig').val(""); $('#dept').val(""); $('#cli').val(""); }); }); function create_chart() { $("canvas#pie_chart").remove(); $("div.chart-container.pie-chart.chart-containing-container").append('<canvas id="pie_chart"></canvas>'); $("canvas#doughnut_chart").remove(); $("div.chart-container.doughnut_chart.chart-containing-container").append('<canvas id="doughnut_chart"></canvas>'); $("canvas#bar_chart").remove(); $("div.chart-container.bar_chart.chart-containing-container").append('<canvas id="bar_chart"></canvas>'); $.ajax({ url: "data_eval_chart1.php", method: "POST", data: $('#rule_chart').serialize(), dataType: "JSON", success: function(data) { var language = []; var total = []; var color = []; for (var count = 0; count < data.length; count++) { language.push(data[count].language); total.push(data[count].total); color.push(data[count].color); } var xcolor=generateRandomColor(); var chart_data = { labels: language, datasets: [{ label: '', backgroundColor: color, color: xcolor, data: total }] }; var options = { responsive: true, scales: { yAxes: [{ ticks: { min: 0 } }] } }; var group_chart1 = $('#pie_chart'); var options = { tooltips: { enabled: true }, plugins: { datalabels: { formatter: (value, ctx) => { let sum = ctx.dataset._meta[0].total; let percentage = (value * 100 / sum).toFixed(2) + "%"; return percentage; }, color:xcolor, } } }; var graph1 = new Chart(group_chart1, { type: "pie", data: chart_data, options: { responsive: true, maintainAspectRatio: true, plugins: { labels: { // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage' render: 'percentage' , // precision for percentage, default is 0 precision: 0, showZero: true, // font size, default is defaultFontSize fontSize: 12, fontColor: xcolor, fontStyle: 'normal', fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", textShadow: true, shadowBlur: 10, // text shadow X offset, default is 3 shadowOffsetX: -5, shadowOffsetY: 5, // text shadow color, default is 'rgba(0,0,0,0.3)' shadowColor: 'white', arc: false, position: 'default', overlap: true, showActualPercentages: true, images: [{ src: 'image.png', width: 16, height: 16 }], outsidePadding: 4, textMargin: 4 } } } }); var group_chart2 = $('#doughnut_chart'); var graph2 = new Chart(group_chart2, { type: "doughnut", data: chart_data, options: { plugins: { labels: { // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage' render: 'percentage', // precision for percentage, default is 0 precision: 0, showZero: true, // font size, default is defaultFontSize fontSize: 12, fontColor: xcolor, fontStyle: 'normal', fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", textShadow: true, shadowBlur: 10, // text shadow X offset, default is 3 shadowOffsetX: -5, shadowOffsetY: 5, // text shadow color, default is 'rgba(0,0,0,0.3)' shadowColor: 'white', arc: false, position: 'center', overlap: true, showActualPercentages: true, images: [{ src: 'image.png', width: 16, height: 16 }], outsidePadding: 4, textMargin: 4 } } } }); var group_chart3 = $('#bar_chart'); var graph3 = new Chart(group_chart3, { type: 'bar', data: chart_data, options: { plugins: { labels: { // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage' render: 'value', // precision for percentage, default is 0 precision: 0, showZero: true, // font size, default is defaultFontSize fontSize: 12, fontColor: xcolor, fontStyle: 'normal', fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", textShadow: true, shadowBlur: 10, shadowOffsetX: -5, shadowOffsetY: 5, // text shadow color, default is 'rgba(0,0,0,0.3)' shadowColor: 'rgba(255,0,0,0.75)', arc: true, position: 'default', overlap: true, showActualPercentages: true, images: [{ src: 'image.png', width: 16, height: 16 }], outsidePadding: 4, textMargin: 4 } } } }); $("#myTable > tbody"). empty(); var sum=0; cols=''; if($('#rule_result').val()=="") { cols+='<tr><th>Results</th><th>Count</th></tr>' } else { if($('#chart_type_id').val()==null) cols+='<tr><th>Age Range</th><th>Count</th></tr>' else cols+='<tr><th>Name</th><th>Count</th></tr>' } for (var i = 0; i < data.length; i++) { cols+='<tr>'; cols+='<td>'+language[i]+'</td>'; cols+='<td>'+total[i]+'</td>'; cols+='</tr>' sum+=total[i]; } cols+='<tr><td>total</td><td>'+sum+'</td></tr>'; // newRow.append(cols); $("#myTable").append(cols); if(data.length > 20 ){ const charts = $('.charts'); charts.removeClass('col-md-5').addClass('col-md-12'); var chartHeight = 1000; $(".chart-containing-container").css("height", chartHeight); // $("canvas").css("height", 900); // $("canvas").css("width", 900); } else{ const charts = $('.charts'); charts.removeClass('col-md-12').addClass('col-md-5'); $(".chart-containing-container").css("height", 350); // $("canvas").css("height", 400); } }, error: function(data) { alert(data); } }); } function generateRandomColor(){ let maxVal = 0xFFFFFF; // 16777215. let randomNumber = Math. random() * maxVal; randomNumber = Math. floor(randomNumber); randomNumber = randomNumber. toString(16); let randColor = randomNumber. padStart(6, 0); return `#${randColor. toUpperCase()}` } function selectresults(chart_id) { $.ajax({ url: "selectruleresult.php", method: "POST", data: { 'chart_id': chart_id }, success: function(data) { $('#rule_result').html(data); } }); } </script>