EVOLUTION-NINJA

Edit File: ticket_dashboard.php

<?php $this->load->view('includes/admin_header');?>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('admin_assets/css1/main.css');?>"/>
	
	<link rel="stylesheet" type="text/css" href="<?php echo base_url('admin_assets/css1/font-awesome.min.css');?>" />	
	<link rel='shortcut icon' type='image/x-icon' href='<?php echo base_url('admin_assets/images1/fav_icon.png');?>' />
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	
			<section class="row my_nav">
				<div class="cf">
					<div class="navigation">
						<nav>
							<a href="javascript:void(0)" class="smobitrigger ion-navicon-round"><span>Menu</span></a>
							<ul class="mobimenu">
								<li class="act"><a href="<?php echo base_url('/ticket-dashboard'); ?>">Dashboard</a></li>
								
								<li class="dropdown"> 
									<a href="<?php echo base_url('tickets-user'); ?>" class="dropdown-toggle" data-toggle="dropdown">Users</a>
									<ul class="dropdown-menu  multi-column-dropdown" id="dd-menu">
										<li><a class="teams" href="<?php echo base_url('tickets-user'); ?>">User Directory</a></li>
										<li><a class="departments" href="<?php echo base_url('/tickets-organisation'); ?>">Organizations</a></li>
									</ul>
								</li>
								
								<li class="dropdown"> 
									<a href="<?php echo base_url('/ticket-task'); ?>" class="dropdown-toggle" data-toggle="dropdown">Tasks</a>
									<ul class="dropdown-menu  multi-column-dropdown" id="dd-menu">
										<li><a class="ticket" href="<?php echo base_url('/ticket-task'); ?>">Tasks</a></li>
									</ul>
								</li>
								
								<li class="dropdown"> 
									<a href="<?php echo base_url('/open-ticket');?>" class="dropdown-toggle" data-toggle="dropdown">Tickets</a>
									<ul class="dropdown-menu  multi-column-dropdown" id="dd-menu">
										<li><a class="ticket" href="<?php echo base_url('/open-ticket');?>">Tickets</a></li>
										<li><a class="newTicket" href="<?php echo base_url('/open-ticket');?>">New Ticket</a></li>
									</ul>
								</li>
								
								<li class="dropdown"> 
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">Knowledgebase</a>
									<ul class="dropdown-menu  multi-column-dropdown" id="dd-menu">
										<li><a class="kb" href="<?php echo base_url('/faq'); ?>">FAQs</a></li>
										<li><a class="faq-categories" href="<?php echo base_url('/category-faq'); ?>">Categories</a></li>
										<li><a class="canned" href="<?php echo base_url('/canned-faq'); ?>">Canned Responses</a></li>
									</ul>
								</li>
							</ul>
						</nav>
					</div>
				</div>
				
			</section>
			
			<section class="row my_dropdown">
				<ul>
					<li class="dd_act"><a class="logs" href="<?php echo base_url('/ticket-dashboard'); ?>">Dashboard</a></li>
					<li><a class="teams" href="<?php echo base_url('/agents-directory'); ?>">Agent Directory</a></li>
					<li><a class="users" href="<?php echo base_url('/ticket-profile'); ?>">My Profile</a></li>
				</ul>
			</section>
			
			<style>
				
			</style>
			
			<section class="row my_refresh">
				<form class="form-inline" id="today_date" method="post">
					<div class="form-group">
						<label>Report timeframe:</label>
						<input type="text" class="form-control date_picker" placeholder="Last month">
					</div>
					<div class="form-group">
						<label>Period:</label>
						<select class="form-control" name="range" id="range">
							<option value="1">Up to today</option>
							<option value="2">One Week</option>
							<option value="3">Two Weeks</option>
							<option value="4">One Month</option>
							<option value="5">One Quarter</option>
						</select>
					</div>
					<div class="form-group">
						<button type="click" class="btn today_date">Refresh</button>
					</div>
				</form>
			</section>
			
			<section class="row line_chart">
				<h3>Ticket Activity</h3>
				<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
			</section>
			
			<section class="row statistics">
				<h3 style="margin-top:0px;">Statistics</h3>
				<p>Statistics of tickets organized by department, help topic, and agent.</p>
				
				<ul class="nav nav-tabs sta_tabs">
					<li class="active"><a data-toggle="tab" href="#home">Department</a></li>
					<li><a data-toggle="tab" href="#menu1">Topics</a></li>
					<li><a data-toggle="tab" href="#menu2">Agent</a></li>
				</ul>

