add: grafik
This commit is contained in:
141
home/admin.php
141
home/admin.php
@@ -215,74 +215,81 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h4 class="mt-4 mb-2">Demografi Umur</h4>
|
<div class="row mt-4">
|
||||||
<div class="row">
|
<!-- Left Col: Chart -->
|
||||||
<!-- Balita -->
|
<div class="col-lg-6">
|
||||||
<div class="col-lg-2 col-6">
|
<div class="card card-info h-100">
|
||||||
<div class="small-box bg-info">
|
<div class="card-header">
|
||||||
<div class="inner">
|
<h3 class="card-title">
|
||||||
<h3><?php echo $balita; ?></h3>
|
<i class="fas fa-chart-pie"></i> Statistik Penduduk
|
||||||
<p>Balita (0-5)</p>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="icon"><i class="fas fa-baby"></i></div>
|
<div class="card-body">
|
||||||
<a href="index.php?page=data-pend&kategori=Balita" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
<canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Anak -->
|
</div>
|
||||||
<div class="col-lg-2 col-6">
|
|
||||||
<div class="small-box bg-success">
|
|
||||||
<div class="inner">
|
|
||||||
<h3><?php echo $anak; ?></h3>
|
|
||||||
<p>Anak (6-12)</p>
|
|
||||||
</div>
|
|
||||||
<div class="icon"><i class="fas fa-child"></i></div>
|
|
||||||
<a href="index.php?page=data-pend&kategori=Anak" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Remaja -->
|
|
||||||
<div class="col-lg-2 col-6">
|
|
||||||
<div class="small-box bg-purple">
|
|
||||||
<div class="inner">
|
|
||||||
<h3><?php echo $remaja; ?></h3>
|
|
||||||
<p>Remaja (13-17)</p>
|
|
||||||
</div>
|
|
||||||
<div class="icon"><i class="fas fa-user-graduate"></i></div>
|
|
||||||
<a href="index.php?page=data-pend&kategori=Remaja" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Dewasa -->
|
|
||||||
<div class="col-lg-3 col-6">
|
|
||||||
<div class="small-box bg-primary">
|
|
||||||
<div class="inner">
|
|
||||||
<h3><?php echo $dewasa; ?></h3>
|
|
||||||
<p>Dewasa (18-59)</p>
|
|
||||||
</div>
|
|
||||||
<div class="icon"><i class="fas fa-user-tie"></i></div>
|
|
||||||
<a href="index.php?page=data-pend&kategori=Dewasa" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Lansia -->
|
|
||||||
<div class="col-lg-3 col-6">
|
|
||||||
<div class="small-box bg-secondary">
|
|
||||||
<div class="inner">
|
|
||||||
<h3><?php echo $lansia; ?></h3>
|
|
||||||
<p>Lansia (>60)</p>
|
|
||||||
</div>
|
|
||||||
<div class="icon"><i class="fas fa-blind"></i></div>
|
|
||||||
<a href="index.php?page=data-pend&kategori=Lansia" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card card-info mt-4">
|
<!-- Right Col: Demographics -->
|
||||||
<div class="card-header">
|
<div class="col-lg-6">
|
||||||
<h3 class="card-title">
|
<div class="row">
|
||||||
<i class="fas fa-chart-pie"></i> Statistik Penduduk
|
<!-- Balita -->
|
||||||
</h3>
|
<div class="col-lg-4 col-6">
|
||||||
</div>
|
<div class="small-box bg-info">
|
||||||
<div class="card-body">
|
<div class="inner">
|
||||||
<canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
|
<h3><?php echo $balita; ?></h3>
|
||||||
</div>
|
<p>Balita (0-5)</p>
|
||||||
|
</div>
|
||||||
|
<div class="icon"><i class="fas fa-baby"></i></div>
|
||||||
|
<a href="index.php?page=data-pend&kategori=Balita" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Anak -->
|
||||||
|
<div class="col-lg-4 col-6">
|
||||||
|
<div class="small-box bg-success">
|
||||||
|
<div class="inner">
|
||||||
|
<h3><?php echo $anak; ?></h3>
|
||||||
|
<p>Anak (6-12)</p>
|
||||||
|
</div>
|
||||||
|
<div class="icon"><i class="fas fa-child"></i></div>
|
||||||
|
<a href="index.php?page=data-pend&kategori=Anak" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Remaja -->
|
||||||
|
<div class="col-lg-4 col-6">
|
||||||
|
<div class="small-box bg-purple">
|
||||||
|
<div class="inner">
|
||||||
|
<h3><?php echo $remaja; ?></h3>
|
||||||
|
<p>Remaja (13-17)</p>
|
||||||
|
</div>
|
||||||
|
<div class="icon"><i class="fas fa-user-graduate"></i></div>
|
||||||
|
<a href="index.php?page=data-pend&kategori=Remaja" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Dewasa -->
|
||||||
|
<div class="col-lg-6 col-6">
|
||||||
|
<div class="small-box bg-primary">
|
||||||
|
<div class="inner">
|
||||||
|
<h3><?php echo $dewasa; ?></h3>
|
||||||
|
<p>Dewasa (18-59)</p>
|
||||||
|
</div>
|
||||||
|
<div class="icon"><i class="fas fa-user-tie"></i></div>
|
||||||
|
<a href="index.php?page=data-pend&kategori=Dewasa" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Lansia -->
|
||||||
|
<div class="col-lg-6 col-6">
|
||||||
|
<div class="small-box bg-secondary">
|
||||||
|
<div class="inner">
|
||||||
|
<h3><?php echo $lansia; ?></h3>
|
||||||
|
<p>Lansia (>60)</p>
|
||||||
|
</div>
|
||||||
|
<div class="icon"><i class="fas fa-blind"></i></div>
|
||||||
|
<a href="index.php?page=data-pend&kategori=Lansia" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
141
home/kaur.php
141
home/kaur.php
@@ -215,74 +215,81 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h4 class="mt-4 mb-2">Demografi Umur</h4>
|
<div class="row mt-4">
|
||||||
<div class="row">
|
<!-- Left Col: Chart -->
|
||||||
<!-- Balita -->
|
<div class="col-lg-6">
|
||||||
<div class="col-lg-2 col-6">
|
<div class="card card-info h-100">
|
||||||
<div class="small-box bg-info">
|
<div class="card-header">
|
||||||
<div class="inner">
|
<h3 class="card-title">
|
||||||
<h3><?php echo $balita; ?></h3>
|
<i class="fas fa-chart-pie"></i> Statistik Penduduk
|
||||||
<p>Balita (0-5)</p>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="icon"><i class="fas fa-baby"></i></div>
|
<div class="card-body">
|
||||||
<a href="index.php?page=data-pend&kategori=Balita" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
<canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Anak -->
|
</div>
|
||||||
<div class="col-lg-2 col-6">
|
|
||||||
<div class="small-box bg-success">
|
|
||||||
<div class="inner">
|
|
||||||
<h3><?php echo $anak; ?></h3>
|
|
||||||
<p>Anak (6-12)</p>
|
|
||||||
</div>
|
|
||||||
<div class="icon"><i class="fas fa-child"></i></div>
|
|
||||||
<a href="index.php?page=data-pend&kategori=Anak" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Remaja -->
|
|
||||||
<div class="col-lg-2 col-6">
|
|
||||||
<div class="small-box bg-purple">
|
|
||||||
<div class="inner">
|
|
||||||
<h3><?php echo $remaja; ?></h3>
|
|
||||||
<p>Remaja (13-17)</p>
|
|
||||||
</div>
|
|
||||||
<div class="icon"><i class="fas fa-user-graduate"></i></div>
|
|
||||||
<a href="index.php?page=data-pend&kategori=Remaja" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Dewasa -->
|
|
||||||
<div class="col-lg-3 col-6">
|
|
||||||
<div class="small-box bg-primary">
|
|
||||||
<div class="inner">
|
|
||||||
<h3><?php echo $dewasa; ?></h3>
|
|
||||||
<p>Dewasa (18-59)</p>
|
|
||||||
</div>
|
|
||||||
<div class="icon"><i class="fas fa-user-tie"></i></div>
|
|
||||||
<a href="index.php?page=data-pend&kategori=Dewasa" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Lansia -->
|
|
||||||
<div class="col-lg-3 col-6">
|
|
||||||
<div class="small-box bg-secondary">
|
|
||||||
<div class="inner">
|
|
||||||
<h3><?php echo $lansia; ?></h3>
|
|
||||||
<p>Lansia (>60)</p>
|
|
||||||
</div>
|
|
||||||
<div class="icon"><i class="fas fa-blind"></i></div>
|
|
||||||
<a href="index.php?page=data-pend&kategori=Lansia" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card card-info mt-4">
|
<!-- Right Col: Demographics -->
|
||||||
<div class="card-header">
|
<div class="col-lg-6">
|
||||||
<h3 class="card-title">
|
<div class="row">
|
||||||
<i class="fas fa-chart-pie"></i> Statistik Penduduk
|
<!-- Balita -->
|
||||||
</h3>
|
<div class="col-lg-4 col-6">
|
||||||
</div>
|
<div class="small-box bg-info">
|
||||||
<div class="card-body">
|
<div class="inner">
|
||||||
<canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
|
<h3><?php echo $balita; ?></h3>
|
||||||
</div>
|
<p>Balita (0-5)</p>
|
||||||
|
</div>
|
||||||
|
<div class="icon"><i class="fas fa-baby"></i></div>
|
||||||
|
<a href="index.php?page=data-pend&kategori=Balita" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Anak -->
|
||||||
|
<div class="col-lg-4 col-6">
|
||||||
|
<div class="small-box bg-success">
|
||||||
|
<div class="inner">
|
||||||
|
<h3><?php echo $anak; ?></h3>
|
||||||
|
<p>Anak (6-12)</p>
|
||||||
|
</div>
|
||||||
|
<div class="icon"><i class="fas fa-child"></i></div>
|
||||||
|
<a href="index.php?page=data-pend&kategori=Anak" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Remaja -->
|
||||||
|
<div class="col-lg-4 col-6">
|
||||||
|
<div class="small-box bg-purple">
|
||||||
|
<div class="inner">
|
||||||
|
<h3><?php echo $remaja; ?></h3>
|
||||||
|
<p>Remaja (13-17)</p>
|
||||||
|
</div>
|
||||||
|
<div class="icon"><i class="fas fa-user-graduate"></i></div>
|
||||||
|
<a href="index.php?page=data-pend&kategori=Remaja" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Dewasa -->
|
||||||
|
<div class="col-lg-6 col-6">
|
||||||
|
<div class="small-box bg-primary">
|
||||||
|
<div class="inner">
|
||||||
|
<h3><?php echo $dewasa; ?></h3>
|
||||||
|
<p>Dewasa (18-59)</p>
|
||||||
|
</div>
|
||||||
|
<div class="icon"><i class="fas fa-user-tie"></i></div>
|
||||||
|
<a href="index.php?page=data-pend&kategori=Dewasa" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Lansia -->
|
||||||
|
<div class="col-lg-6 col-6">
|
||||||
|
<div class="small-box bg-secondary">
|
||||||
|
<div class="inner">
|
||||||
|
<h3><?php echo $lansia; ?></h3>
|
||||||
|
<p>Lansia (>60)</p>
|
||||||
|
</div>
|
||||||
|
<div class="icon"><i class="fas fa-blind"></i></div>
|
||||||
|
<a href="index.php?page=data-pend&kategori=Lansia" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Reference in New Issue
Block a user