first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,284 @@
|
||||
<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
|
||||
-->
|
||||
Reference in New Issue
Block a user