worknova.manus/dashboard/lateness-kingv2.php

<?php
$search_query       = str_replace( 'a.branch_id', 'b.branch_id', $user_branch_permission_sql_a ) ;

$department_lists   = [] ;
$select_departments = $mysqli->query( "SELECT a.department_id, b.department_desc FROM setting_department a
                                       LEFT JOIN setting_department_translation b ON ( a.department_id = b.department_id )
                                       WHERE a.deleted_at IS NULL AND b.lang = 'en'" ) ;
if ( $select_departments->num_rows > 0 ){
	while ( $row_department = $select_departments->fetch_assoc() ){
    	$department_lists[$row_department['department_id']]  = dataFilter( $row_department['department_desc'] ) ;
    }
}


// staff department
$staffdeparments        = [] ;
$select_staffdeparments = $mysqli->query( "SELECT a.staff_id, a.department_id FROM staff_department
 a
									  	   LEFT JOIN staff b ON ( a.staff_id = b.staff_id )
                                           WHERE a.deleted_at IS NULL
                                           GROUP BY a.staff_id" ) ;
if ( $select_staffdeparments->num_rows > 0 ){
	while ( $row_staffdeparment = $select_staffdeparments->fetch_assoc() ){
		$staffdeparments[$row_staffdeparment['staff_id']] = $row_staffdeparment['department_id'] ;
	}
}


// report
$group_lists            = [] ;
$split_departmerns      = [] ;
$split_lists            = [] ;
$split_grouplists       = [] ;
$all_lists              = [] ;
$select_latenesss       = $mysqli->query( "SELECT 
												COUNT(a.type) as total,
												a.staff_id,
												a.type
									       FROM staff_attendance_summary a
									       LEFT JOIN staff b ON ( a.staff_id = b.staff_id )
                                           WHERE a.deleted_at IS NULL AND a.created_at LIKE '%" . $date_time . "%'
                                      			AND a.type IN ( 'late', 'absent' )
                                      			AND b.deleted_at IS NULL
                                      			" . $search_query . "
                                           GROUP BY a.staff_id, a.type" ) ;
if ( $select_latenesss->num_rows > 0 ){
    while ( $row_latenesss   = $select_latenesss->fetch_assoc() ){
    	$get_department      = $staffdeparments[$row_latenesss['staff_id']] ;
    	$type 		 	     = $row_latenesss['type'] ;

    	$group_lists[$get_department] 		   = ( $group_lists[$get_department] + $row_latenesss['total'] ) ; 

    	$split_lists[$type][$get_department]  = ( $split_lists[$type][$get_department] + $row_latenesss['total'] ) ;

    	$split_departmerns[$get_department]    = $get_department ;
    }
}

foreach ( $group_lists as $k => $v ){
	$get_departmentname = ( $k == '0' ? 'Cross Department' : $department_lists[$k] ) ;

	$all_lists[] = [
		'label' => $get_departmentname,
		'y'     => floatval( $v )
	] ;
}

foreach ( $split_lists as $k_lists => $v_lists ){

	$temps 				= [] ;
	foreach ( $split_departmerns as $k_department => $v_department ){
		$temps[] = [
    		'label' => ( $v_department == '0' ? 'Cross Department' : $department_lists[$v_department] ),
    		'y'     => floatval( checkExists( $v_lists[$v_department], '0' ) )
    	] ;
	}

	$split_grouplists[] = [
		'type' 			=> 'bar',
		'showInLegend' 	=> true,
		'name' 			=> ucwords( $k_lists ),
		'dataPoints' 	=> $temps
	] ;
}
?>

<script>
window.onload = function() {

	// all chart
	var allchart = new CanvasJS.Chart("allContainer", {
		animationEnabled: true,
		title: {
			text: "Total of Lateness King by Department"
		},
		data: [{
			type: "pie",
			startAngle: 240,
			yValueFormatString: "##0",
			indexLabel: "{label} {y}",
			dataPoints: <?= json_encode($all_lists) ?>
		}]
	});
	allchart.render() ;






	// group chart
	var groupchart = new CanvasJS.Chart("groupContainer", {
		animationEnabled: true,
		title:{
			text: "Total of Lateness King by Department ( Type )"
		},
		axisY: {
			title: "Type",
			includeZero: true
		},
		legend: {
			cursor:"pointer",
			itemclick : toggleDataSeries
		},
		toolTip: {
			shared: true,
			content: toolTipFormatter
		},
		data: <?= json_encode($split_grouplists) ?>
	});
	groupchart.render();

	function toolTipFormatter(e) {
		var str = "";
		var total = 0 ;
		var str3;
		var str2 ;
		for (var i = 0; i < e.entries.length; i++){
			var str1 = "<span style= \"color:"+e.entries[i].dataSeries.color + "\">" + e.entries[i].dataSeries.name + "</span>: <strong>"+  e.entries[i].dataPoint.y + "</strong> <br/>" ;
			total = e.entries[i].dataPoint.y + total;
			str = str.concat(str1);
		}
		str2 = "<strong>" + e.entries[0].dataPoint.label + "</strong> <br/>";
		str3 = "<span style = \"color:Tomato\">Total: </span><strong>" + total + "</strong><br/>";
		return (str2.concat(str)).concat(str3);
	}

	function toggleDataSeries(e) {
		if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
			e.dataSeries.visible = false;
		}
		else {
			e.dataSeries.visible = true;
		}
		groupchart.render();
	}
}
</script>


<div class="dashboard_section">
	<div class="row dashboard_chart">
		<div class="col-sm-6">
			<div id="allContainer" class="chart_div"></div>
		</div>
		<div class="col-sm-6">
			<div id="groupContainer" class="chart_div"></div>
		</div>
	</div>
</div>