dev-chiefworks
285 lines
11 KiB
PHP
285 lines
11 KiB
PHP
<script>
|
|
var color = Chart.helpers.color;
|
|
var dataSets1 = [];
|
|
var dataSetTrends1 = [];
|
|
var dataSets2 = [];
|
|
var dataSetTrends2 = [];
|
|
// Rideshare only
|
|
dataSets1[0] = []; dataSetTrends1[0] = [];
|
|
dataSets2[0] = []; dataSetTrends2[0] = [];
|
|
$("#progress").attr("data-progresspercent",25);
|
|
// Public transit and walking
|
|
dataSets1[1] = []; dataSetTrends1[1] = [];
|
|
<?php foreach ($pub2 as $f) { ?> dataSets1[1].push({
|
|
x: <?php echo $f[0]; ?>,
|
|
y: <?php echo $f[1]; ?>});
|
|
dataSetTrends1[1].push({
|
|
x: <?php echo $f[0]; ?>,
|
|
y: <?php echo $f[2]; ?>});
|
|
<?php } ?>
|
|
$("#progress").attr("data-progresspercent",27);
|
|
dataSets2[1] = []; dataSetTrends2[1] = [];
|
|
<?php foreach ($pub1 as $f) { ?> dataSets2[1].push({
|
|
x: <?php echo $f[0]; ?>,
|
|
y: <?php echo $f[1]; ?>});
|
|
dataSetTrends2[1].push({
|
|
x: <?php echo $f[0]; ?>,
|
|
y: <?php echo $f[2]; ?>});
|
|
<?php } ?>
|
|
$("#progress").attr("data-progresspercent",30);
|
|
// Public transit, walking and scooter
|
|
dataSets1[2] = []; dataSetTrends1[2] = [];
|
|
dataSets2[2] = []; dataSetTrends2[2] = [];
|
|
$("#progress").attr("data-progresspercent",35);
|
|
// Public transit, walking and bicycle
|
|
dataSets1[3] = []; dataSetTrends1[3] = [];
|
|
dataSets2[3] = []; dataSetTrends2[3] = [];
|
|
$("#progress").attr("data-progresspercent",40);
|
|
// Driving your own car
|
|
dataSets1[4] = []; dataSetTrends1[4] = [];
|
|
<?php foreach ($taxi as $f) { if (!isset($f[2])) continue; ?> dataSets1[4].push({
|
|
x: <?php echo $f[0]; ?>,
|
|
y: <?php echo $f[1]; ?>});
|
|
dataSetTrends1[4].push({
|
|
x: <?php echo $f[0]; ?>,
|
|
y: <?php echo $f[2]; ?>});
|
|
<?php } ?>
|
|
$("#progress").attr("data-progresspercent",43);
|
|
dataSets2[4] = []; dataSetTrends2[4] = [];
|
|
<?php foreach ($taxi0 as $f) { if (!isset($f[2])) continue; ?> dataSets2[4].push({
|
|
x: <?php echo $f[0]; ?>,
|
|
y: <?php echo $f[1]; ?>});
|
|
dataSetTrends2[4].push({
|
|
x: <?php echo $f[0]; ?>,
|
|
y: <?php echo $f[2]; ?>});
|
|
<?php } ?>
|
|
$("#progress").attr("data-progresspercent",45);
|
|
// Car share (like Zipcar or BlueSG) and public transit, walking
|
|
dataSets1[5] = []; dataSetTrends1[5] = [];
|
|
dataSets2[5] = []; dataSetTrends2[5] = [];
|
|
$("#progress").attr("data-progresspercent",50);
|
|
|
|
var scatterChartData1 = {
|
|
datasets: [{
|
|
label: 'Rideshare only',
|
|
borderColor: window.chartColors.blue,
|
|
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
|
data: dataSets1[0]
|
|
}, {
|
|
label: 'Public transit and walking',
|
|
borderColor: window.chartColors.green,
|
|
backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
|
|
data: dataSets1[1]
|
|
}, {
|
|
label: 'Public transit and walking trend line',
|
|
pointBorderColor: window.chartColors.black,
|
|
pointBackgroundColor: color(window.chartColors.black).alpha(0.2).rgbString(),
|
|
data: dataSetTrends1[1],
|
|
showLine: true,
|
|
borderWidth: 1,
|
|
fill: false,
|
|
tension: 0,
|
|
pointRadius: 3,
|
|
pointHoverRadius: 3
|
|
},{
|
|
label: 'Public transit, walking and scooter',
|
|
borderColor: window.chartColors.red,
|
|
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
|
data: dataSets1[2]
|
|
}, {
|
|
label: 'Public transit, walking and bicycle',
|
|
borderColor: window.chartColors.purple,
|
|
backgroundColor: color(window.chartColors.purple).alpha(0.2).rgbString(),
|
|
data: dataSets1[3]
|
|
}, {
|
|
label: 'Driving your own car',
|
|
borderColor: window.chartColors.orange,
|
|
backgroundColor: color(window.chartColors.orange).alpha(0.2).rgbString(),
|
|
data: dataSets1[4]
|
|
}, {
|
|
label: 'Driving your own car trend line',
|
|
pointBorderColor: window.chartColors.black,
|
|
pointBackgroundColor: color(window.chartColors.black).alpha(0.2).rgbString(),
|
|
data: dataSetTrends1[4],
|
|
showLine: true,
|
|
borderWidth: 1,
|
|
fill: false,
|
|
tension: 0,
|
|
pointRadius: 3,
|
|
pointHoverRadius: 3
|
|
}, {
|
|
label: 'Car share (like Zipcar or BlueSG) and public transit, walking',
|
|
borderColor: window.chartColors.yellow,
|
|
backgroundColor: color(window.chartColors.yellow).alpha(0.2).rgbString(),
|
|
Color: color(window.chartColors.yellow).alpha(0.2).rgbString(),
|
|
data: dataSets1[5]
|
|
}]
|
|
};
|
|
|
|
var scatterChartData2 = {
|
|
datasets: [{
|
|
label: 'Rideshare only',
|
|
borderColor: window.chartColors.blue,
|
|
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
|
data: dataSets2[0]
|
|
}, {
|
|
label: 'Public transit and walking',
|
|
borderColor: window.chartColors.green,
|
|
backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
|
|
data: dataSets2[1]
|
|
}, {
|
|
label: 'Public transit and walking trend line',
|
|
pointBorderColor: window.chartColors.black,
|
|
pointBackgroundColor: color(window.chartColors.black).alpha(0.2).rgbString(),
|
|
data: dataSetTrends2[1],
|
|
showLine: true,
|
|
borderWidth: 1,
|
|
fill: false,
|
|
tension: 0,
|
|
pointRadius: 3,
|
|
pointHoverRadius: 3
|
|
},{
|
|
label: 'Public transit, walking and scooter',
|
|
borderColor: window.chartColors.red,
|
|
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
|
data: dataSets2[2]
|
|
}, {
|
|
label: 'Public transit, walking and bicycle',
|
|
borderColor: window.chartColors.purple,
|
|
backgroundColor: color(window.chartColors.purple).alpha(0.2).rgbString(),
|
|
data: dataSets2[3]
|
|
}, {
|
|
label: 'Driving your own car',
|
|
borderColor: window.chartColors.orange,
|
|
backgroundColor: color(window.chartColors.orange).alpha(0.2).rgbString(),
|
|
data: dataSets2[4]
|
|
}, {
|
|
label: 'Driving your own car trend line',
|
|
pointBorderColor: window.chartColors.black,
|
|
pointBackgroundColor: color(window.chartColors.black).alpha(0.2).rgbString(),
|
|
data: dataSetTrends2[4],
|
|
showLine: true,
|
|
borderWidth: 1,
|
|
fill: false,
|
|
tension: 0,
|
|
pointRadius: 3,
|
|
pointHoverRadius: 3
|
|
}, {
|
|
label: 'Car share (like Zipcar or BlueSG) and public transit, walking',
|
|
borderColor: window.chartColors.yellow,
|
|
backgroundColor: color(window.chartColors.yellow).alpha(0.2).rgbString(),
|
|
Color: color(window.chartColors.yellow).alpha(0.2).rgbString(),
|
|
data: dataSets2[5]
|
|
}]
|
|
};
|
|
|
|
window.onload = function() {
|
|
var ctx1 = document.getElementById('canvas1').getContext('2d');
|
|
//window.myScatter = Chart.Scatter(ctx1, {
|
|
window.myScatter1 = new Chart(ctx1, {
|
|
type: 'scatter',
|
|
data: scatterChartData1,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: 'Distance vs. Money Spent'
|
|
},
|
|
}
|
|
});
|
|
var ctx2 = document.getElementById('canvas2').getContext('2d');
|
|
//window.myScatter = Chart.Scatter(ctx2, {
|
|
window.myScatter2 = new Chart(ctx2, {
|
|
type: 'scatter',
|
|
data: scatterChartData2,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: 'Duration vs. Money Spent'
|
|
},
|
|
}
|
|
});
|
|
$('#date1').datepicker({
|
|
changeMonth: true,
|
|
changeYear: true,
|
|
showButtonPanel: true,
|
|
dateFormat: "yy-m-d"
|
|
});
|
|
$('#date2').datepicker({
|
|
changeMonth: true,
|
|
changeYear: true,
|
|
showButtonPanel: true,
|
|
dateFormat: "yy-m-d"
|
|
});
|
|
};
|
|
/*
|
|
document.getElementById('reloadData').addEventListener('click', function() {
|
|
var i = 0;
|
|
scatterChartData.datasets.forEach(function(dataset) {
|
|
dataset.data = dataSets[i];
|
|
i++;
|
|
});
|
|
window.myScatter.update();
|
|
});
|
|
*/
|
|
var dataSets3 = [];
|
|
dataSets3[0] = [];
|
|
dataSets3[1] = [];
|
|
<?
|
|
//var date = luxon.DateTime.fromRFC2822(initialDateStr);
|
|
// 1491004800000
|
|
// 0-2 - public (cost, dist, dur)
|
|
// 3 - date
|
|
// 4-6 - rideshare (cost, dist, dur)
|
|
foreach ($public_vs_rideshare as $id=>$val) {
|
|
if (count($val)!=7) continue;
|
|
if ($val[6]<$val[2] && $val[6]>0.9*$val[2]) {
|
|
?>/* <?= "($val[6]<$val[2] && $val[6]>".(0.1*$val[2]).")" ?> */
|
|
dataSets3[1].push({
|
|
p: '<?= "You could have saved ".($val[4]-$val[0])." dollars!\\r\\nwith a 10% longer trip\\r\\n" ?>',
|
|
t: <?=strtotime($val[3]) ?>000, /* <?= $val[3] ?> */
|
|
o: <?= $val[6] ?>, /* Open: rideshare duration */
|
|
h: <?= max($val[6],$val[2]) ?>,
|
|
l: <?= min($val[6],$val[2]) ?>,
|
|
c: <?= $val[2] ?> /* Close: public duration */
|
|
});
|
|
<? } else { ?>
|
|
dataSets3[0].push({
|
|
p: '<?= $val[6]>$val[2]?"You could have saved ".($val[6]-$val[2])." minutes!\\r\\nand ".($val[4]-$val[0])." dollars!\\r\\n":""?>',
|
|
t: <?=strtotime($val[3]) ?>000, /* <?= $val[3] ?> */
|
|
o: <?= $val[6] ?>, /* Open: rideshare duration */
|
|
h: <?= max($val[6],$val[2]) ?>,
|
|
l: <?= min($val[6],$val[2]) ?>,
|
|
c: <?= $val[2] ?> /* Close: public duration */
|
|
});
|
|
<? } } ?>
|
|
|
|
var ctx = document.getElementById('canvas3').getContext('2d');
|
|
//ctx.canvas.width = 1000;
|
|
//ctx.canvas.height = 850;
|
|
var chart = new Chart(ctx, {
|
|
type: 'candlestick',
|
|
data: {
|
|
datasets: [{
|
|
label: 'Rideshare vs. Public (trip time)',
|
|
data: dataSets3[0],
|
|
color: {
|
|
up: '#01ff01',
|
|
down: '#fe0000',
|
|
unchanged: '#999',
|
|
}
|
|
},{
|
|
label: 'Rideshare vs. Public (10% longer)',
|
|
data: dataSets3[1],
|
|
color: {
|
|
up: '#ffdd01',
|
|
down: '#fe0000',
|
|
unchanged: '#999',
|
|
}
|
|
}]
|
|
}
|
|
});
|
|
|
|
</script>
|
|
<!-- vi:ts=2
|
|
-->
|