backoffice/application/views/hyperviseur_dash.php

<!-- Date Picker -->
<link rel="stylesheet" href="<?= base_url('bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') ?>">
<!-- Daterange picker -->
<link rel="stylesheet" href="<?= base_url('bower_components/bootstrap-daterangepicker/daterangepicker.css') ?>">
<!-- ChartJS -->
<script src="<?= base_url('bower_components/Chart.js/Chart.js') ?>"></script>

    <?php

$month = time();
$months[]=convertDate(date("M"));
$label_months [] = date("M")." ".date("Y");
$years[]= date("Y");
for ($i = 1; $i <= 11; $i++) {
    $month = strtotime('last month', $month);
    $months [] = convertDate(date("M", $month));
    $years[] = date("Y", $month);
    $label_months [] = date("M", $month)." ".date("Y", $month);
}
/**
 ** Simple User Treatment
 **/

$date = date("Y");

$super_data =array();
for ($i = 1; $i <= 12; $i++) {
    $super_query_mounth = $this->db->query("SELECT agent_id FROM super_infos
                      WHERE MONTH(date_created) = '".$months[$i-1]."' AND YEAR(date_created) = '".$years[$i-1]."'
                        AND category='super'
                         AND code_parrain='".$this->session->userdata('member_code')."'"
    );
    $super_data[] = $super_query_mounth->num_rows();
}

$demandes_query = $listdem;

if($demandes_query!=false){
    $demandes=$demandes_query->num_rows();
    // Count networks for simple users
    $array_simple = array();
    $num = 0;
    if ($demandes > 0) {
        foreach($demandes_query->result() as $row) {
            $num++;
            $array_simple[] = $row->codeMembre;
        }

        $vals_simple = array_count_values($array_simple);
        //echo 'No. of NON Duplicate Items: '.count($vals_simple).'<br><br>';
        //print_r($vals_simple);
        $pieChart2 = array();
        foreach(array_keys($vals_simple) as $paramName2) {
            $color2 = dechex(rand(0x000000, 0xFFFFFF));
            $trash2 = array("value" => $vals_simple[$paramName2],
                "color"    => "#".$color2,
                "highlight" => "#".$color2,
                "label" => $paramName2);

            $pieChart2[]= $trash2;

        }
    }
}else{
    $pieChart2 = array();
}

/**
 ** Geolocated User Treatment
 **/
