Antrean-Reguler/application/views/home/v_home.php

<link rel="stylesheet" href="<?php echo base_url();?>/theme/bootstrap/plugins/morris/morris.css">

<section class="content-header">
    <h1>
        Dashboard
        <small><?php echo date('d, D M Y');?></small>
    </h1>
    <ol class="breadcrumb">
        <li class="active"><a href="#"><i class="fa fa-home"></i> Home</a></li>
    </ol>
</section>
<?php 
    $jumall=0;
    $jumoff=0;
    $jumon=0;
    foreach ($lp as $listpasien) {
        $jumall++;
        if($listpasien->pp_pendaftaran_online!=null){
            $jumon++;
        }else{
            $jumoff++;
        }
        
    }
    $on[]=0;
    $off[]=0;
    $bulantahun[]="";
    
    for ($x = 0; $x <= 8; $x++) {
        $tglend= date('Y-m', strtotime('-'.$x.'month', strtotime( date("Y-m") )));
        
        $this->db->like('pp_tanggal_periksa', $tglend , 'after');
        $this->db->where('pp_pendaftaran_online is NOT NULL');
        $query = $this->db->get('proses_pengunjung');
        echo "<input hidden='' id='online$x' value='$query->num_rows' /> ";
        
        $tglend= date('Y-m', strtotime('-'.$x.' month', strtotime( date("Y-m") )));
        $this->db->like('pp_tanggal_periksa', $tglend , 'after');
        $this->db->where('pp_pendaftaran_online is NULL');
        $query = $this->db->get('proses_pengunjung');
        echo "<input hidden='' id='offline$x' value='$query->num_rows' /> ";
        
        echo "<input hidden='' id='bulantahun$x' value='$tglend' /> ";
        
    }
    //echo count($bulantahun);
    //echo $on[0]." | ".$off[0]; 
?>
<input hidden="" id="online" value="" /> 

<section class="content">
    <div class="row">
        <div class="col-lg-4 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3><?php echo $jumall;?></h3>
                    <p>Jumlah Pengunjung</p>
                </div>
                <div class="icon">
                    <i class="fa fa-users"></i>
                </div>
            </div>
        </div><!-- ./col -->
        <div class="col-lg-4 col-xs-6">
        <!-- small box -->
            <div class="small-box bg-green">
                <div class="inner">
                    <h3><?php echo $jumoff;?></h3>
                    <p>Pendaftar OFFLINE</p>
                </div>
                <div class="icon">
                    <i class="fa fa-wheelchair"></i>
                </div>
            </div>
        </div><!-- ./col -->
        <div class="col-lg-4 col-xs-6">
        <!-- small box -->
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3><?php echo $jumon;?></h3>
                    <p>Pendaftar ONLINE</p>
                </div>
                <div class="icon">
                    <i class="fa fa-mobile-phone"></i>
                </div>
            </div>
        </div><!-- ./col -->
    </div><!-- /.row -->

<div class="row">
    <div class="col-md-12">
    <!-- AREA CHART -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">Data Pengunjung Bulan <code><?php echo date('M Y', strtotime('-8month', strtotime( date("M Y") ))); ?></code> S/D <code><?php echo date('M Y'); ?></code> </h3>
                <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div>
            </div>
            <div class="box-body chart-responsive">
                <div class="chart" id="revenue-chart" style="height: 300px;"></div>
            </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div>
</div>
</section>
<script src="<?php echo base_url();?>/theme/bootstrap/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="<?php echo base_url();?>/theme/bootstrap/plugins/chartjs/Chart.min.js"></script>

<!-- Morris.js charts -->
<script src="<?php echo base_url();?>assets/raphael-min.js"></script>
<script src="<?php echo base_url();?>theme/bootstrap/plugins/morris/morris.min.js"></script>
    

<script>
      $(function () {
        "use strict";

        // AREA CHART
        var area = new Morris.Area({
          element: 'revenue-chart',
          resize: true,
          data: [
            {y: document.getElementById("bulantahun0").value, item1: document.getElementById("online0").value, item2: document.getElementById("offline0").value},
            {y: document.getElementById("bulantahun1").value, item1: document.getElementById("online1").value, item2: document.getElementById("offline1").value},
            {y: document.getElementById("bulantahun2").value, item1: document.getElementById("online2").value, item2: document.getElementById("offline2").value},
            {y: document.getElementById("bulantahun3").value, item1: document.getElementById("online3").value, item2: document.getElementById("offline3").value},
            {y: document.getElementById("bulantahun4").value, item1: document.getElementById("online4").value, item2: document.getElementById("offline4").value},
            {y: document.getElementById("bulantahun5").value, item1: document.getElementById("online5").value, item2: document.getElementById("offline5").value},
            {y: document.getElementById("bulantahun6").value, item1: document.getElementById("online6").value, item2: document.getElementById("offline6").value},
            {y: document.getElementById("bulantahun7").value, item1: document.getElementById("online7").value, item2: document.getElementById("offline7").value},
            {y: document.getElementById("bulantahun8").value, item1: document.getElementById("online8").value, item2: document.getElementById("offline8").value}
          ],
          xkey: 'y',
          ykeys: ['item1', 'item2'],
          labels: ['Online', 'Offline'],
          lineColors: ['#FF7400', '#48B25D'],
          hideHover: 'auto'
        });

      });
    </script>