1 week ago

Leave status is giving wrong result in chartjs

Posted 1 week ago by noblemfd

In my Laravel-5.8 Application I am displaying Employee Leave Status on BarChart using ChartJs


public function leave()
    $userCompany = Auth::user()->company_id;
    $userId = Auth::user()->id;
    $userEmployee = Auth::user()->employee_id;
     // All Leave Requests
    $allEmployeeLeaves = HrLeaveRequest::select(DB::raw("COUNT(leave_status) as count"))
        ->where('company_id', $userCompany)
        ->whereYear('created_at', date('Y'))
        ->orderBy(DB::raw("MONTH(created_at)"), 'ASC')
    $allEmployeeLeaves = array_column($allEmployeeLeaves, 'count');     
//Approved Leaves
    $approvedLeaves = HrLeaveRequest::select(DB::raw("COUNT(leave_status) as count"))
        ->where('company_id', $userCompany)
        ->where('leave_status', '=', 4)
        ->whereYear('created_at', date('Y'))
        ->orderBy(DB::raw("MONTH(created_at)"), 'ASC')
    $approvedLeaves = array_column($approvedLeaves, 'count'); 
// Rejected Leaves
    $rejectedLeaves = HrLeaveRequest::select(DB::raw("COUNT(leave_status) as count"))
        ->where('company_id', $userCompany)
        ->where('leave_status', 3)
        ->whereYear('created_at', date('Y'))
        ->orderBy(DB::raw("MONTH(created_at)"), 'ASC')
    $rejectedLeaves = array_column($rejectedLeaves, 'count');          
    return view('leave-default')

From the Query Above I want to display a Bar Chart for:

  1. All Leave Requests

  2. Approved Leave

  3. Rejected Leave

Actually when leave_status = 3, it is rejected leaves and leave_status = 4 is approved leave.


          <div class="card-body">
            <div class="chart">
              <canvas id="leaveBarChart" style="min-height: 250px; height: 450px; max-height: 250px; max-width: 100%;"></canvas>

<script src="{{ asset('theme/adminlte3/plugins/chart.js/Chart.min.js') }}"></script>

    var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var data_all_leaves = <?php echo $allEmployeeLeaves; ?>;
    var data_approved_leaves = <?php echo $approvedLeaves; ?>;
    var data_rejected_leaves = <?php echo $rejectedLeaves; ?>;

    var barChartData = {
        labels: month,
        datasets: [{
            label: 'All Leave Requests',
            backgroundColor: "#f56954",
            data: data_all_leaves
        }, {
            label: 'Approved Leaves',
            backgroundColor: "#00a65a",
            data: data_approved_leaves
        }, {
            label: 'Rejected Leaves',
            backgroundColor: "#f39c12",
            data: data_rejected_leaves

    window.onload = function() {
        var ctx = document.getElementById("leaveBarChart").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                elements: {
                    rectangle: {
                        borderWidth: 2,
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderSkipped: 'bottom'
                responsive: true,
                maintainAspectRatio     : true,
                title: {
                    display: true,
                    text: 'Monthly Leave Status'


This is the displayed resuled

I expected the Barchart to display:

All Leaves, Rejected Leaves and Approved Leave. However, I have these three (3) observations.

  1. The chart only display All Leave, which is 2. This comprise of Approved Leave (1) and Rejected Leave (1). It didn't display Approved and Rejected Leaves.

  2. All the Leave are in May, but it put them in January

  3. The Leave counts on the BarChart are in decimal places (1.00, 1.10 ...) instaed of 1, 2 ...

How do I corrected all these?

Thank you

Please sign in or create an account to participate in this conversation.