|
Server : Apache/2.4.18 (Ubuntu) System : Linux canvaswebdesign 3.13.0-71-generic #114-Ubuntu SMP Tue Dec 1 02:34:22 UTC 2015 x86_64 User : oppastar ( 1041) PHP Version : 7.0.33-0ubuntu0.16.04.15 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, Directory : /var/www/kanvakanva.com/public_html/application/views/admin/stat_customers/ |
Upload File : |
<!-- chart lib -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css">
<!-- date range picker lib -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<!-- datatbles lib -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.6/js/responsive.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.print.min.js"></script>
<section>
<h2>Statistic Customers</h2>
<p>Cek data pembelian customer untuk atur strategi penjualan.</p>
<div class="row container">
<?= form_open('admin/stat_customers/filter_date', 'class="form-inline"'); ?>
<div class="form-group">
<label for="inputsm">Tanggal : </label>
<input type="text" name="daterange" class="form-control" size="21" value="<?= date("Y/m/d", strtotime($start_date)); ?> - <?= date("Y/m/d", strtotime($end_date)); ?>" />
</div>
<script type="text/javascript">
$('input[name="daterange"]').daterangepicker({
locale: {
format: 'YYYY/MM/DD'
}
});
</script>
<button type="submit" class="btn btn-primary">Submit</button>
<?= form_close() ?>
</div>
<br>
<div class="row" >
<div class="col-sm-12" >
<div class="card bg-light mb-3">
<div class="card-body">
<h6 class="card-title"> Top Customers <sup><i class="fa fa-info-circle" title="Total pembelian dari customers (Max 30 customer dengan pembelian tertinggi)"></i></sup> </h6>
<div class="container">
<canvas id="myChart" style="height:40vh; width:80vw"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [
<?php
$count = 0;
foreach ($all_data as $data) {
if ($count == 30 ) break;
echo '"'.$data->name.'",';
$count++;
}
?>
],
datasets: [{
label: 'Pembelian (Rp)',
data: [
<?php
$count = 0;
foreach ($all_data as $data) {
if ($count == 30 ) break;
echo '"'.$data->subtotal.'",';
$count++;
}
?>
],
fill: true,
backgroundColor: 'rgba(51, 153, 255, 0.5)',
hoverBackgroundColor: 'rgba(51, 153, 255, 0.8)',
borderColor: 'rgba(51, 153, 255, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</div>
<!-- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> -->
</div>
</div>
</div>
<div class="col-sm-12" >
<div class="card bg-light mb-3">
<div class="card-body">
<h6 class="card-title"> Customer terloyal periode <?= date("d/M/Y", strtotime($start_date)); ?> ~ <?= date("d/M/Y", strtotime($end_date)); ?> </h6>
<table id="data" class="table table-striped">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Tanggal</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Province</th>
<th scope="col">Brand</th>
<th scope="col">Product Category</th>
<th scope="col">Product</th>
<th scope="col">Qty</th>
<th scope="col">Total Spent (Rp)</th>
</tr>
</thead>
<tbody>
<?php $urut=1; ?>
<?php foreach ($all_data as $data) : ?>
<tr>
<td><?= $urut ?></td>
<td><?= $data->tgl ?></td>
<td><?= $data->name ?></td>
<td><?= $data->email ?></td>
<td><?= $data->province ?></td>
<td><?= $data->brand ?></td>
<td><?= $data->category ?></td>
<td><?= $data->item_name ?></td>
<td><?= $data->quantity ?></td>
<td><?= $data->subtotal ?></td>
</tr>
<?php $urut++; ?>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#data').DataTable( {
//"order": [4],
"columnDefs": [
{
"targets" : [0,1,2],
"orderable": false,
},
{
"targets": [5,6,8],
"visible": false,
},
],
"dom" : '<"row"<"col-sm-4"B><"col-sm-4"l><"col-sm-4"f>> rt <"row"<"col-sm-6"i><"col-sm-6"p>>',
"buttons" : [
{
extend: 'excel',
title: "Data Customer <?= date("d M Y", strtotime($start_date)); ?> - <?= date("d M Y", strtotime($end_date)); ?>",
},
{
extend: 'print',
title: "<div style='font-size: 20px; text-align: center;'>Data Customer <?= date("d M Y", strtotime($start_date)); ?> - <?= date("d M Y", strtotime($end_date)); ?></div>"
},
],
} );
} );
</script>
<!-- Step 1 - Include the fusioncharts core library -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<!-- Step 2 - Include the fusion theme -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div class="col-sm-12" >
<div class="card bg-light mb-3">
<div class="card-body">
<h6 class="card-title"> Persebaran pembelian periode <?= date("d/M/Y", strtotime($start_date)); ?> ~ <?= date("d/M/Y", strtotime($end_date)); ?> <?= str_pad(9, 2, '0', STR_PAD_LEFT); ?> </h6>
<div id="chart-container"></div>
<script type="text/javascript">
const dataSource = {
chart: {
caption: "Penjualan terbanyak",
subcaption: "(per provinsi)",
legendposition: "BOTTOM",
entitytooltext: "$lname : Rp. $datavalue",
legendcaption: "Total pembelian per provinsi (Rp)",
entityfillhovercolor: "#87ceeb",
theme: "fusion"
},
data: [
{
data: [
<?php $max = 0; ?>
<?php foreach ($map_data as $data): ?>
{
id: "<?= str_pad($data->id_province, 2, '0', STR_PAD_LEFT) ?>",
value: "<?= $data->total_province ?>"
},
<?php if ( $max < $data->total_province ) $max = $data->total_province; ?>
<?php endforeach ?>
]
}
],
colorrange: {
minvalue: "0",
startlabel: "Sedikit",
endlabel: "Banyak",
code: "#FF4411",
gradient: "1",
color: [{
maxvalue: "<?= $max/2 ?>",
code: "#FFDD44",
displayValue: "Sedang"
}, {
maxvalue: "<?= $max ?>",
code: "#6baa01"
}]
},
};
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: " maps/indonesia",
renderAt: "chart-container",
width: "100%",
height: "400",
dataFormat: "json",
dataSource
}).render();
});
</script>
</div>
</div>
</div>
</div>
<!-- </div> -->
</section>