694 lines
25 KiB
PHP
694 lines
25 KiB
PHP
<?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>
|