<?php |
<?php |
/* |
/* |
* Copyright 2010,2011 Alexander Sadleir |
* Copyright 2010,2011 Alexander Sadleir |
|
|
Licensed under the Apache License, Version 2.0 (the "License"); |
Licensed under the Apache License, Version 2.0 (the "License"); |
you may not use this file except in compliance with the License. |
you may not use this file except in compliance with the License. |
You may obtain a copy of the License at |
You may obtain a copy of the License at |
|
|
http://www.apache.org/licenses/LICENSE-2.0 |
http://www.apache.org/licenses/LICENSE-2.0 |
|
|
Unless required by applicable law or agreed to in writing, software |
Unless required by applicable law or agreed to in writing, software |
distributed under the License is distributed on an "AS IS" BASIS, |
distributed under the License is distributed on an "AS IS" BASIS, |
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
See the License for the specific language governing permissions and |
See the License for the specific language governing permissions and |
limitations under the License. |
limitations under the License. |
*/ |
*/ |
include ('../include/common.inc.php'); |
include ('../include/common.inc.php'); |
include_header("MyWay Deltas", "mywayDelta"); |
include_header("MyWay Deltas", "mywayDelta"); |
?> |
?> |
|
<!--[if lt IE 9]> |
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../js/flot/excanvas.min.js"></script><![endif]--> |
<script type="text/javascript" src="../js/FlashCanvas/bin/flashcanvas.js"></script> |
|
<![endif]--> |
<script language="javascript" type="text/javascript" src="../js/flot/jquery.flot.js"></script> |
<script type="text/javascript" src="../js/flotr2/flotr2.min.js"></script> |
<form method="get" action=""> |
<form method="get" action=""> |
<select id="stopid" name="stopid"> |
<select id="stopid" name="stopid"> |
<?php |
<?php |
$query = "select distinct myway_stop from myway_timingdeltas where myway_stop != '' order by myway_stop"; |
$query = "select distinct myway_stop from myway_timingdeltas where myway_stop != '' order by myway_stop"; |
$query = $conn->prepare($query); |
$query = $conn->prepare($query); |
$query->execute(); |
$query->execute(); |
if (!$query) { |
if (!$query) { |
databaseError($conn->errorInfo()); |
databaseError($conn->errorInfo()); |
return Array(); |
return Array(); |
} |
} |
foreach ($query->fetchAll() as $stop) { |
foreach ($query->fetchAll() as $stop) { |
echo "<option value=\"{$stop['myway_stop']}\">{$stop['myway_stop']}</option>"; |
echo "<option value=\"{$stop['myway_stop']}\">{$stop['myway_stop']}</option>"; |
}; |
}; |
?> </select> <center><div id="placeholder" style="width:900px;height:550px"></div></center> |
?> </select> <center><div id="placeholder" style="width:900px;height:550px"></div></center> |
<script type="text/javascript"> |
<script type="text/javascript"> |
$(function () { |
$(function () { |
var d = new Date(); |
var d = new Date(); |
d.setUTCMinutes(0); |
d.setUTCMinutes(0); |
d.setUTCHours(0); |
d.setUTCHours(0); |
var midnight = d.getTime(); |
var midnight = d.getTime(); |
|
var placeholder = document.getElementById("placeholder"); |
var placeholder = $("#placeholder"); |
|
var data = []; |
var data = []; |
var options = { |
var options = { |
xaxis: { |
xaxis: { |
mode: "time", |
mode: "time" |
min: midnight + (1000*60*60*8), |
|
max: midnight + (1000*60*60*23.5) |
|
}, |
}, |
yaxis: { |
yaxis: { |
tickFormatter: yformatter |
tickFormatter: yformatter |
}, |
}, |
grid: { hoverable: true, clickable: true, labelMargin: 32 }, |
mouse: { track: true, relative: true, trackFormatter: showTooltip} |
series: { |
|
lines: { show: false }, |
|
points: { show: true } |
|
} |
|
}; |
}; |
|
|
var plot = $.plot(placeholder, data, options); |
|
var o; |
Flotr.draw(placeholder, data, options); |
o = plot.pointOffset({ x: midnight+ (9*60*60*1000), y: -1.2}); |
|
placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">9am</div>'); |
|
o = plot.pointOffset({ x: midnight+ (16*60*60*1000), y: -1.2}); |
|
placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">4pm</div>'); |
|
// fetch one series, adding to what we got |
// fetch one series, adding to what we got |
var alreadyFetched = {}; |
var alreadyFetched = {}; |
|
|
$("#stopid").change(function () { |
$("#stopid").change(function () { |
var select = $(this); |
var select = $(this); |
|
|
// find the URL in the link right next to us |
// find the URL in the link right next to us |
// var dataurl = button.siblings('a').attr('href'); |
// var dataurl = button.siblings('a').attr('href'); |
var dataurl = "myway_timeliness_stop.json.php?stopid=" + select.val(); |
var dataurl = "myway_timeliness_stop.json.php?stopid=" + select.val(); |
// then fetch the data with jQuery |
// then fetch the data with jQuery |
function onDataReceived(series) { |
function onDataReceived(series) { |
// extract the first coordinate pair so you can see that |
|
// data is now an ordinary Javascript object |
|
var firstcoordinate = '(' + series.data[0][0] + ', ' + series.data[0][1] + ')'; |
|
|
|
|
|
// let's add it to our current data |
// let's add it to our current data |
if (!alreadyFetched[series.label]) { |
if (!alreadyFetched[series.label]) { |
alreadyFetched[series.label] = true; |
alreadyFetched[series.label] = true; |
data.push(series); |
data.push(series); |
} |
} |
|
|
// and plot all we got |
// and plot all we got |
$.plot(placeholder, data, options); |
|
} |
Flotr.draw(placeholder, data, options); |
|
} |
|
|
$.ajax({ |
$.ajax({ |
url: dataurl, |
url: dataurl, |
method: 'GET', |
method: 'GET', |
dataType: 'json', |
dataType: 'json', |
success: onDataReceived |
success: onDataReceived |
}); |
}); |
}); |
}); |
|
|
}); |
}); |
function yformatter(v) { |
function yformatter(v) { |
if (Math.floor(v/60) < -9) return ""; |
if (Math.floor(v/60) < -9) return ""; |
return Math.abs(Math.floor(v/60)) + " min " + (v == 0 ? "" : (v >0 ? "early":"late")) |
return Math.abs(Math.floor(v/60)) + " min " + (v == 0 ? "" : (v >0 ? "early":"late")) |
} |
} |
function showTooltip(x, y, contents) { |
function showTooltip(point) { |
$('<div id="tooltip">' + contents + '</div>').css( { |
|
position: 'absolute', |
|
display: 'none', |
|
top: y + 5, |
|
left: x + 5, |
|
border: '1px solid #fdd', |
|
padding: '2px', |
|
'background-color': '#fee', |
|
opacity: 0.80 |
|
}).appendTo("body").fadeIn(200); |
|
} |
|
|
|
var previousPoint = null; |
|
$("#placeholder").bind("plothover", function (event, pos, item) { |
|
$("#x").text(pos.x.toFixed(2)); |
|
$("#y").text(pos.y.toFixed(2)); |
|
|
|
if (item) { |
|
if (previousPoint != item.dataIndex) { |
|
previousPoint = item.dataIndex; |
|
|
|
$("#tooltip").remove(); |
|
var x = item.datapoint[0].toFixed(2), |
|
y = item.datapoint[1].toFixed(2); |
|
|
|
var d = new Date(); |
|
d.setTime(x); |
|
var time = d.getUTCHours() +':'+ (d.getUTCMinutes().toString().length == 1 ? '0'+ d.getMinutes(): d.getUTCMinutes()) |
|
|
|
|
|
showTooltip(item.pageX, item.pageY, |
var d = new Date(); |
item.series.label + " at "+ time +" = " + Math.abs(new Number(y/60).toFixed(2))+" minutes "+(y >0 ? "early":"late")); |
d.setTime(point.x); |
} |
var time = d.getUTCHours() +':'+ (d.getUTCMinutes().toString().length == 1 ? '0'+ d.getMinutes(): d.getUTCMinutes()) |
} |
|
else { |
|
$("#tooltip").remove(); |
return point.series.label + " at "+ time +" = " + Math.abs(new Number(point.y/60).toFixed(2))+" minutes "+(point.y >0 ? "early":"late"); |
previousPoint = null; |
} |
} |
|
}); |
|
|
|
</script> |
</script> |
|
|