Absensi/dashboard.php at master · krypton-byte/Absensi · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<?php
require 'modules/databases.php';
$TITLE = "HOME";
include 'elements/header.php';
$user = new Administrator($_SESSION['username'], $_SESSION['password']);
?>
<script src="AdminLTE/plugins/chart.js/Chart.min.js"></script>
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">DASHBOARD</h3>
              </div>
              <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                    </div>
                    <div class="col-6">
                        <div class="col-12">
                            <div class="small-box bg-primary">
                                <div class="inner">
                                  <p>Jumlah Kelas</p>
                                    <h3><?php echo $user->jumlahKelas() ?></h3>
                                </div>
                                <div class="icon">
                                <i class="fa fa-chalkboard-user"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="small-box bg-primary">
                                <div class="inner">
                                  <p>Total Jurusan</p>
                                    <h3><?php echo $user->jumlahJurusan() ?></h3>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-bookmark"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              </div>
              <!-- /.card-body -->
            </div>
<script>
        //-------------
    //- DONUT CHART -
    //-------------
    // Get context with jQuery - using jQuery's .get() method.
    var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
    var donutData        = {
      labels: [
          'Hadir',
          'Izin',
          'Sakit',
          'Alpa',
          'Belum Absen',
      ],
      datasets: [
        {
          data: [
            <?php echo $user->jumlah('Hadir')?>,
            <?php echo $user->jumlah('Izin')?>,
            <?php echo $user->jumlah('Sakit')?>,
            <?php echo $user->jumlah('Alpa')?>,
            <?php echo $user->belumAbsen() ?>
          ],
          backgroundColor : ['#00c0ef', '#00a65a', '#f39c12', '#f56954', '#3c8dbc'],
        }
      ]
    }
    var donutOptions     = {
      maintainAspectRatio : false,
      responsive : true,
    }
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    new Chart(donutChartCanvas, {
      type: 'doughnut',
      data: donutData,
      options: donutOptions
    })
</script>
<?php
include 'elements/footer.php';
?>