dev-chiefworks
342 lines
9.1 KiB
PHP
342 lines
9.1 KiB
PHP
<h1>Compare</h1>
|
|
<form method="post" action="?">
|
|
<fieldset>
|
|
<table>
|
|
<tr>
|
|
<td>From</td>
|
|
<td><select name="from"><?php foreach ($address as $i=>$j) { ?>
|
|
<option value="<?= $i ?>"<?=$i==$from?" selected":""?>><?=$j?></option>
|
|
<?php } ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td>To</td>
|
|
<td><select name="to"><?php foreach ($address as $i=>$j) { ?>
|
|
<option value="<?= $i ?>"<?=$i==$to?" selected":""?>><?=$j?></option>
|
|
<?php } ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="radio" name="all" value="1"<?=$all==1?'checked':''?> /></td>
|
|
<td>All time</td>
|
|
</tr>
|
|
<tr valign="top">
|
|
<td><input type="radio" name="all" value="0"<?=$all!=1?'checked':''?> /></td>
|
|
<td>Range: <input type="text" name="daterange" value="<?=$date_from?> - <?=$date_to?>" size="30" /></td>
|
|
</tr>
|
|
</table>
|
|
<input type="submit" value="Compare" />
|
|
</fieldset>
|
|
</form>
|
|
<div id="container"></div>
|
|
<br/>
|
|
<style type="text/css">
|
|
.holder {
|
|
position: relative;
|
|
z-index: 10000;
|
|
}
|
|
.datepicker {
|
|
display: block;
|
|
}
|
|
</style>
|
|
<style>
|
|
canvas {
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
.tabcontainer{
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
ul.tabs{
|
|
margin: 0px;
|
|
padding: 0px;
|
|
list-style: none;
|
|
}
|
|
ul.tabs li{
|
|
background: none;
|
|
color: #222;
|
|
display: inline-block;
|
|
padding: 10px 15px;
|
|
cursor: pointer;
|
|
}
|
|
ul.tabs li.current{
|
|
background: #ededed;
|
|
color: #222;
|
|
}
|
|
|
|
.tab-content{
|
|
display: none;
|
|
background: #ededed;
|
|
padding: 15px;
|
|
}
|
|
|
|
.tab-content.current{
|
|
display: inherit;
|
|
}
|
|
</style>
|
|
|
|
<div class="tabcontainer">
|
|
|
|
<ul class="tabs">
|
|
<li class="tab-link current" data-tab="tab-1">Data</li>
|
|
<li class="tab-link" data-tab="tab-2">History</li>
|
|
<li class="tab-link" data-tab="tab-3">Vendor</li>
|
|
<li class="tab-link" data-tab="tab-4">Hour of the Day</li>
|
|
</ul>
|
|
|
|
<div id="tab-1" class="tab-content current">
|
|
<?=$past_trips?>
|
|
<br/>
|
|
<?=$quotes?>
|
|
</div>
|
|
<div id="tab-2" class="tab-content">
|
|
<canvas id="canvasHistory"></canvas>
|
|
</div>
|
|
<div id="tab-3" class="tab-content">
|
|
<canvas id="canvasVendorLine"></canvas>
|
|
<canvas id="canvasVendor"></canvas>
|
|
</div>
|
|
<div id="tab-4" class="tab-content">
|
|
<canvas id="canvasChart"></canvas>
|
|
</div>
|
|
|
|
<script>
|
|
var sourceFormat = 'YYYY-MM-DD HH:mm:ss';
|
|
var timeFormat = 'MM/DD/YYYY HH:mm';
|
|
|
|
function newDate(date) {
|
|
return moment(date, sourceFormat).format(timeFormat);
|
|
}
|
|
|
|
window.onload = function() {
|
|
var ctxHistory = document.getElementById("canvasHistory");
|
|
var chartHistory = new Chart(ctxHistory, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [ // Date Objects
|
|
<? foreach ($bulk_data as $key=>$val) { echo "newDate('${key}'),"; } echo "newDate('".date("Y-m-d H:i:s",time()+86400)."')"; ?>
|
|
],
|
|
datasets: [{
|
|
label: 'All values',
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgba(255,99,132,1)',
|
|
fill: false,
|
|
data: [
|
|
<? foreach ($bulk_data as $key=>$val) { echo "'${val}',"; } ?>
|
|
],
|
|
}]
|
|
},
|
|
options: {
|
|
title: {
|
|
text: 'Past trips and quotes history'
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
type: 'time',
|
|
time: {
|
|
parser: timeFormat,
|
|
// round: 'day'
|
|
tooltipFormat: 'll HH:mm'
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Date'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'value'
|
|
}
|
|
}]
|
|
},
|
|
}
|
|
});
|
|
|
|
var ctxVendor = document.getElementById("canvasVendor");
|
|
var chartVendor = new Chart(ctxVendor, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [
|
|
<? foreach ($by_vendor as $key=>$val) { echo "\"${key}\","; } ?>
|
|
],
|
|
datasets: [{
|
|
label: 'Grab',
|
|
data: [
|
|
<? foreach ($by_vendor as $key=>$val) { echo (isset($val[3])?$val[3]:'').","; } ?>
|
|
],
|
|
backgroundColor: 'rgba(255, 206, 86, 0.2)',
|
|
borderColor: 'rgba(255, 206, 86, 1)',
|
|
borderWidth: 1
|
|
},{
|
|
label: 'ComfortDelGro',
|
|
data: [
|
|
<? foreach ($by_vendor as $key=>$val) { echo (isset($val[4])?$val[4]:'').","; } ?>
|
|
],
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgba(255,99,132,1)',
|
|
borderWidth: 1
|
|
},{
|
|
label: 'Gojek',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 1,
|
|
data: [
|
|
<? foreach ($by_vendor as $key=>$val) { echo (isset($val[5])?$val[5]:'').","; } ?>
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
var ctxVendorLine = document.getElementById("canvasVendorLine");
|
|
var chartVendorLine = new Chart(ctxVendorLine, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [
|
|
<? foreach ($by_vendor as $key=>$val) { echo "\"${key}\","; } ?>
|
|
],
|
|
datasets: [{
|
|
label: 'Grab',
|
|
data: [
|
|
<? $pv=0; foreach ($by_vendor as $key=>$val) { if(isset($val[3])) { echo $val[3].","; $pv=$val[3]; } else { echo $pv.","; }} ?>
|
|
],
|
|
backgroundColor: 'rgba(255, 206, 86, 0.2)',
|
|
borderColor: 'rgba(255, 206, 86, 1)',
|
|
borderWidth: 1
|
|
},{
|
|
label: 'ComfortDelGro',
|
|
data: [
|
|
<? $pv=0; foreach ($by_vendor as $key=>$val) { if(isset($val[4])) { echo $val[4].","; $pv=$val[4]; } else { echo $pv.","; }} ?>
|
|
],
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
borderColor: 'rgba(255,99,132,1)',
|
|
borderWidth: 1
|
|
},{
|
|
label: 'Gojek',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 1,
|
|
data: [
|
|
<? $pv=0; foreach ($by_vendor as $key=>$val) { if(isset($val[5])) { echo $val[5].","; $pv=$val[5]; } else { echo $pv.","; }} ?>
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
<?
|
|
$backgroundColor = [
|
|
'rgba(255, 99, 132, 0.2)',
|
|
'rgba(54, 162, 235, 0.2)',
|
|
'rgba(255, 206, 86, 0.2)',
|
|
'rgba(75, 192, 192, 0.2)',
|
|
'rgba(153, 102, 255, 0.2)',
|
|
'rgba(255, 159, 64, 0.2)'
|
|
];
|
|
$borderColor = [
|
|
'rgba(255,99,132,1)',
|
|
'rgba(54, 162, 235, 1)',
|
|
'rgba(255, 206, 86, 1)',
|
|
'rgba(75, 192, 192, 1)',
|
|
'rgba(153, 102, 255, 1)',
|
|
'rgba(255, 159, 64, 1)'
|
|
];
|
|
?>
|
|
var ctxChart = document.getElementById("canvasChart");
|
|
var chartChart = new Chart(ctxChart, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [
|
|
<? $n = 1; for($h=0;$h<24;$h++) { $hh = sprintf("%02d",$h); if (isset($day_hour[$hh])) { foreach($day_hour[$hh] as $val) {
|
|
echo "\"${hh}\",";
|
|
$n++; }} else { echo "\"${hh}\","; $n++; } } ?>
|
|
],
|
|
datasets: [<? for ($i=0;$i<24;$i++) { $ii = sprintf("%02d",$i); ?>{
|
|
label: '<?= $ii ?> hr',
|
|
backgroundColor: '<?= $backgroundColor[$i%6] ?>',
|
|
borderColor: '<?= $borderColor[$i%6] ?>',
|
|
borderWidth: 1,
|
|
data: [
|
|
<? for ($h=0;$h<24;$h++) { $hh = sprintf("%02d",$h); if (isset($day_hour[$hh])) { foreach($day_hour[$hh] as $val) {
|
|
echo $hh==$ii ? "\"${val}\"," : ",";
|
|
}} else { echo "\"\","; }} ?>
|
|
]
|
|
},<? } ?>]
|
|
},
|
|
options: {
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
barPercentage: <?= 20.0 * $n / 100 ?> /* <?= $n ?> */
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
<script>
|
|
$(document).ready(function(){
|
|
|
|
$('ul.tabs li').click(function(){
|
|
var tab_id = $(this).attr('data-tab');
|
|
|
|
$('ul.tabs li').removeClass('current');
|
|
$('.tab-content').removeClass('current');
|
|
|
|
$(this).addClass('current');
|
|
$("#"+tab_id).addClass('current');
|
|
});
|
|
|
|
$('input[name="daterange"]').daterangepicker({
|
|
timePicker: false,
|
|
opens: 'right',
|
|
locale: {
|
|
format: 'YYYY-MM-DD'
|
|
}
|
|
}, function(start, end, label) {
|
|
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
|
|
});
|
|
});
|
|
</script>
|
|
<?php
|
|
//var_dump($bulk_data);
|
|
/*
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.2)',
|
|
'rgba(54, 162, 235, 0.2)',
|
|
'rgba(255, 206, 86, 0.2)',
|
|
'rgba(75, 192, 192, 0.2)',
|
|
'rgba(153, 102, 255, 0.2)',
|
|
'rgba(255, 159, 64, 0.2)'
|
|
],
|
|
borderColor: [
|
|
'rgba(255,99,132,1)',
|
|
'rgba(54, 162, 235, 1)',
|
|
'rgba(255, 206, 86, 1)',
|
|
'rgba(75, 192, 192, 1)',
|
|
'rgba(153, 102, 255, 1)',
|
|
'rgba(255, 159, 64, 1)'
|
|
],
|
|
*/
|