dev-chiefworks
354 lines
15 KiB
PHP
354 lines
15 KiB
PHP
<script>
|
|
var color = Chart.helpers.color;
|
|
var dataSets1 = [];
|
|
var dataSetTrends1 = [];
|
|
var dataSets2 = [];
|
|
var dataSetTrends2 = [];
|
|
var dataSets3 = [];
|
|
var dataSetTrends3 = [];
|
|
// 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]; ?>000, y: <?php echo $f[1]; ?>});
|
|
dataSetTrends1[1].push({x: <?php echo $f[0]; ?>000, 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]; ?>000, y: <?php echo $f[1]; ?>});
|
|
dataSetTrends2[1].push({x: <?php echo $f[0]; ?>000, y: <?php echo $f[2]; ?>});
|
|
<?php } ?>
|
|
dataSets3[0] = []; dataSetTrends3[0] = [];
|
|
<?php $tVar1a = []; foreach ($tVar1 as $k=>$v) { ?> dataSets3[0].push({x: <?php echo $k; ?>000, y: <?php echo $v; ?>});
|
|
<?php /* $tVar1a[] = $v;*/ } ?>
|
|
//dataSetTrends3[0] = [<?php echo implode(',',$tVar1a); ?>];
|
|
dataSets3[1] = []; dataSetTrends3[1] = [];
|
|
<?php $tVar2a = []; foreach ($tVar2 as $k=>$v) { ?> dataSets3[1].push({x: <?php echo $k; ?>000, y: <?php echo $v; ?>});
|
|
<?php /* $tVar2a[] = $v;*/ } ?>
|
|
//dataSetTrends3[1] = [<?php echo implode(',',$tVar2a); ?>];
|
|
$("#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 if (isset($taxi)): ?>
|
|
<?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 } ?>
|
|
<?php endif; ?>
|
|
$("#progress").attr("data-progresspercent",43);
|
|
dataSets2[4] = []; dataSetTrends2[4] = [];
|
|
<?php if (isset($taxi0)): ?>
|
|
<?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 } ?>
|
|
<?php endif; ?>
|
|
$("#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: '<?= $providers[$t] ?>',
|
|
borderColor: window.chartColors.green,
|
|
backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
|
|
data: dataSets1[1]
|
|
}, {
|
|
label: '<?= $providers[$t] ?> 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: '<?=$providers[$t]?>',
|
|
borderColor: window.chartColors.green,
|
|
backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
|
|
data: dataSets2[1]
|
|
}, {
|
|
label: '<?=$providers[$t]?> 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]
|
|
}*/]
|
|
};
|
|
|
|
var scatterChartData3 = {
|
|
datasets: [{
|
|
label: '<?= $label1 ?>',
|
|
borderColor: window.chartColors.red,
|
|
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
|
pointBorderColor: window.chartColors.red,
|
|
pointBackgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
|
data: dataSets3[0],
|
|
pointHoverRadius: 5,
|
|
fill: false,
|
|
tension: 0,
|
|
showLine: true
|
|
}, {
|
|
label: '<?= $label2 ?>',
|
|
borderColor: window.chartColors.blue,
|
|
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
|
pointBorderColor: window.chartColors.blue,
|
|
pointBackgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
|
data: dataSets3[1],
|
|
pointHoverRadius: 5,
|
|
fill: false,
|
|
tension: 0,
|
|
showLine: true
|
|
}/*, {
|
|
label: '<?= $label1 ?> line',
|
|
data: dataSets3[0],
|
|
type: 'line'
|
|
}, {
|
|
label: '<?= $label2 ?> line',
|
|
data: dataSets3[1],
|
|
type: 'line'
|
|
}*/]
|
|
};
|
|
|
|
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: '<?= $providers[$t] ?>: <?= $label1 ?>'
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
ticks: {
|
|
callback: function(value, index, values) {
|
|
return new Date(value).toLocaleDateString("en-US");
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
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: '<?= $providers[$t] ?>: <?= $label2 ?>'
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
ticks: {
|
|
callback: function(value, index, values) {
|
|
return new Date(value).toLocaleDateString("en-US");
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
var ctx3 = document.getElementById('canvas3').getContext('2d');
|
|
//window.myScatter = Chart.Scatter(ctx3, {
|
|
window.myScatter3 = new Chart(ctx3, {
|
|
type: 'scatter',
|
|
data: scatterChartData3,
|
|
options: {
|
|
title: {
|
|
display: true,
|
|
text: 'Statistical variance'
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
ticks: {
|
|
callback: function(value, index, values) {
|
|
return new Date(value).toLocaleDateString("en-US");
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
$('#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();
|
|
});
|
|
*/
|
|
function initMap() {
|
|
var map = new google.maps.Map(document.getElementById('map'), {
|
|
zoom: 12,
|
|
center: {lat: 1.313333, lng: 103.833333},
|
|
mapTypeId: 'roadmap'
|
|
});
|
|
|
|
<? foreach ($data as $i=>$f) { ?>
|
|
var flightPlanCoordinates<?= $i ?> = [
|
|
{lat: <?= $f["location_start_lat"] ?>, lng: <?= $f["location_start_lng"] ?>},
|
|
{lat: <?= $f["location_end_lat"] ?>, lng: <?= $f["location_end_lng"] ?>}
|
|
];
|
|
var flightPath<?= $i ?> = new google.maps.Polyline({
|
|
path: flightPlanCoordinates<?= $i ?>,
|
|
geodesic: true,
|
|
strokeColor: '<?= $f['c'] ?>',
|
|
strokeOpacity: 0.06125,
|
|
strokeWeight: 2
|
|
});
|
|
|
|
flightPath<?= $i ?>.setMap(map);
|
|
<? } ?>
|
|
var areaCoordinates1 = [
|
|
<? foreach ($poly1 as $i=>$coord) { ?>{lat: <?= $coord[1] ?>, lng: <?= $coord[0] ?>},<? } ?>
|
|
{lat:<?=$poly1[$i][1]?> ,lng:<?=$poly1[$i][0]?>}
|
|
];
|
|
var areaPath1 = new google.maps.Polyline({
|
|
path: areaCoordinates1,
|
|
geodesic: true,
|
|
strokeColor: '#009900',
|
|
strokeOpacity: 1.0,
|
|
strokeWeight: 2
|
|
});
|
|
areaPath1.setMap(map);
|
|
|
|
var areaCoordinates2 = [
|
|
<? foreach ($poly2 as $i=>$coord) { ?>{lat: <?= $coord[1] ?>, lng: <?= $coord[0] ?>},<? } ?>
|
|
{lat:<?=$poly2[$i][1]?> ,lng:<?=$poly2[$i][0]?>}
|
|
];
|
|
var areaPath2 = new google.maps.Polyline({
|
|
path: areaCoordinates2,
|
|
geodesic: true,
|
|
strokeColor: '#009900',
|
|
strokeOpacity: 1.0,
|
|
strokeWeight: 2
|
|
});
|
|
areaPath2.setMap(map);
|
|
}
|
|
</script>
|
|
<!-- vi:ts=2
|
|
-->
|