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