<div class="tab-content sta_content">
					<div id="home" class="tab-pane fade in active">
						<div class="">
							<table class="table my_table">
								<thead>
								  <tr>
									<th style="text-align:left;">Department</th>
									<th>Opened</th>
									<th>Assigned</th>
									<th>Overdue</th>
									<th>Closed</th>
									<th>Reopened</th>
									<th>Service Time</th>
									<th>Response Time</th>
								  </tr>
								</thead>
								<tbody>
								  <tr style="background:#F0FAFF;">
									<td style="text-align:left;">Support</td>
									<td>0</td>
									<td>0</td>
									<td>0</td>
									<td>0</td>
									<td>0</td>
									<td>0.0</td>
									<td>0.0</td>
								  </tr>
								</tbody>
							</table>
						</div>
						
						<p class="my_export"><a href="#"><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>&nbsp;Export</a></p>
					</div>
					
					<div id="menu1" class="tab-pane fade">
						<div class="">
							<table class="table my_table">
								<thead>
								  <tr>
									<th style="text-align:left;">Help Topic</th>
									<th>Opened</th>
									<th>Assigned</th>
									<th>Overdue</th>
									<th>Closed</th>
									<th>Reopened</th>
									<th>Service Time</th>
									<th>Response Time</th>
								  </tr>
								</thead>
								<tbody>
								  <tr style="background:#F0FAFF;">
									<td style="text-align:left;">General Inquiry</td>
									<td>0</td>
									<td>0</td>
									<td>0</td>
									<td>0</td>
									<td>0</td>
									<td>0.0</td>
									<td>0.0</td>
								  </tr>
								</tbody>
							</table>
						</div>
						
						<p class="my_export"><a href="#"><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>&nbsp;Export</a></p>
					</div>
					
					<div id="menu2" class="tab-pane fade">
						<div class="">
							<table class="table my_table">
								<thead>
								  <tr>
									<th style="text-align:left;">Agent</th>
									<th>Opened</th>
									<th>Assigned</th>
									<th>Overdue</th>
									<th>Closed</th>
									<th>Reopened</th>
									<th>Service Time</th>
									<th>Response Time</th>
								  </tr>
								</thead>
								
							</table>
						</div>
						
						<p class="my_export"><a href="#"><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>&nbsp;Export</a></p>
					</div>
				</div>
			</section>
		</div>
		
		<p style="text-align:center;padding:10px 15px;">Copyright © 2006-2019 Jayblues Support All Rights Reserved.</p>
	</section>
	
	<style>
		
	</style>
	
	
	
</body>
</html>

<script src="<?php echo base_url('admin_assets/event/assets/js/bootstrap-datepicker.js');?>"></script>	
		<script src="<?php echo base_url('admin_assets/event/assets/js/moment.min.js');?>"></script>
	    <script src="<?php echo base_url('admin_assets/event/assets/js/fullcalendar.min.js');?>"></script>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			$('.smobitrigger').smplmnu();
		});
	</script>

$('.date_picker').datepicker({
				 format: "dd-mm-yyyy",
			}).on('changeDate', function(ev){
				
        		 $('.date_picker').datepicker('hide');
    });

chart();
	function chart(){

$.ajax({
                type   : 'get',
                url    : '<?php echo site_url("yaskawa/get_ticket_activity")?>',
               
                  success:function(response){
                  response=jQuery.parseJSON(response);
                  console.log(response);
                  draw(response.Open,response.Closed,response.overdue,response.Resolved,response.Reopened);

}

});
	}

$('.today_date').click(function(e){
		e.preventDefault();
		var date=$('.date_picker').val();

var range=$('select#range option:selected').val();

$.ajax({
                type   : 'post',
                url    : '<?php echo site_url("yaskawa/get_sort_ticket_activity")?>',
                data   : {'date':date,'range':range},
               
                  success:function(response){
                  response=jQuery.parseJSON(response);
                 
                  draw(response.Open,response.Closed,response.overdue,response.Resolved,response.Reopened);

}

});

function draw(o,c,od,r,ro) {

var chart = new CanvasJS.Chart("chartContainer", {       
		animationEnabled: true,
		title: {
			text: ""
		},
		axisX:{
			minimum: 5,
			maximum: 95
		},
		data: [{
			type: "column",
			dataPoints: [
				{ x: 10, y: o },
				{ x: 20, y: c },
				{ x: 30, y: od },
				{ x: 40, y: r },
				{ x: 50, y: ro },
				// { x: 60, y: 68 },
				// { x: 70, y: 28 },
				// { x: 80, y: 34 },
				// { x: 90, y: 14 }
			]
		}]
	});
	chart.render();

var xSnapDistance = chart.axisX[0].convertPixelToValue(chart.get("dataPointWidth")) / 2;
	var ySnapDistance = 3;

var xValue, yValue;

var mouseDown = false;
	var selected = null;
	var changeCursor = false;

var timerId = null;

function getPosition(e) {
		var parentOffset = $("#chartContainer > .canvasjs-chart-container").offset();          	
		var relX = e.pageX - parentOffset.left;
		var relY = e.pageY - parentOffset.top;
		xValue = Math.round(chart.axisX[0].convertPixelToValue(relX));
		yValue = Math.round(chart.axisY[0].convertPixelToValue(relY));
	}

jQuery("#chartContainer > .canvasjs-chart-container").on({
		mousedown: function(e) {
			mouseDown = true;
			getPosition(e);  
			searchDataPoint();
		},
		mousemove: function(e) {
			getPosition(e);
			if(mouseDown) {
				clearTimeout(timerId);
				timerId = setTimeout(function(){
					if(selected != null) {
						chart.data[0].dataPoints[selected].y = yValue;
						chart.render();
					}   
				}, 0);
			}
			else {
				searchDataPoint();
				if(changeCursor) {
					chart.data[0].set("cursor", "n-resize");
				} else {
					chart.data[0].set("cursor", "default");
				}
			}
		},
		mouseup: function(e) {
			if(selected != null) {
				chart.data[0].dataPoints[selected].y = yValue;
				chart.render();
				mouseDown = false;
			}
		}
	});

}
	</script>