1627 lines
58 KiB
PHP
Executable File
1627 lines
58 KiB
PHP
Executable File
<?php
|
|
//print_r($getTotalServicePoCount);
|
|
$Empcnt = '';
|
|
//echo $DEPCode;
|
|
//echo ROLE_MANAGER;
|
|
if (!empty($EmpCount)) {
|
|
foreach ($EmpCount as $Emp) {
|
|
$Empcnt = $Emp->EmpCount;
|
|
}
|
|
}
|
|
|
|
?>
|
|
<style>
|
|
|
|
@media (min-width: 991.98px) {
|
|
.avatar-title.bg-soft-primary.rounded {
|
|
background-color: 'black';
|
|
}
|
|
}
|
|
</style>
|
|
<div class="content-wrapper">
|
|
<section class="content">
|
|
<!-- Dashboard for Account department-->
|
|
<?php
|
|
if ($DEPCode == FINANCE) {
|
|
?>
|
|
<div class="content-wrapper">
|
|
<!-- Content Header (Page header) -->
|
|
<section class="content-header">
|
|
<center>
|
|
<h1> Accounts Department Dashboard</h1>
|
|
</center>
|
|
</section>
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
<!-- Info boxes -->
|
|
<center>
|
|
<div class="row">
|
|
<!-- fix for small devices only -->
|
|
<div class="clearfix visible-sm-block"></div>
|
|
<div class="col-md-4 col-md-offset-4 col-sm-6 col-xs-12">
|
|
<div class="info-box">
|
|
<span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Employees</span>
|
|
<span class="info-box-number"><?php echo $Empcnt ?></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</center>
|
|
|
|
</section>
|
|
</div>
|
|
|
|
<?php
|
|
}
|
|
?>
|
|
<!-- HR Start part to-->
|
|
|
|
|
|
<script>
|
|
$(function() {
|
|
//$( "#datepick" ).datepicker({maxDate: 'Date-1', dateFormat: 'dd-mm-yy' }).val();
|
|
|
|
//$( "#datepic" ).datepicker({maxDate: 'Date-1', dateFormat: 'dd-mm-yy' }).val();
|
|
// $("#datepic").datepicker({ defaultDate: '-2m'});
|
|
$('#datepick').datepicker({
|
|
maxDate: 'Date-1',
|
|
dateFormat: 'dd-mm-yy'
|
|
}).datepicker('setDate', new Date());
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
//$("#employee").select2();
|
|
//$("#employeeAttan").select2();
|
|
$("#emp").select2();
|
|
});
|
|
</script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
function synczohobooks() {
|
|
|
|
var sync = true
|
|
$('#loader').show();
|
|
$.ajax({
|
|
|
|
url: "<?php echo base_url() ?>user/zohobooks_api_fetch_all",
|
|
type: "post",
|
|
data: {
|
|
sync
|
|
},
|
|
|
|
success: function(data) {
|
|
console.log(data);
|
|
$('#loader').hide();
|
|
|
|
alert("Sync Completed");
|
|
},
|
|
failure: function(data) {
|
|
$('#loader').hide();
|
|
|
|
alert("Failed");
|
|
},
|
|
complete: function() {
|
|
$('#loader').hide();
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
.small-box .icon {
|
|
top: 0px !important;
|
|
}
|
|
</style>
|
|
|
|
<?php
|
|
if ($DEPCode == HR) {
|
|
?>
|
|
<div class="content-wrapper">
|
|
<!-- Content Header (Page header) -->
|
|
<section class="content-header">
|
|
<!-- <center><h1> HR Department Dashboard</h1> </center> -->
|
|
</section>
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
<!-- Info boxes -->
|
|
<center>
|
|
<!-- Small boxes (Stat box) -->
|
|
<div class="row">
|
|
<div class="col-lg-3 col-xs-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-aqua">
|
|
<a href="#" class="small-box-footer">
|
|
<p> <strong>TOTAL NO OF EMPLOYEES</strong> </p>
|
|
</a>
|
|
<div class="inner">
|
|
<?php
|
|
if (!empty($totemp)) {
|
|
|
|
|
|
?>
|
|
<h3><?php echo $totemp->totemp; ?></h3>
|
|
<p> </p>
|
|
|
|
<?php
|
|
}
|
|
|
|
?>
|
|
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-android-contacts"></i>
|
|
</div>
|
|
<a href="#" class="small-box-footer"><br> </a>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-3 col-xs-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-red">
|
|
<a target="_blank" href="<?php echo base_url(); ?>loanreports" class="small-box-footer">
|
|
<p> <strong>TOTAL LOAN</strong> </p>
|
|
</a>
|
|
<div class="inner">
|
|
|
|
<?php if (!empty($totloan)) {
|
|
foreach ($totloan as $req_p) {
|
|
|
|
?>
|
|
<h3> <i class="fa fa-rupee"></i><?php echo $req_p->totloan; ?> </h3>
|
|
<p> </p>
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="icon">
|
|
<i class="ion ion-cash"></i>
|
|
</div>
|
|
|
|
<a target="_blank" href="<?php echo base_url(); ?>loanreports" class="small-box-footer">
|
|
LOAN TO BE RECOVERED : <?php if (!empty($totrec)) {
|
|
foreach ($totrec as $ordervalue) {
|
|
|
|
?>
|
|
|
|
|
|
|
|
<i class="fa fa-rupee"></i><?php echo $ordervalue->totrec; ?>
|
|
|
|
<?php
|
|
}
|
|
}
|
|
?> </a>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
|
|
<div class="col-lg-3 col-xs-6">
|
|
|
|
<!-- small box -->
|
|
<div class="small-box bg-yellow">
|
|
|
|
<a class="small-box-footer">
|
|
<p><strong>SALARY COST</strong></p>
|
|
</a>
|
|
<div class="inner" style="padding: 14px;">
|
|
|
|
<h3>
|
|
<div class="fa fa-rupee" id="today_salary" style="font-size:bold"> <b><?php echo $employeeSalary; ?></b>
|
|
</div>
|
|
</h3>
|
|
<input type="text" id="datepick" placeholder="Select Date" style="color:#000;width:30%" />
|
|
|
|
|
|
</div>
|
|
<div class="icon">
|
|
|
|
<i class="ion ion-calculator"></i>
|
|
</div>
|
|
<a class="small-box-footer" style="z-index:0; "> THIS MONTH : <i class="fa fa-rupee"></i>
|
|
<div id="totalSalary"> <?php echo $totalSalary; ?> </div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- /col next -->
|
|
<div class="col-lg-3 col-xs-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-green">
|
|
<a href="#" class="small-box-footer">
|
|
<p> <strong>TOTAL EMPLOYEES ABSENT</strong> </p>
|
|
</a>
|
|
<h3>
|
|
<div class="inner" id="today_abs">
|
|
<h3> <?php echo $today; ?></h3>
|
|
</div>
|
|
</h3>
|
|
<p>ABSENT</p><br>
|
|
<div class="icon">
|
|
<i class="ion ion-android-calendar"></i>
|
|
</div> <a href="#" class="small-box-footer"><br> </a>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</center>
|
|
<div class="col-md-9" style="padding:0px;">
|
|
<!-- Emp performance box -->
|
|
<div class="box box-info">
|
|
<div class="box-header">
|
|
<!-- tools box -->
|
|
<div class="pull-right box-tools">
|
|
<button type="button" class="btn bg-teal btn-sm" data-widget="collapse" data-toggle="tooltip" title="Collapse" style="margin-right: 5px;">
|
|
<i class="fa fa-minus"></i></button>
|
|
</div>
|
|
<!-- /. tools -->
|
|
<h3 class="box-title">
|
|
<?php
|
|
$options = array("0" => 'Select Employee');
|
|
//print_r( $options);
|
|
if (!empty($emplist)) {
|
|
foreach ($emplist as $SID):
|
|
$options[$SID->EmpID] = $SID->name . ' ' . ' - ' . ' ' . $SID->EmpID;
|
|
endforeach;
|
|
}
|
|
echo form_dropdown('emp', $options, set_value('emp'), 'id="emp"', 'class="form-control select2');
|
|
?>
|
|
</h3>
|
|
<!-- <input type="text" id="datepic" name="datepic" placeholder="Select Date" style="color:#000;width:15%" /> -->
|
|
<!-- <input type="button" id="but" value="ok" style="color:blue; width:15%" /> -->
|
|
<a href="<?php echo base_url() ?>Empperform" target="_blank">Click here to Employee Performance Report</a>
|
|
</div>
|
|
<div class="box-body">
|
|
<div class="row">
|
|
<div class="col-md-6 col-sm-6" style="padding:0px;">
|
|
<div class="col-md-7 col-sm-7">
|
|
<div id="chart_div"></div>
|
|
</div>
|
|
<div class="col-md-5 col-sm-5">
|
|
<br>
|
|
<div class="pad box-pane-right bg-green">
|
|
<div class="description-block margin-bottom">
|
|
<h3 id="totaldays"><b>0</b></h3>
|
|
<h5 class="description-header">Working Days</h5>
|
|
</div>
|
|
<!-- /.description-block -->
|
|
<div class="description-block margin-bottom">
|
|
<h3 id="worked"><b>0</b></h3>
|
|
<h5 class="description-header">Days Present</h5>
|
|
</div>
|
|
<!-- /.description-block -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
google.charts.load('current', {
|
|
'packages': ['gauge']
|
|
});
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
|
|
function drawChart() {
|
|
var data = google.visualization.arrayToDataTable([
|
|
['Label', 'Value'],
|
|
['Year', 0]
|
|
]);
|
|
var options = {
|
|
width: 600,
|
|
height: 250,
|
|
redFrom: 0,
|
|
redTo: 20,
|
|
yellowFrom: 20,
|
|
yellowTo: 50,
|
|
greenFrom: 50,
|
|
greenTo: 100,
|
|
minorTicks: 5
|
|
};
|
|
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
|
|
chart.draw(data, options);
|
|
$('#emp').change(function() {
|
|
//var datepick = $('#datepic').val();
|
|
var id = $('#emp').val();
|
|
$("#yearabs").val('');
|
|
|
|
if (id != 0) {
|
|
$('#loader').show();
|
|
|
|
$.ajax({
|
|
data: {
|
|
id: id
|
|
},
|
|
dataType: 'json',
|
|
type: "POST",
|
|
url: "<?php echo base_url(); ?>user/attendanceyear",
|
|
success: function(json) {
|
|
console.log(json);
|
|
// alert(json.workeds);
|
|
$('#loader').hide();
|
|
$('#totaldays').text(json.totaldays);
|
|
$('#worked').text(json.workeds)
|
|
//alert(json.MatDetail);
|
|
$("#yeardata").text(json.values);
|
|
data.setValue(0, 1, json.yeardata);
|
|
chart.draw(data, options);
|
|
|
|
},
|
|
// error:function(){
|
|
// alert('error');
|
|
// }
|
|
|
|
});
|
|
//$('#content').loader('hide');
|
|
} else {
|
|
alert('Please select the Employee');
|
|
$('#totaldays').text(0);
|
|
$('#worked').text(0);
|
|
//alert(json.MatDetail);
|
|
$("#yeardata").text(0);
|
|
data.setValue(0, 1, 0);
|
|
chart.draw(data, options);
|
|
return false;
|
|
}
|
|
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<!------ Month------>
|
|
<div class="col-md-6 col-sm-6" style="padding:0px;">
|
|
|
|
<div class="col-md-7 col-sm-7">
|
|
<div id="chart_divs"></div>
|
|
|
|
</div>
|
|
<div class="col-md-5 col-sm-5">
|
|
<br>
|
|
<div class="pad box-pane-right bg-red">
|
|
<div class="description-block margin-bottom">
|
|
<h3 id="total_days"><b>0</b></h3>
|
|
<h5 class="description-header">Working Days</h5>
|
|
|
|
</div>
|
|
<!-- /.description-block -->
|
|
<div class="description-block margin-bottom">
|
|
<h3 id="present"><b>0</b></h3>
|
|
<h5 class="description-header">Days Present</h5>
|
|
|
|
</div>
|
|
<!-- /.description-block -->
|
|
<!-- <div class="description-block" style="margin:12px !important;">
|
|
|
|
<h5 class="description-header">Salary Upto Today</h5>
|
|
<i class="fa fa-rupee"></i> <h4 id="salaryInCurrentday"><b> 0.00</b></h4>
|
|
</div> -->
|
|
<!-- /.description-block -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- /end of new box -->
|
|
|
|
|
|
<!-- /.info-box -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.box-body-->
|
|
|
|
<!-- Start of List of employees absent-->
|
|
|
|
<div class="col-md-3">
|
|
<!-- DIRECT CHAT -->
|
|
<div class="box box-warning">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">NAME OF ABSENTEES</h3>
|
|
|
|
<div class="box-tools pull-right">
|
|
|
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
|
|
</button>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<!-- /.box-header -->
|
|
<div class="box-body">
|
|
<!-- Conversations are loaded here -->
|
|
<div class="direct-chat-messages">
|
|
<!-- Message. Default to the left -->
|
|
|
|
<div class="inner" id="abs_name">
|
|
|
|
<!-- <h3> <?php // echo $abs_name;
|
|
?></h3>
|
|
-->
|
|
|
|
|
|
<?php
|
|
if (!empty($abs_name)) {
|
|
foreach ($abs_name as $abs) {
|
|
echo $abs . '<br/>';
|
|
|
|
|
|
?>
|
|
|
|
<?php }
|
|
} ?>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<!--/.direct-chat-messages-->
|
|
|
|
|
|
</div>
|
|
<!-- /.box-body -->
|
|
|
|
<!-- /.box-footer-->
|
|
</div>
|
|
<!--/.direct-chat -->
|
|
</div>
|
|
<!-- /.col -->
|
|
|
|
|
|
<!-- End Of list of employees absent-->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- /.box -->
|
|
|
|
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<?php
|
|
}
|
|
?>
|
|
<script type="text/javascript">
|
|
google.charts.load('current', {
|
|
'packages': ['gauge']
|
|
});
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
|
|
function drawChart() {
|
|
|
|
var data = google.visualization.arrayToDataTable([
|
|
['Label', 'Value'],
|
|
['Month', 0]
|
|
|
|
]);
|
|
|
|
var options = {
|
|
width: 600,
|
|
height: 250,
|
|
redFrom: 0,
|
|
redTo: 20,
|
|
yellowFrom: 20,
|
|
yellowTo: 50,
|
|
greenFrom: 50,
|
|
greenTo: 100,
|
|
minorTicks: 5
|
|
};
|
|
var chart = new google.visualization.Gauge(document.getElementById('chart_divs'));
|
|
chart.draw(data, options);
|
|
|
|
|
|
|
|
$('#emp').change(function() {
|
|
// alert('Please select Employee Name' );
|
|
var id = $('#emp').val();
|
|
|
|
//var datepick = $("#datepic").val();
|
|
//alert(datepick);
|
|
$("#monthabs").val('');
|
|
|
|
if (id != 0) {
|
|
$('#loader').show();
|
|
|
|
$.ajax({
|
|
data: {
|
|
id: id
|
|
},
|
|
dataType: 'json',
|
|
type: "POST",
|
|
url: "<?php echo base_url(); ?>user/monthattendance",
|
|
success: function(json) {
|
|
console.log(json);
|
|
|
|
$('#loader').hide();
|
|
//alert(json.MatDetail);
|
|
$("#present").text(json.values);
|
|
$("#total_days").text(json.CUR_month);
|
|
//$("#salaryInCurrentday").text(json.salaryInCurrentday);
|
|
|
|
|
|
|
|
|
|
|
|
data.setValue(0, 1, json.present_percentage);
|
|
chart.draw(data, options);
|
|
//setTimeout(getData, 1000);
|
|
}
|
|
|
|
|
|
});
|
|
|
|
//$('#content').loader('hide');
|
|
} else {
|
|
//alert('Please select the Employee');
|
|
$("#present").text(0);
|
|
$("#total_days").text(0);
|
|
data.setValue(0, 1, 0);
|
|
chart.draw(data, options);
|
|
return false;
|
|
}
|
|
|
|
|
|
});
|
|
}
|
|
</script>
|
|
<script>
|
|
$('#datepick').change(function() {
|
|
//var datepick = $('#emp').val();
|
|
//alert();
|
|
|
|
$('#abs_name').empty();
|
|
var id = $(this).val();
|
|
//alert(id);
|
|
|
|
$('#loader').show();
|
|
$.ajax({
|
|
data: {
|
|
id: id
|
|
},
|
|
dataType: 'json',
|
|
type: "POST",
|
|
url: "<?php echo base_url(); ?>user/dateFunctionChangeVales",
|
|
success: function(json) {
|
|
// console.log(json.employeeSalary);
|
|
$('#abs_name').removeData();
|
|
var abs_name = json.absname;
|
|
$.each(abs_name, function(i, obj) {
|
|
|
|
|
|
$("#abs_name").append(obj + '<br/>');
|
|
//$("#abs_name").html("<br/>");
|
|
});
|
|
$("#today_abs").text(json.today);
|
|
// console.log(json.today)
|
|
|
|
$("#values").text(json.values);
|
|
$("#today_salary").text(json.employeeSalary);
|
|
$("#totalSalary").text(json.totalSalary);
|
|
$('#loader').hide();
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
<!-- \\\\\\\\\\\\\\\ HR END of the part ////////////////////////-->
|
|
<!-- Dashboard for admin || $role == ROLE_MANAGER -->
|
|
<?php
|
|
if ($role == ROLE_ADMIN && $DEPCode != MANAGEMENT && $DEPCode != HR) {
|
|
?>
|
|
<div class="content-page">
|
|
<div class="content">
|
|
<!-- Start Content -->
|
|
<div class="container-fluid">
|
|
<div id="loader_wrapper">
|
|
<div id="loadingDiv">
|
|
<div id="load-img">
|
|
<img src="<?php echo base_url(); ?>public/assets/images/spinner.gif" class="img-fluid" alt="Loading...">
|
|
<h3>Syncing with Zoho Books...</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Content Header (Page header) -->
|
|
<!-- <section class="content-header"> -->
|
|
<!-- <h3>Admin Dashboard</h3> -->
|
|
|
|
<!-- </section> -->
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
<div class="row">
|
|
<div class="col-12 text-right synczohobooks_button" style="height: 75px;">
|
|
<a href="javascript:void(0)" type="button" title="Sync With Zoho Books" class="btn btn-success" onclick="synczohobooks()">
|
|
<i class="fas fa-sync-alt"></i> <!-- <img src="<?php echo base_url(); ?>public/new_assets/images/zoho_sync.png" alt="Sync Icon" style="width: 20px; height: 20px;"> -->
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xl-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<h5 class="text-muted font-weight-normal mt-0 text-truncate" title="User Registrations">User Registrations</h5>
|
|
<h3 class="my-2 py-1"><span data-plugin="counterup"><?php $users = isset($UserCount[0]->users) ? $UserCount[0]->users : 0; ?>
|
|
<h3><?= $users; ?></h3>
|
|
</span></h3>
|
|
<p class="mb-0 text-muted">
|
|
<?php $employees = isset($EmpCount[0]->EmpCount) ? $EmpCount[0]->EmpCount : 0; ?>
|
|
<?php echo $employees > 1 ? '<small>' . $employees . ' Employees </small>' : ($employees == 1 ? '<small>' . $employees . ' Employee</small>' : ''); ?></span>
|
|
</p>
|
|
</div>
|
|
<div class="avatar-sm">
|
|
<span class="avatar-title bg-soft-primary rounded">
|
|
<a href="<?php echo base_url(); ?>userListing"> <i class="fe-arrow-right" style="color:black;">
|
|
</i>
|
|
</a>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div><!-- end col -->
|
|
<!-- </div>
|
|
<div class="row"> -->
|
|
<!-- <div class="col-xs-12 col-md-4 col-md-offset-4">
|
|
</div> -->
|
|
|
|
|
|
</div>
|
|
</section>
|
|
<!-- /.content -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<?php
|
|
}
|
|
?>
|
|
|
|
<!-- Dashboard for Manager department-->
|
|
<?php
|
|
if ($role == ROLE_MANAGER && $DEPCode != MANAGEMENT) {
|
|
?>
|
|
<div class="content-wrapper">
|
|
<!-- Content Header (Page header) -->
|
|
<section class="content-header">
|
|
<center>
|
|
<h1> Manager Department Dashboard</h1>
|
|
</center>
|
|
</section>
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
<!-- Info boxes -->
|
|
<center>
|
|
<div class="row">
|
|
<!-- fix for small devices only -->
|
|
<div class="clearfix visible-sm-block"></div>
|
|
<div class="col-md-4 col-md-offset-4 col-sm-6 col-xs-12">
|
|
<div class="info-box">
|
|
<span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Employees</span>
|
|
<span class="info-box-number"><?php echo $Empcnt ?></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</center>
|
|
|
|
</section>
|
|
</div>
|
|
|
|
<?php
|
|
}
|
|
|
|
if ($DEPCode == MANAGEMENT) {
|
|
?>
|
|
|
|
<head>
|
|
<link href="<?php echo base_url(); ?>public/assets/plugins/morris/morris.css" rel="stylesheet" type="text/css" />
|
|
|
|
</head>
|
|
<script>
|
|
/*!
|
|
DataTables Bootstrap 3 integration
|
|
©2011-2014 SpryMedia Ltd - datatables.net/license
|
|
*/
|
|
(function(l, q) {
|
|
var e = function(b, c) {
|
|
b.extend(!0, c.defaults, {
|
|
dom: "<'row'<'col-sm-9'l><'col-sm-3'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-9'i><'col-sm-3'p>>",
|
|
renderer: "bootstrap"
|
|
});
|
|
b.extend(c.ext.classes, {
|
|
sWrapper: "dataTables_wrapper form-inline dt-bootstrap",
|
|
sFilterInput: "form-control input-sm",
|
|
sLengthSelect: "form-control input-sm"
|
|
});
|
|
c.ext.renderer.pageButton.bootstrap = function(g, e, r, s, i, m) {
|
|
var t = new c.Api(g),
|
|
u = g.oClasses,
|
|
j = g.oLanguage.oPaginate,
|
|
d, f, n = 0,
|
|
p = function(c, e) {
|
|
var k, h, o, a, l = function(a) {
|
|
a.preventDefault();
|
|
b(a.currentTarget).hasClass("disabled") || t.page(a.data.action).draw(!1)
|
|
};
|
|
k = 0;
|
|
for (h = e.length; k < h; k++)
|
|
if (a = e[k], b.isArray(a)) p(c, a);
|
|
else {
|
|
f = d = "";
|
|
switch (a) {
|
|
case "ellipsis":
|
|
d = "…";
|
|
f = "disabled";
|
|
break;
|
|
case "first":
|
|
d = j.sFirst;
|
|
f = a + (0 < i ? "" : " disabled");
|
|
break;
|
|
case "previous":
|
|
d = j.sPrevious;
|
|
f = a + (0 < i ? "" : " disabled");
|
|
break;
|
|
case "next":
|
|
d = j.sNext;
|
|
f = a + (i < m - 1 ? "" : " disabled");
|
|
break;
|
|
case "last":
|
|
d = j.sLast;
|
|
f = a + (i < m - 1 ? "" : " disabled");
|
|
break;
|
|
default:
|
|
d = a + 1, f = i === a ? "active" : ""
|
|
}
|
|
d && (o = b("<li>", {
|
|
"class": u.sPageButton + " " +
|
|
f,
|
|
id: 0 === r && "string" === typeof a ? g.sTableId + "_" + a : null
|
|
}).append(b("<a>", {
|
|
href: "#",
|
|
"aria-controls": g.sTableId,
|
|
"data-dt-idx": n,
|
|
tabindex: g.iTabIndex
|
|
}).html(d)).appendTo(c), g.oApi._fnBindAction(o, {
|
|
action: a
|
|
}, l), n++)
|
|
}
|
|
},
|
|
h;
|
|
try {
|
|
h = b(q.activeElement).data("dt-idx")
|
|
} catch (l) {}
|
|
p(b(e).empty().html('<ul class="pagination"/>').children("ul"), s);
|
|
h && b(e).find("[data-dt-idx=" + h + "]").focus()
|
|
};
|
|
c.TableTools && (b.extend(!0, c.TableTools.classes, {
|
|
container: "DTTT btn-group",
|
|
buttons: {
|
|
normal: "btn btn-default",
|
|
disabled: "disabled"
|
|
},
|
|
collection: {
|
|
container: "DTTT_dropdown dropdown-menu",
|
|
buttons: {
|
|
normal: "",
|
|
disabled: "disabled"
|
|
}
|
|
},
|
|
print: {
|
|
info: "DTTT_print_info"
|
|
},
|
|
select: {
|
|
row: "active"
|
|
}
|
|
}), b.extend(!0, c.TableTools.DEFAULTS.oTags, {
|
|
collection: {
|
|
container: "ul",
|
|
button: "li",
|
|
liner: "a"
|
|
}
|
|
}))
|
|
};
|
|
"function" === typeof define && define.amd ? define(["jquery", "datatables"], e) : "object" === typeof exports ? e(require("jquery"), require("datatables")) : jQuery && e(jQuery, jQuery.fn.dataTable)
|
|
})(window, document);
|
|
</script>
|
|
<style>
|
|
table {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
clear: both;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
word-wrap: break-word;
|
|
|
|
}
|
|
|
|
th,
|
|
td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
div.dataTables_wrapper {
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
div.container {
|
|
width: 100%;
|
|
}
|
|
|
|
.dataTables_paginate {
|
|
margin-top: -25px;
|
|
position: absolute;
|
|
text-align: right;
|
|
left: -20%;
|
|
}
|
|
</style>
|
|
<div>
|
|
<section class="content">
|
|
<!-- Info boxes -->
|
|
<div class="row">
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<a href="<?php echo base_url(); ?>Requisition">
|
|
<div class="info-box" style="min-height: 105px;">
|
|
<span class="info-box-icon bg-aqua" style="height: 105px;padding:25px;">
|
|
<i<i class="fa fa-spinner">
|
|
</span>
|
|
<?php
|
|
if (!empty($details)) {
|
|
foreach ($details as $req) {
|
|
|
|
?>
|
|
|
|
|
|
<div class="info-box-content">
|
|
<span class="info-box-text" style="color:#00c0ef;"><strong>TODAY'S REQUESTS</strong></span>
|
|
<span class="info-box-number" style="color:black;"><?php echo $req->TODAY_REQUESTS; ?></span>
|
|
</div>
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
<!-- /.info-box-content -->
|
|
</div>
|
|
</a>
|
|
<!-- /.info-box -->
|
|
</div>
|
|
<!-- /.col -->
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<a href="<?php echo base_url(); ?>reportpending">
|
|
<div class="info-box" style="min-height: 105px;">
|
|
<span class="info-box-icon bg-red" style="height: 105px;padding:25px;"><i class="fa fa-hourglass-end"></i></span>
|
|
|
|
<?php if (!empty($pending_details)) {
|
|
foreach ($pending_details as $req_p) {
|
|
|
|
?>
|
|
|
|
<div class="info-box-content">
|
|
<span class="info-box-text" style="color:#dd4b39;"><strong>TOTAL PENDING REQUESTS</strong></span>
|
|
<span class="info-box-number" style="color:black;"><?php echo $req_p->TOTAL_PENDING_REQUESTS; ?></span>
|
|
</div>
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
<!-- /.info-box-content -->
|
|
</div>
|
|
</a>
|
|
<!-- /.info-box -->
|
|
</div>
|
|
<!-- /.col -->
|
|
|
|
<!-- fix for small devices only -->
|
|
<div class="clearfix visible-sm-block"></div>
|
|
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<a href="<?php echo base_url(); ?>TotalOrder">
|
|
<div class="info-box" style="min-height: 105px;">
|
|
<span class="info-box-icon bg-green" style="height: 105px;padding:25;"><i class="fa fa-industry" style="padding: 5px;"></i></span>
|
|
<?php if (!empty($totalpurchaseorder)) {
|
|
foreach ($totalpurchaseorder as $po) {
|
|
|
|
?>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text" style="color:#00a65a;"><strong>TOTAL PURCHASE ORDER</strong></span>
|
|
<span class="info-box-number" style="color:black;"><strong><?php echo $po->totalpurchaseorder; ?></strong></span>
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
<?php if (!empty($totalordervalue)) {
|
|
foreach ($totalordervalue as $ordervalue) {
|
|
|
|
?>
|
|
<span class="info-box-text" style="color:#00a65a;"><strong>TOTAL ORDER VALUE</strong></span>
|
|
|
|
<span class="info-box-number" style="color:black;"><strong><i class="fa fa-rupee "></i> <?php echo $ordervalue->totalordervalue; ?></strong></span>
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
</div>
|
|
|
|
|
|
<!-- /.info-box-content -->
|
|
</div>
|
|
</a>
|
|
<!-- /.info-box -->
|
|
</div>
|
|
<!-- /.col -->
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<a href="<?php echo base_url(); ?>openOrder">
|
|
<div class="info-box" style="min-height: 105px;">
|
|
<span class="info-box-icon bg-yellow" style="height: 105px;padding:25px;"><i class="fa fa-hourglass-1 " style="padding: 5px;"></i></span>
|
|
<?php if (!empty($pendingpo)) {
|
|
foreach ($pendingpo as $pendingpolist) {
|
|
|
|
?>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text" style="color:#f39c12;"><strong>PENDING PURCHASE ORDER</strong></span>
|
|
<span class="info-box-number" style="color:black;"><?php echo $pendingpolist->pending; ?></span>
|
|
</div>
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
<!-- /.info-box-content -->
|
|
</div>
|
|
</a>
|
|
<!-- /.info-box -->
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
<!-- /.row -->
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="box">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Monthly Purchase Order</h3>
|
|
|
|
<!--<div class="box-tools pull-right">
|
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
|
|
</button>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
|
|
<i class="fa fa-wrench"></i></button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
|
</div>-->
|
|
</div>
|
|
<!-- /.box-header -->
|
|
<div class="box-body">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<p class="text-center">
|
|
<strong>
|
|
<?php
|
|
if (date('m') >= 4) {
|
|
$yearl = date('Y') . '-' . (date('Y') + 1);
|
|
} else {
|
|
$yearl = (date('Y') - 1) . '-' . date('Y');
|
|
}
|
|
$ab = $yearl;
|
|
$fa = substr($ab, 0, -5);
|
|
$aa = substr($ab, 5, 5);
|
|
echo '1 April, ' . $fa . ' - 31 March, ' . $aa . '';
|
|
?>
|
|
|
|
</strong>
|
|
</p>
|
|
|
|
<div class="chart">
|
|
<!-- Sales Chart Canvas -->
|
|
<canvas id="salesChart" style="height: 180px;"></canvas>
|
|
</div>
|
|
<!-- /.chart-responsive -->
|
|
</div>
|
|
<!-- /.col -->
|
|
|
|
|
|
<div class="col-md-offset-1 col-md-3">
|
|
<strong style="font-size:18px;"> BUDGET AMOUNT</strong>
|
|
|
|
<br><br>
|
|
|
|
<div class="progress-group">
|
|
<?php if (!empty($servicebudgt)) {
|
|
foreach ($servicebudgt as $service) {
|
|
|
|
?>
|
|
<span class="description-text"><strong style="font-size:16px;">SERVICE : </strong><strong style="color:#00c0ef;font-size:18px;"><i class="fa fa-rupee " style="padding: 5px;"></i><?php echo $service->totalservicebudget; ?></strong></span>
|
|
|
|
<h5 class="description-header" </h5>
|
|
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
</div>
|
|
<br>
|
|
<!-- /.progress-group -->
|
|
<div class="progress-group">
|
|
<?php if (!empty($revenuebudgt)) {
|
|
foreach ($revenuebudgt as $revenue) {
|
|
|
|
?>
|
|
<span class="description-text"><strong style="font-size:16px;">REVENUE : </strong><strong style="color:#dd4b39;font-size:18px;"><i class="fa fa-rupee " style="padding: 5px;"></i><?php echo $revenue->totalrevenuebudget; ?></strong></span>
|
|
|
|
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
</div>
|
|
|
|
<br>
|
|
<!-- /.progress-group -->
|
|
<div class="progress-group">
|
|
<?php if (!empty($importbudgt)) {
|
|
foreach ($importbudgt as $import) {
|
|
|
|
?>
|
|
<span class="description-text"><strong style="font-size:16px;">IMPORT : </strong><strong style="color:#00a65a;font-size:18px;"><i class="fa fa-rupee " style="padding: 5px;"></i><?php echo $import->totalimportbudget; ?></strong></span>
|
|
|
|
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
</div>
|
|
<br>
|
|
<!-- /.progress-group -->
|
|
<div class="progress-group">
|
|
<?php if (!empty($capitalbud)) {
|
|
foreach ($capitalbud as $capital) {
|
|
|
|
?>
|
|
<span class="description-text"><strong style="font-size:16px;">CAPITAL :  </strong><strong style="color:#f39c12;font-size:18px;"><i class="fa fa-rupee " style="padding: 5px;"></i><?php echo $capital->totalcapitalbudget; ?></strong></span>
|
|
|
|
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
</div>
|
|
|
|
<!-- /.progress-group -->
|
|
|
|
</div>
|
|
<!-- /.col -->
|
|
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- ./box-body -->
|
|
|
|
<!-- /.box -->
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="box-footer">
|
|
<div class="box-body">
|
|
<div class="row">
|
|
<div class="col-xs-6 col-md-3 text-center">
|
|
<div class="description-block border-right">
|
|
<?php foreach ($servicebudgt as $service)
|
|
if (!empty($typebal)) {
|
|
foreach ($typebal as $serviceb)
|
|
$sb = $service->totalservicebudget - $serviceb->sr; {
|
|
?>
|
|
<div class="knob-label"><strong style="color:#00c0ef">SERVICE BUDGET</strong></div>
|
|
<input type="text" class="knob" data-thickness="0.4" data-readonly="true" value=<?php
|
|
echo number_format($sb, 2, '.', ''); ?> data-min="20" data-max=<?php echo $service->totalservicebudget; ?> data-width="" data-height="" data-fgColor="#00c0ef "> <br>
|
|
<div class="knob-label"><strong>TOTAL : <i class="fa fa-rupee "></i> <?php echo $service->totalservicebudget; ?></strong></div>
|
|
<div class="knob-label"><strong>BALANCE : <i class="fa fa-rupee "></i> <?php
|
|
echo number_format($sb, 2, '.', ''); ?></strong></div>
|
|
</div>
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-xs-6 col-md-3 text-center">
|
|
<div class="description-block border-right">
|
|
<?php // if(!empty($totalrevenuepo))
|
|
// {
|
|
foreach ($revenuebudgt as $revenue)
|
|
if (!empty($typebal)) {
|
|
foreach ($typebal as $revenueb)
|
|
$rb = $revenue->totalrevenuebudget - $revenueb->rv; {
|
|
|
|
?>
|
|
<div class="knob-label"><strong style="color:#dd4b39">REVENUE BUDGET</strong></div>
|
|
<input type="text" class="knob" data-thickness="0.4" data-readonly="true" value="<?php echo number_format($rb, 2, '.', ''); ?> " data-min="0" data-max=<?php echo $revenue->totalrevenuebudget; ?> data-width="" data-height="" data-fgColor="#dd4b39 "> <br>
|
|
<div class="knob-label"><strong>TOTAL : <i class="fa fa-rupee "></i> <?php echo $revenue->totalrevenuebudget; ?> </strong> </div>
|
|
<div class="knob-label"><strong>BALANCE : <i class="fa fa-rupee "></i> <?php echo number_format($rb, 2, '.', ''); ?></strong> </div>
|
|
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-xs-6 col-md-3 text-center">
|
|
<div class="description-block border-right">
|
|
<?php foreach ($importbudgt as $import)
|
|
if (!empty($typebal)) {
|
|
foreach ($typebal as $importb)
|
|
$im = $import->totalimportbudget - $importb->im; {
|
|
|
|
?>
|
|
<div class="knob-label"><strong style="color:#00a65a">IMPORT BUDGET</strong></div>
|
|
<input type="text" class="knob" data-thickness="0.4" data-readonly="true" value=<?php echo number_format($im, 2, '.', ''); ?> data-min="0" data-max=<?php echo $import->totalimportbudget; ?> data-width="" data-height="" data-fgColor="#00a65a "> <br>
|
|
<div class="knob-label"><strong>TOTAL : <i class="fa fa-rupee "></i> <?php echo $import->totalimportbudget; ?> </strong></div>
|
|
<div class="knob-label"><strong>BALANCE : <i class="fa fa-rupee "></i> <?php echo number_format($im, 2, '.', ''); ?> </strong></div>
|
|
</div>
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
</div>
|
|
<div class="col-xs-6 col-md-3 text-center">
|
|
<div class="description-block border-right">
|
|
<?php foreach ($capitalbud as $capital)
|
|
if (!empty($typebal)) {
|
|
foreach ($typebal as $capitalb)
|
|
$ca = $capital->totalcapitalbudget - $capitalb->ca; {
|
|
|
|
?>
|
|
<div class="knob-label"><strong style="color:#f39c12">CAPITAL BUDGET</strong></div>
|
|
<input type="text" class="knob" data-thickness="0.4" data-readonly="true" value=<?php echo number_format($ca, 2, '.', ''); ?> data-min="0" data-max=<?php echo $capital->totalcapitalbudget; ?> data-fgColor="#f39c12 "><br>
|
|
<div class="knob-label"><strong>TOTAL : <i class="fa fa-rupee "></i> <?php echo $capital->totalcapitalbudget; ?></strong></div>
|
|
<div class="knob-label"><strong>BALANCE : <i class="fa fa-rupee "></i> <?php echo number_format($ca, 2, '.', ''); ?></strong> </div>
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
</div>
|
|
<!-- ./col -->
|
|
</div>
|
|
<!-- /.box-footer -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--<div class="box box-success">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Bar Chart</h3>
|
|
|
|
<div class="box-tools pull-right">
|
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="box-body chart-responsive">
|
|
<div class="chart" id="bar-chart" style="height: 300px;"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
$(function () {
|
|
"use strict";
|
|
|
|
|
|
//BAR CHART
|
|
var bar = new Morris.Bar({
|
|
element: 'bar-chart',
|
|
resize: true,
|
|
data: [
|
|
{y: 'January', a: 100 , b: 90, c: 50, d: 40},
|
|
{y: 'February', a: 50, b: 40, c: 50, d: 40},
|
|
{y: 'March', a: 50, b: 40, c: 50, d: 40},
|
|
{y: 'April', a: 75, b: 65, c: 50, d: 40},
|
|
{y: 'May', a: 50, b: 40, c: 50, d: 40},
|
|
{y: 'June', a: 75, b: 65, c: 50, d: 40},
|
|
{y: 'July', a: 100, b: 90 , c: 50, d: 40},
|
|
{y: 'August', a: 75, b: 65, c: 50, d: 40},
|
|
{y: 'September', a: 75, b: 65, c: 50, d: 40},
|
|
{y: 'October', a: 100, b: 90 , c: 50, d: 40},
|
|
{y: 'November', a: 50, b: 40, c: 50, d: 40},
|
|
{y: 'December', a: 75, b: 65, c: 50, d: 40}
|
|
],
|
|
barColors: ['#00c0ef ', '#dd4b39 ', '#00a65a ', '#f39c12 '],
|
|
xkey: 'y',
|
|
ykeys: ['a', 'b', 'c', 'd'],
|
|
labels: ['SERVICE', 'REVENUE', 'IMPORT', 'CAPITAL'],
|
|
hideHover: 'auto'
|
|
});
|
|
});
|
|
</script>-->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
|
|
<script src="<?php echo base_url(); ?>public/assets/plugins/morris/morris.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
|
|
/* jQueryKnob */
|
|
$(".knob").knob({
|
|
|
|
|
|
/*change : function (value) {
|
|
|
|
//console.log("change : " + value);
|
|
|
|
},
|
|
|
|
release : function (value) {
|
|
|
|
console.log("release : " + value);
|
|
|
|
},
|
|
|
|
cancel : function () {
|
|
|
|
console.log("cancel : " + this.value);
|
|
|
|
},*/
|
|
|
|
draw: function() { // "tron" case
|
|
|
|
if (this.$.data('skin') == 'tron') {
|
|
var a = this.angle(this.cv) // Angle
|
|
|
|
,
|
|
sa = this.startAngle // Previous start angle
|
|
|
|
,
|
|
sat = this.startAngle // Start angle
|
|
|
|
,
|
|
ea // Previous end angle
|
|
|
|
, eat = sat + a // End angle
|
|
|
|
,
|
|
r = true;
|
|
this.g.lineWidth = this.lineWidth;
|
|
this.o.cursor
|
|
|
|
&&
|
|
(sat = eat - 0.3)
|
|
|
|
&&
|
|
(eat = eat + 0.3);
|
|
if (this.o.displayPrevious) {
|
|
|
|
ea = this.startAngle + this.angle(this.value);
|
|
|
|
this.o.cursor
|
|
|
|
&&
|
|
(sa = ea - 0.3)
|
|
|
|
&&
|
|
(ea = ea + 0.3);
|
|
|
|
this.g.beginPath();
|
|
|
|
this.g.strokeStyle = this.previousColor;
|
|
|
|
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
|
|
|
|
this.g.stroke();
|
|
|
|
}
|
|
this.g.beginPath();
|
|
|
|
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
|
|
|
|
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
|
|
|
|
this.g.stroke();
|
|
this.g.lineWidth = 2;
|
|
|
|
this.g.beginPath();
|
|
|
|
this.g.strokeStyle = this.o.fgColor;
|
|
|
|
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
|
|
|
|
this.g.stroke();
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
/* END JQUERY KNOB */
|
|
|
|
})
|
|
</script>
|
|
<!-- Main row -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- /.row -->
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
|
<script src="<?php echo base_url(); ?>public/assets/plugins/chartjs/Chart.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>public/assets/plugins/knob/jquery.knob.js"></script>
|
|
|
|
<script>
|
|
/* ChartJS
|
|
* -------
|
|
* Here we will create a few charts using ChartJS
|
|
*/
|
|
|
|
//-----------------------
|
|
//- MONTHLY SALES CHART -
|
|
//-----------------------
|
|
|
|
// Get context with jQuery - using jQuery's .get() method.
|
|
var salesChartCanvas = $("#salesChart").get(0).getContext("2d");
|
|
// This will get the first returned node in the jQuery collection.
|
|
|
|
var salesChart = new Chart(salesChartCanvas);
|
|
|
|
|
|
var service = <?php echo JSON_encode($getTotalServicePoCount) ?>;
|
|
var Import = <?php echo JSON_encode($getTotalimportPoCount) ?>;
|
|
var capital = <?php echo JSON_encode($getTotalcapitalPoCount) ?>;
|
|
var revenue = <?php echo JSON_encode($getTotalrevenuePoCount) ?>;
|
|
// alert(service.PONO);
|
|
var serviceValues = [];
|
|
// var arr = new Array();
|
|
$.each(service, function(idx, obj) {
|
|
serviceValues.push(obj[0].totalService);
|
|
});
|
|
var ImportValues = [];
|
|
// var arr = new Array();
|
|
$.each(Import, function(idx, obj) {
|
|
ImportValues.push(obj[0].totalImport);
|
|
});
|
|
var capitalValues = [];
|
|
// var arr = new Array();
|
|
$.each(capital, function(idx, obj) {
|
|
capitalValues.push(obj[0].totalcapital);
|
|
});
|
|
var revenueValues = [];
|
|
// var arr = new Array();
|
|
$.each(revenue, function(idx, obj) {
|
|
revenueValues.push(obj[0].totalrevenue);
|
|
});
|
|
|
|
//console.log(serviceValues);
|
|
//alert(arr.total2);
|
|
var salesChartData = {
|
|
labels: ["April", "May", "June", "July", "August", "September", "October", "November", "December", "January", "February", "March"],
|
|
|
|
datasets: [
|
|
|
|
{
|
|
label: "Electronics",
|
|
fillColor: "rgba(0, 192, 239, 0.2)",
|
|
strokeColor: "rgba(0, 192, 239,0.6)",
|
|
pointColor: "#00c0ef ",
|
|
pointStrokeColor: "rgba(60,141,188,1)",
|
|
pointHighlightFill: "#fff",
|
|
pointHighlightStroke: "rgba(60,141,188,1)",
|
|
data: [serviceValues[3], serviceValues[4], serviceValues[5], serviceValues[6], serviceValues[7], serviceValues[8], serviceValues[9], serviceValues[10], serviceValues[11], serviceValues[0], serviceValues[1], serviceValues[2]]
|
|
|
|
},
|
|
|
|
{
|
|
label: "Digital Goods",
|
|
fillColor: "rgba(221, 75, 57,0.2)",
|
|
strokeColor: "rgba(221, 75, 57,0.8)",
|
|
pointColor: "#dd4b39 ",
|
|
pointStrokeColor: "rgba(60,141,188,1)",
|
|
pointHighlightFill: "#fff",
|
|
pointHighlightStroke: "rgba(60,141,188,1)",
|
|
data: [revenueValues[3], revenueValues[4], revenueValues[5], revenueValues[6], revenueValues[7], revenueValues[8], revenueValues[9], revenueValues[10], revenueValues[11], revenueValues[0], revenueValues[1], revenueValues[2]]
|
|
},
|
|
{
|
|
label: "Food",
|
|
fillColor: "rgba(0, 166, 90, 0.2)",
|
|
strokeColor: "rgba(0, 166, 90,0.8)",
|
|
pointColor: "#00a65a ",
|
|
pointStrokeColor: "rgba(60,141,188,1)",
|
|
pointHighlightFill: "#fff",
|
|
pointHighlightStroke: "rgba(60,141,188,1",
|
|
data: [ImportValues[3], ImportValues[4], ImportValues[5], ImportValues[6], ImportValues[7], ImportValues[8], ImportValues[9], ImportValues[10], ImportValues[11], ImportValues[0], ImportValues[1], ImportValues[2]]
|
|
},
|
|
{
|
|
label: "Food",
|
|
fillColor: "rgba(243, 156, 18, 0.2)",
|
|
strokeColor: "rgba(243, 156, 18,0.8)",
|
|
pointColor: "#f39c12 ",
|
|
pointStrokeColor: "rgba(60,141,188,1)",
|
|
pointHighlightFill: "#fff",
|
|
pointHighlightStroke: "rgba(60,141,188,1",
|
|
data: [capitalValues[3], capitalValues[4], capitalValues[5], capitalValues[6], capitalValues[7], capitalValues[8], capitalValues[9], capitalValues[10], capitalValues[11], capitalValues[0], capitalValues[1], capitalValues[2]]
|
|
}
|
|
|
|
]
|
|
};
|
|
|
|
|
|
var salesChartOptions = {
|
|
//Boolean - If we should show the scale at all
|
|
showScale: true,
|
|
//Boolean - Whether grid lines are shown across the chart
|
|
scaleShowGridLines: false,
|
|
//String - Colour of the grid lines
|
|
scaleGridLineColor: "rgba(0,0,0,.05)",
|
|
//Number - Width of the grid lines
|
|
scaleGridLineWidth: 1,
|
|
//Boolean - Whether to show horizontal lines (except X axis)
|
|
scaleShowHorizontalLines: true,
|
|
//Boolean - Whether to show vertical lines (except Y axis)
|
|
scaleShowVerticalLines: true,
|
|
//Boolean - Whether the line is curved between points
|
|
bezierCurve: true,
|
|
//Number - Tension of the bezier curve between points
|
|
bezierCurveTension: 0.3,
|
|
//Boolean - Whether to show a dot for each point
|
|
pointDot: true,
|
|
//Number - Radius of each point dot in pixels
|
|
pointDotRadius: 4,
|
|
//Number - Pixel width of point dot stroke
|
|
pointDotStrokeWidth: 1,
|
|
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
|
|
pointHitDetectionRadius: 20,
|
|
//Boolean - Whether to show a stroke for datasets
|
|
datasetStroke: true,
|
|
//Number - Pixel width of dataset stroke
|
|
datasetStrokeWidth: 5,
|
|
//Boolean - Whether to fill the dataset with a color
|
|
datasetFill: true,
|
|
//String - A legend template
|
|
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%=datasets[i].label%></li><%}%></ul>",
|
|
//Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
|
|
maintainAspectRatio: false,
|
|
//Boolean - whether to make the chart responsive to window resizing
|
|
responsive: true
|
|
};
|
|
|
|
// alert(salesChartData);
|
|
|
|
//Create the line chart
|
|
salesChart.Line(salesChartData, salesChartOptions);
|
|
|
|
//---------------------------
|
|
//- END MONTHLY SALES CHART -
|
|
//---------------------------
|
|
|
|
//-------------
|
|
//- PIE CHART -
|
|
//-------------
|
|
// Get context with jQuery - using jQuery's .get() method.
|
|
var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
|
|
var pieChart = new Chart(pieChartCanvas);
|
|
var PieData = [{
|
|
value: 700,
|
|
color: "#f56954",
|
|
highlight: "#f56954",
|
|
label: "Chrome"
|
|
},
|
|
{
|
|
value: 500,
|
|
color: "#00a65a",
|
|
highlight: "#00a65a",
|
|
label: "IE"
|
|
},
|
|
{
|
|
value: 400,
|
|
color: "#f39c12",
|
|
highlight: "#f39c12",
|
|
label: "FireFox"
|
|
},
|
|
{
|
|
value: 600,
|
|
color: "#00c0ef",
|
|
highlight: "#00c0ef",
|
|
label: "Safari"
|
|
},
|
|
{
|
|
value: 300,
|
|
color: " #00d976;",
|
|
highlight: " #00d976;",
|
|
label: "Opera"
|
|
},
|
|
{
|
|
value: 100,
|
|
color: "#d2d6de",
|
|
highlight: "#d2d6de",
|
|
label: "Navigator"
|
|
}
|
|
];
|
|
var pieOptions = {
|
|
//Boolean - Whether we should show a stroke on each segment
|
|
segmentShowStroke: true,
|
|
//String - The colour of each segment stroke
|
|
segmentStrokeColor: "#fff",
|
|
//Number - The width of each segment stroke
|
|
segmentStrokeWidth: 1,
|
|
//Number - The percentage of the chart that we cut out of the middle
|
|
percentageInnerCutout: 50, // This is 0 for Pie charts
|
|
//Number - Amount of animation steps
|
|
animationSteps: 300,
|
|
//String - Animation easing effect
|
|
animationEasing: "easeOutBounce",
|
|
//Boolean - Whether we animate the rotation of the Doughnut
|
|
animateRotate: true,
|
|
//Boolean - Whether we animate scaling the Doughnut from the centre
|
|
animateScale: true,
|
|
//Boolean - whether to make the chart responsive to window resizing
|
|
responsive: true,
|
|
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
|
|
maintainAspectRatio: true,
|
|
//String - A legend template
|
|
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
|
|
//String - A tooltip template
|
|
tooltipTemplate: "<%=value %> <%=label%> users"
|
|
};
|
|
//Create pie or douhnut chart
|
|
// You can switch between pie and douhnut using the method below.
|
|
pieChart.Doughnut(PieData, pieOptions);
|
|
// //-----------------
|
|
// //- END PIE CHART -
|
|
// //-----------------
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<?php
|
|
}
|
|
?>
|
|
</section>
|
|
</div>
|