1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | <?php include ('../include/common.inc.php'); include_header("MyWay Deltas", "mywayDelta"); ?> <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../js/flot/excanvas.min.js"></script><![endif]--> <script language="javascript" type="text/javascript" src="../js/flot/jquery.flot.js"></script> <form method="get" action=""> <select id="routeid" name="routeid"> <?php $query = "select distinct route_full_name from myway_routes where myway_route != '' order by route_full_name"; $query = $conn->prepare($query); $query->execute(); if (!$query) { databaseError($conn->errorInfo()); return Array(); } foreach ($query->fetchAll() as $route) { echo "<option value=\"{$route['route_full_name']}\">{$route['route_full_name']}</option>"; }; ?> </select> <center><div id="placeholder" style="width:900px;height:550px"></div></center> <script type="text/javascript"> $(function () { var placeholder = $("#placeholder"); var data = []; var options = { xaxis: { }, yaxis: { tickFormatter: yformatter }, grid: { hoverable: true, clickable: true, labelMargin: 32 }, series: { lines: { show: false }, points: { show: true } } }; var plot = $.plot(placeholder, data, options); // fetch one series, adding to what we got var alreadyFetched = {}; $("#routeid").change(function () { var select = $(this); // find the URL in the link right next to us // var dataurl = button.siblings('a').attr('href'); var dataurl = "myway_timeliness_route.json.php?routeid=" + select.val(); // then fetch the data with jQuery 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 if (!alreadyFetched[series.label]) { alreadyFetched[series.label] = true; data.push(series); } // and plot all we got $.plot(placeholder, data, options); } $.ajax({ url: dataurl, method: 'GET', dataType: 'json', success: onDataReceived }); }); }); function yformatter(v) { if (Math.floor(v/60) < -9) return ""; return Math.abs(Math.floor(v/60)) + " min " + (v == 0 ? "" : (v >0 ? "early":"late")) } function showTooltip(x, y, contents) { $('<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], y = item.datapoint[1].toFixed(2); showTooltip(item.pageX, item.pageY, item.series.label + " at stop_sequence "+ x +" = " + Math.abs(new Number(y/60).toFixed(2))+" minutes "+(y >0 ? "early":"late")); } } else { $("#tooltip").remove(); previousPoint = null; } }); </script> |