$users_geolocated_query = $list_geolocated_users;
// Geolocated Users by month replace 2016 by NOW()
$users_geolocated_data =array();
for ($i = 1; $i <= 12; $i++) {
    $users_geolocated_query_january = $this->db->query("SELECT agent_id FROM super_infos
                      WHERE MONTH(date_created) = '".$months[$i-1]."' AND YEAR(date_created) = '".$years[$i-1]."' 
                      AND category='geolocated' AND latitude!=-1 AND longitude!=-1
                      AND code_parrain IN (SELECT code_membre FROM super_infos WHERE code_parrain='".$this->session->userdata('member_code')."')
                      ");
    $users_geolocated_data[] = $users_geolocated_query_january->num_rows();
}

if($users_geolocated_query!=false){

    $users_geolocated=$users_geolocated_query->num_rows();
    //$users_geolocated_query =  json_encode($users_geolocated_query->result());
    // Counts network for geolocated users
    $array_geolocated = array();
    $num = 0;
    if ($users_geolocated > 0) {
        foreach($users_geolocated_query->result() as $row) {
            $num++;
            $array_geolocated[] = $row->town;
        }
        $vals_geolocated = array_count_values($array_geolocated);
        //echo 'No. of NON Duplicate Items: '.count($vals_geolocated).'<br><br>';
        //print_r($vals_geolocated);
        $pieChart = array();
        foreach(array_keys($vals_geolocated) as $paramName) {
            $color = dechex(rand(0x000000, 0xFFFFFF));
            $trash = array("value" => $vals_geolocated[$paramName],
                "color"    => "#".$color,
                "highlight" => "#".$color,
                "label" => $paramName);

            $pieChart[]= $trash;
        }
    }
}else{
    $pieChart = array();
}
?>

<div class="content-wrapper">

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            <?= $this->lang->line('Hyperviseur'); ?>
            <small><?= $this->lang->line('Tableau de bord'); ?></small>
        </h1>
    </section>

    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <!-- ./col -->
            <div class="col-lg-2 col-md-4 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3><?= $count_geo;?></h3>

                        <p><?= $this->lang->line($hasWallet->first_row()->type == 'ilink_sante' ? 'service_providers' : 'Utilisateurs géolocalisés'); ?></p>
                    </div>
                    <div class="icon">
						<i class="ion ion-location"></i>
                    </div>
                    <a href="#" data-toggle="modal" data-target="#modal-default" class="small-box-footer"><?= $this->lang->line("Plus d'informations"); ?> <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-2 col-md-4 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <h3><?= $count_sup;?></h3>

                        <p><?= $this->lang->line('Superviseur'); ?></p>
                    </div>
                    <div class="icon">
						<i class="ion ion-ios-people"></i>
                    </div>
                    <a href="<?= base_url('Hyperviseur_dash/getAllSupervisor') ?>" class="small-box-footer"><?= $this->lang->line("Plus d'informations"); ?> <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
			<?php if($hasWallet->first_row()->type != 'ilink_sante') { ?>
				<div class="col-lg-2 col-md-4 col-xs-6">
					<!-- small box -->
					<div class="small-box bg-green">
						<div class="inner">
							<h3><?= $count_d_users;?></h3>

							<p><?= $this->lang->line('Demandes de crédits'); ?></p>
						</div>
						<div class="icon">
							<i class="ion ion-cash"></i>
						</div>
						<a href="#" data-toggle="modal" data-target="#modal-default2" class="small-box-footer"><?= $this->lang->line("Plus d'informations"); ?> <i class="fa fa-arrow-circle-right"></i></a>
					</div>
				</div>
				<div class="col-lg-2 col-md-4 col-xs-6">
					<!-- small box -->
					<div class="small-box bg-green">
						<div class="inner">
							<h3><?= $count_d_traite;?></h3>

							<p><?= $this->lang->line("accepted_demands"); ?></p>
						</div>
						<div class="icon">
							<i class="ion ion-checkmark-circled"></i>
						</div>
						<a href="#" data-toggle="modal" data-target="#modal-default2" class="small-box-footer"><?= $this->lang->line("Plus d'informations"); ?> <i class="fa fa-arrow-circle-right"></i></a>
					</div>
				</div>
				<div class="col-lg-2 col-md-4 col-xs-6">
					<!-- small box -->
					<div class="small-box bg-orange">
						<div class="inner">
							<h3><?= $count_d_no_traite;?></h3>

							<p><?= $this->lang->line("Demandes non traitées"); ?></p>
						</div>
						<div class="icon">
							<i class="ion ion-alert-circled"></i>
						</div>
						<a href="#" data-toggle="modal" data-target="#modal-default2" class="small-box-footer"><?= $this->lang->line("Plus d'informations"); ?> <i class="fa fa-arrow-circle-right"></i></a>
					</div>
				</div>
				<div class="col-lg-2 col-md-4 col-xs-6">
					<!-- small box -->
					<div class="small-box bg-red">
						<div class="inner">
							<h3><?= $count_d_no_canceled;?></h3>

							<p><?= $this->lang->line("canceled_demands"); ?></p>
						</div>
						<div class="icon">
							<i class="ion ion-close-circled"></i>
						</div>
						<a href="#" data-toggle="modal" data-target="#modal-default2" class="small-box-footer"><?= $this->lang->line("Plus d'informations"); ?> <i class="fa fa-arrow-circle-right"></i></a>
					</div>
				</div>
			<?php } ?>
            <!-- /.col -->
        </div>
		<div class="row">
			<div class="col-xs-12">
				<!-- BAR CHART -->
				<div class="box box-success">
					<div class="box-header with-border">
						<h3 class="box-title"><?= $this->lang->line("Adhésions"); ?></h3>
					</div>
					<div class="box-body">
						<div class="chart">
							<canvas id="barChart" style="height:230px"></canvas>
						</div>
					</div>
					<!-- /.box-body -->
				</div>
				<!-- /.box -->
			</div>
		</div>
		<div class="row">
			<?php if($hasWallet->first_row()->type != 'ilink_sante') { ?>
				<div class="col-xs-6">
					<!-- DONUT CHART -->
					<div class="box box-danger">
						<div class="box-header with-border">
							<h3 class="box-title"><?= $this->lang->line("Demandes de crédits par superviseur"); ?></h3>
						</div>
						<div class="box-body" id="chart2">
							<canvas id="pieChart2" style="height:250px"></canvas>
						</div>
						<!-- /.box-body -->
					</div>
					<!-- /.box -->
				</div>
			<?php } ?>
			<div class="col-xs-6">
				<!-- DONUT CHART -->
				<div class="box box-danger">
					<div class="box-header with-border">
						<h3 class="box-title"><?= $this->lang->line( $hasWallet->first_row()->type == 'ilink_sante' ? 'service_providers_per_town' : "Utilisateurs géolocalisés par ville"); ?></h3>
					</div>
					<div class="box-body" id="chart">
						<canvas id="pieChart" style="height:250px"></canvas>
					</div>
					<!-- /.box-body -->
				</div>
				<!-- /.box -->
			</div>
		</div>
        <!-- /.row -->
    </section>



</div>


<!-- jQuery 3 -->
<script src="<?= base_url('bower_components/jquery/dist/jquery.min.js') ?>"></script>
<!-- jQuery UI 1.11.4 -->
<script src="<?= base_url('bower_components/jquery-ui/jquery-ui.min.js') ?>"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="<?= base_url('bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
<!-- Morris.js charts -->
<script src="<?= base_url('bower_components/raphael/raphael.min.js') ?>"></script>
<!-- Sparkline -->
<script src="<?= base_url('bower_components/jquery-sparkline/dist/jquery.sparkline.min.js') ?>"></script>
<!-- jvectormap -->
<script src="<?= base_url('plugins/jvectormap/jquery-jvectormap-1.2.2.min.js') ?>"></script>
<script src="<?= base_url('plugins/jvectormap/jquery-jvectormap-world-mill-en.js') ?>"></script>
<!-- jQuery Knob Chart -->
<script src="<?= base_url('bower_components/jquery-knob/dist/jquery.knob.min.js') ?>"></script>
<!-- daterangepicker -->
<script src="<?= base_url('bower_components/moment/min/moment.min.js') ?>"></script>
<script src="<?= base_url('bower_components/bootstrap-daterangepicker/daterangepicker.js') ?>"></script>
<!-- datepicker -->
<script src="<?= base_url('bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') ?>"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="<?= base_url('plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js') ?>"></script>
<!-- Slimscroll -->
<script src="<?= base_url('bower_components/jquery-slimscroll/jquery.slimscroll.min.js') ?>"></script>
<!-- FastClick -->
<script src="<?= base_url('bower_components/fastclick/lib/fastclick.js') ?>"></script>
<!-- AdminLTE App -->
<script src="<?= base_url('dist/js/adminlte.min.js') ?>"></script>
<!-- AdminLTE for demo purposes -->
<script src="<?= base_url('dist/js/demo.js') ?>"></script>

<!-- ChartJS -->
<script src="<?= base_url('bower_components/chart.js/Chart.js') ?>"></script>




<script >
    /*

    var cities = [];
    var cities_simple = [];

    //console.log(geocodeposition(52.5487429714954,-1.81602098644987));


    for(var i = 0 ; i < 1 ; i++ ) {
      var cit;
      var latit = Number(users[i]['latitude']);
      var longi = Number(users[i]['longitude']);


      //cit = geocodeposition(latit, longi);
      cities[i] = {};
      cities[i] = cit;
    }
    */
    //console.log(cities);

    var Pie = '<?= json_encode($pieChart) ?>';
    if(Pie==='[]'){
        var select = document.getElementById('chart');
        $(select.children).hide();
        $(select).append("<p>Aucun utilisateur géolocalisé</p>");
    }else{
        Pie = JSON.parse(Pie);
    }

	<?php if($hasWallet->first_row()->type != 'ilink_sante') { ?>
		var Pie2 = '<?= json_encode($pieChart2) ?>';
		if(Pie2==='[]') {
			var select = document.getElementById('chart2');
			$(select.children).hide();
			$(select).append("<p>Aucune demande de crédit</p>");
		}else{
			Pie2 = JSON.parse(Pie2);
		}
	<?php } ?>



    var areaChartData = {
        labels  : <?= json_encode($label_months) ?>,
        datasets: [
            {
                label               : 'Electronics',
                fillColor           : 'rgba(255, 162, 0, 1)',
                strokeColor         : 'rgba(255, 162, 0, 1)',
                pointColor          : 'rgba(255, 162, 0, 1)',
                pointStrokeColor    : '#ffa200',
                pointHighlightFill  : '#fff',
                pointHighlightStroke: 'rgba(220,220,220,1)',
                data: <?= json_encode($users_geolocated_data) ?>
            },
            {
                label               : 'Digital Goods',
                fillColor           : 'rgba(0, 187, 255, 1)',
                strokeColor         : 'rgba(0, 187, 255, 1)',
                pointColor          : '#00bbff',
                pointStrokeColor    : 'rgba(0, 187, 255, 1)',
                pointHighlightFill  : '#fff',
                pointHighlightStroke: 'rgba(0, 187, 255, 1)',
                data                : <?= json_encode($super_data) ?>
            }
        ]
    };






</script>
<!-- Page script -->
<script src="<?= base_url('dist/js/custom.js') ?>"></script>