--- a/myway/myway_timeliness_route.php
+++ b/myway/myway_timeliness_route.php
@@ -17,14 +17,14 @@
 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> 
+<!--[if lt IE 9]>
+    <script type="text/javascript" src="../js/FlashCanvas/bin/flashcanvas.js"></script>
+    <![endif]-->
+    <script type="text/javascript" src="../js/flotr2/flotr2.min.js"></script>
 <form method="get" action="">
-    <select id="routeid" name="routeid">
+    <select id="routename" name="routename">
         <?php
-        $query = "select distinct route_full_name from myway_routes where myway_route != '' order by route_full_name";
+        $query = "select distinct route_name from myway_timingdeltas order by route_name";
         $query = $conn->prepare($query);
         $query->execute();
         if (!$query) {
@@ -32,14 +32,15 @@
             return Array();
         }
         foreach ($query->fetchAll() as $route) {
-            echo "<option value=\"{$route['route_full_name']}\">{$route['route_full_name']}</option>";
+            echo "<option value=\"{$route['route_name']}\">{$route['route_name']}</option>";
         };
         ?>    </select>
     <center><div id="placeholder" style="width:900px;height:550px"></div></center>
     <script type="text/javascript"> 
         $(function () {
+        var placeholder = document.getElementById("placeholder");
 
-            var placeholder = $("#placeholder");
+       
             var data = [];
             var options = {
                 xaxis: {
@@ -47,40 +48,34 @@
                 yaxis: {
                     tickFormatter: yformatter
                 },
-                grid: { hoverable: true, clickable: true, labelMargin: 32   },
-                series: {
-                    lines: { show: false },
-                    points: { show: true }
-                }
+            mouse: { track: true, relative: true, trackFormatter: showTooltip}
+       
             };
     
-            var plot = $.plot(placeholder, data, options);
+            Flotr.draw(placeholder,  data, options);
  
             // fetch one series, adding to what we got
             var alreadyFetched = {};
     
-            $("#routeid").change(function () {
+            $("#routename").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();
+                var dataurl = "myway_timeliness_route.json.php?routename=" + 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;
+                        alreadyFetched[series.label] = true;  
                         data.push(series);
                     }
             
                     // and plot all we got
-                    $.plot(placeholder, data, options);
-                }
+            Flotr.draw(placeholder,  data, options);
+      }
         
                 $.ajax({
                     url: dataurl,
@@ -99,41 +94,12 @@
             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;            
-            }
-        });
+        function showTooltip(point) {
+
+             
+                return  point.series.label + "<br> at stop sequence "+ point.x +" = " + Math.abs(new Number(point.y/60).toFixed(2))+" minutes "+(point.y >0 ? "early":"late");
+    }
+
 
     </script>