2609 lines
84 KiB
PHP
2609 lines
84 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-3">
|
|
<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-3">
|
|
<label>Filter Option</label>
|
|
<select id="myselection" style="width:100%;">
|
|
<option>Select Filter Option</option>
|
|
<option value="Two">Common Chart</option>
|
|
<option value="Three">Individual chart</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-3 individual-chart">
|
|
<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-3">
|
|
<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>
|
|
<div class="row">
|
|
|
|
|
|
<!-- start -->
|
|
<div id="showsTwo" class="myDiv">
|
|
<div class="col-sm-3 individual-chart">
|
|
|
|
<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>
|
|
<!-- end -->
|
|
|
|
<div id="showtTwo" class="myDiv">
|
|
<div class="col-sm-4 individual-chart">
|
|
<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>
|
|
|
|
|
|
<div id="showThree" class="myDiv">
|
|
<div class="col-sm-4">
|
|
<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>
|
|
<option value="yearwise">Year wise</option>
|
|
<option value="habits">Based on habits</option>
|
|
<option value="anormalities">Based on Health Conditions</option>
|
|
<option value="relhabheal">Based on Relation Between Habits and Health Condition</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div id="showTwo" class="myDiv">
|
|
<div class="col-sm-4">
|
|
<label> select type</label>
|
|
<select id="chart_type_idtwo" name="chart_type_idtwo" style="width:100%">
|
|
<option value="">select type</option>
|
|
<option value="dept">Department</option>
|
|
<option value="desig">Designation</option>
|
|
<option value="cli">Client</option>
|
|
<option value="yearshw">Years</option>
|
|
</select>
|
|
</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 class="col-sm-4 innerops" id="showdept" 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 innerops" id="showdesig" 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 innerops" id="showcli" 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 innerops" id="showyearshw" 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 = 2000; $i <= date('Y'); $i++) {
|
|
echo "<option>$i</option>";
|
|
}
|
|
?>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- waste -->
|
|
|
|
|
|
|
|
|
|
<!-- waste end -->
|
|
</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="descionmake();"><i class="ace-icon fa fa-floppy-o bigger-110"></i>Submit </button>
|
|
</div>
|
|
|
|
<!-- descionmake(); -->
|
|
|
|
</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>
|
|
var valueone = 0;
|
|
var valuetwo = 0;
|
|
// $("ul li").each(function() {
|
|
// if ($(this).hasClass(className)) {
|
|
// $(this).fadeTo('slow', 0.0).fadeTo('slow', 1.0);
|
|
// }
|
|
|
|
// function descionmake(){
|
|
// $('.chosen-choices li').each(function() {
|
|
// if($(this).hasClass('search-choice')) {
|
|
// make_comparison_chart();
|
|
// return false;
|
|
// }
|
|
// else{
|
|
// make_chart();
|
|
// }
|
|
// });
|
|
// }
|
|
|
|
|
|
// FILTER OPTION
|
|
|
|
function descionmake() {
|
|
|
|
$('.chosen-choices li').each(function() {
|
|
if ($(this).hasClass('search-choice')) {
|
|
make_comparison_chart();
|
|
valueone = 1;
|
|
return false;
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let inputValue = document.getElementById('myselection').value;
|
|
// alert(inputValue);
|
|
// // check the value returned and make the desicion
|
|
switch (inputValue) {
|
|
case 'Three':
|
|
var chart_type_id = document.getElementById("chart_type_id");
|
|
if (chart_type_id.value == "yearwise") {
|
|
make_age_comparison_chart();
|
|
valuetwo = 1;
|
|
} else if (chart_type_id.value == "habits") {
|
|
create_chart_forhabits();
|
|
valueone = 1;
|
|
} else if (chart_type_id.value == "anormalities") {
|
|
create_chart_foranormalities();
|
|
valueone = 1;
|
|
} else if (chart_type_id.value == "relhabheal") {
|
|
create_chart_forrelhabheal();
|
|
valueone = 1;
|
|
}
|
|
break;
|
|
case 'Two':
|
|
make_chart();
|
|
break;
|
|
|
|
// default:
|
|
// ageCart.style.display = "none";
|
|
// salaryCartr.style.display = "none";
|
|
// break;
|
|
// }
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
// experiment
|
|
// function descionmakeforyearwise(){
|
|
|
|
// var yearwise = document.getElementById("chart_type_id");
|
|
// if (yearwise.value == "yearwise") {
|
|
// make_age_comparison_chart();
|
|
// valuetwo = 1;
|
|
// }
|
|
// if (yearwise.value == "habits") {
|
|
// create_chart_forhabits();
|
|
// valueone = 1;
|
|
// }
|
|
// if (yearwise.value == "anormalities") {
|
|
// create_chart_foranormalities();
|
|
// valueone = 1;
|
|
// }
|
|
// if (yearwise.value == "relhabheal") {
|
|
// create_chart_forrelhabheal();
|
|
// valueone = 1;
|
|
// }
|
|
|
|
// }
|
|
|
|
// end of experiment
|
|
|
|
|
|
|
|
|
|
|
|
// function descionmakethree(){
|
|
// setTimeout( function(){
|
|
|
|
// if ((valueone == 0)&&(valuetwo == 0)) {
|
|
// make_chart();
|
|
// valueone = 1;
|
|
// valuetwo = 1;
|
|
// }
|
|
|
|
// }, 2000);
|
|
// }
|
|
|
|
|
|
|
|
function make_chart() {
|
|
var flag = 0;
|
|
if ($('#chart_id').val() == null) {
|
|
flag = 1;
|
|
BootstrapDialog.alert("select the chart Name");
|
|
} else if ($('#myselection').val() == "Two") {
|
|
if (($('#rule_result').val() == "")) {
|
|
flag = 1;
|
|
BootstrapDialog.alert("select the Result Value");
|
|
}
|
|
}
|
|
if (flag == 0) {
|
|
create_chart();
|
|
}
|
|
}
|
|
|
|
function make_comparison_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) {
|
|
comparison_chart();
|
|
}
|
|
}
|
|
|
|
|
|
function make_age_comparison_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) {
|
|
comparison_age_chart();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
$('#myselection').on('change', function() {
|
|
var demovalue = $(this).val();
|
|
$("div.myDiv").hide();
|
|
$("div.innerops").hide();
|
|
$("#show" + demovalue).show();
|
|
$("#shows" + demovalue).show();
|
|
$("#showt" + demovalue).show();
|
|
|
|
$('#chart_type_id').val("");
|
|
$('#desig').val("");
|
|
$('#dept').val("");
|
|
$('#cli').val("");
|
|
});
|
|
|
|
|
|
|
|
$('#chart_type_idtwo').on('change', function() {
|
|
var demovalue = $(this).val();
|
|
$("div.innerops").hide();
|
|
$("#show" + demovalue).show();
|
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
// ***
|
|
|
|
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 comparison_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_comp.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 comparison_age_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_age_eval_two.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 create_chart_forhabits() {
|
|
|
|
$("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_habitstwo.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: {
|
|
beginAtZero: true,
|
|
min: 100
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
display: false
|
|
}]
|
|
}
|
|
|
|
};
|
|
|
|
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: {
|
|
|
|
responsive: true,
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// beginAtZero: true,
|
|
min: 0
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
display: true
|
|
}]
|
|
},
|
|
legend: {
|
|
display: true
|
|
},
|
|
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: 2,
|
|
|
|
textMargin: 2
|
|
}
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
$("#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 create_chart_foranormalities() {
|
|
|
|
$("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_abnormalities.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: {
|
|
beginAtZero: true,
|
|
min: 100
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
display: false
|
|
}]
|
|
}
|
|
|
|
};
|
|
|
|
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: {
|
|
|
|
responsive: true,
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// beginAtZero: true,
|
|
min: 0
|
|
}
|
|
|
|
}],
|
|
xAxes: [{
|
|
display: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Your Title'
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
display: true
|
|
},
|
|
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: 2,
|
|
|
|
textMargin: 2
|
|
}
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
$("#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);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
//** */
|
|
|
|
function create_chart_forrelhabheal() {
|
|
|
|
$("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_forrelhabheal.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: {
|
|
beginAtZero: true,
|
|
min: 100
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
display: false
|
|
}]
|
|
}
|
|
|
|
};
|
|
|
|
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: {
|
|
|
|
responsive: true,
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
// beginAtZero: true,
|
|
min: 0
|
|
}
|
|
|
|
}],
|
|
xAxes: [{
|
|
display: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Your Title'
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
display: true
|
|
},
|
|
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: 2,
|
|
|
|
textMargin: 2
|
|
}
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
$("#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);
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
// new javascript
|
|
|
|
|
|
let sortInput = document.getElementById('chart_type');
|
|
salaryCartr = document.querySelector('.individual-chart');
|
|
ageCart = document.querySelector('.common-chart');
|
|
|
|
//When the sort input changes
|
|
sortInput.onchange = function() {
|
|
|
|
let inputValue = document.getElementById('option').value;
|
|
// check the value returned and make the desicion
|
|
switch (inputValue) {
|
|
case 'age':
|
|
salaryCartr.style.display = "none";
|
|
ageCart.style.display = "block";
|
|
break;
|
|
case 'salary':
|
|
ageCart.style.display = "none";
|
|
salaryCartr.style.display = "block";
|
|
break;
|
|
|
|
default:
|
|
ageCart.style.display = "none";
|
|
salaryCartr.style.display = "none";
|
|
break;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//** */
|
|
</script>
|