graph performance improvements

* large sets are detected and only the last 3000 points are displayed
* users can still zoomout to the entire graph via double clicking
* a popup will warn users they are about to zoom out to the entire graph
* nite overlay no longer snaps to valid data points
* graph/marker clear when stopFollow() is issued

Author: rossengeorgiev

js/app.js

@@ -421,6 +421,7 @@ $(window).ready(function() {
     $("#telemetry_graph").on('mouseout','.holder', function() {
         nite.setDate(null);
         nite.refresh();
+        if(polyMarker) polyMarker.setMap(null);
 
         $("#timebox").removeClass('past').addClass('present');
         updateTimebox(new Date());

js/plot_config.js

@@ -1,28 +1,26 @@
 // init plot
 plot = $.plot(plot_holder, {}, plot_options);
 var updateLegendTimeout = null;
-var latestPosition = null;
 var polyMarker = null;
 
 // updates legend with extrapolated values under the mouse position
-function updateLegend() {
+function updateLegend(pos) {
     var legend = $(plot_holder + " .legendLabel");
     $(plot_holder + " .legend table").css({'background-color':"rgba(255,255,255,0.9)","pointer-events":"none"});
     legend.each(function() {
         $(this).css({'padding-left':'3px'});
     });
 
-    updateLegendTimeout = null;
 
-    var pos = latestPosition;
+    var i, j, ij, dataset = plot.getData();
+    //var axes = plot.getAxes();
 
-    var axes = plot.getAxes();
-    if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
-        pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
-        return;
-    }
+    if(dataset.length === 0) return;
 
-    var i, j, dataset = plot.getData();
+    // this loop find the value for each series
+    // and updates the legend
+    //
+    // here we don't snap to existing data point
     for (i = 0; i < dataset.length; ++i) {
 
         var series = dataset[i];
@@ -34,6 +32,7 @@ function updateLegend() {
                 break;
             }
         }
+        if(i === 0) ij = j;
 
         var y;
         if(series.noInterpolate > 0) { y = series.data[((j===0)?j:j-1)][1]; }
@@ -64,37 +63,32 @@ function updateLegend() {
         });
     }
 
-    if(dataset.length) {
-        for (j = 0; j < dataset[0].data.length; ++j) {
-            if (dataset[0].data[j][0] > pos.x) {
-                break;
-            }
-        }
-    }
-
+    // this loop finds an existing data point, so we can get coordinates
+    // if the crosshair happens to be over null area, we snap to the previous data point
+    //
+    // to snap accurate to the corresponding LatLng, we need to count the number of null data points
+    // then we remove them form the count and we get the index we need for the positions array
     if(follow_vehicle !== null && vehicles[follow_vehicle].positions.length) {
         // adjust index for null data points
         var null_count = 0;
         var data_ref = vehicles[follow_vehicle].graph_data[0];
 
-        if(j > data_ref.data.length / 2) {
-            for(i = data_ref.data.length - 1; i > j; i--) null_count += (data_ref.data[i][1] === null) ? 1 : 0;
+        if(ij > data_ref.data.length / 2) {
+            for(i = data_ref.data.length - 1; i > ij; i--) null_count += (data_ref.data[i][1] === null) ? 1 : 0;
             null_count = data_ref.nulls - null_count * 2;
         } else {
-            for(i = 0; i < j; i++) null_count += (data_ref.data[i][1] === null) ? 1 : 0;
+            for(i = 0; i < ij; i++) null_count += (data_ref.data[i][1] === null) ? 1 : 0;
             null_count *= 2;
         }
 
         // update position
-        polyMarker.setPosition(vehicles[follow_vehicle].positions[j - null_count]);
+        ij -= null_count + ((null_count===0||null_count===data_ref.nulls) ? 0 : 1);
+        if(ij < 0) ij = 0;
+
+        polyMarker.setPosition(vehicles[follow_vehicle].positions[ij]);
 
         // adjust nite overlay
-        var date;
-        try {
-            date = new Date(data_ref.data[j][0]);
-        } catch(e) {
-            return;
-        }
+        var date = new Date(pos.x1);
 
         nite.setDate(date);
         nite.refresh();
@@ -106,28 +100,45 @@ function updateLegend() {
 
 // update legend values on mouse hover
 $(plot_holder).bind("plothover",  function (event, pos, item) {
-    latestPosition = pos;
     plot.lockCrosshair();
     plot.setCrosshair(pos);
     if (!updateLegendTimeout) {
-        updateLegendTimeout = setTimeout(updateLegend, 40);
+        updateLegend(pos);
+        updateLegendTimeout = setTimeout(function() { updateLegendTimeout = null; }, 40);
     }
 });
 
 // double click on the plot clears selection
 $(plot_holder).bind("dblclick", function () {
-    if(plot_options.xaxis) delete plot_options.xaxis;
-    plot = $.plot("#telemetry_graph .holder", plot.getData(), plot_options);
+    if(!follow_vehicle) return;
+
+    if(plot_options.xaxis) {
+        if(plot_options.xaxis.superzoom == 2) {
+            delete plot_options.xaxis;
+        }
+        else {
+            if(plot_options.xaxis.superzoom == 1) {
+               if(!confirm("You are about to zoom out to the entire graph. It may hang your browser. Do you wish to continue?")) return;
+            }
+            plot_options.xaxis = {};
+        }
+    }
+
+    updateGraph(follow_vehicle);
 });
 
 // limit range after selection
 $(plot_holder).bind("plotselected", function (event, ranges) {
     if(typeof ranges.xaxis == 'undefined') return;
 
-    plot = $.plot("#telemetry_graph .holder", plot.getData(), $.extend(true, plot_options, {
+    if(plot_options.xaxis && plot_options.xaxis.superzoom) plot_options.xaxis.superzoom = 2;
+
+    $.extend(true, plot_options, {
         xaxis: {
             min: ranges.xaxis.from,
             max: ranges.xaxis.to
         }
-    }));
+    });
+
+    updateGraph(follow_vehicle);
 });

js/tracker.js

@@ -653,6 +653,9 @@ function stopFollow() {
         if(follow_vehicle in vehicles) vehicles[follow_vehicle].follow = false;
         follow_vehicle = null;
 
+        // clear graph
+        plot = $.plot(plot_holder, {}, plot_options);
+
         // reset nite overlay
         nite.setDate(null);
         nite.refresh();
@@ -1595,8 +1598,25 @@ function updateGraph(vcallsign, reset_selection) {
         nite.refresh();
     }
 
+    var series = vehicles[vcallsign].graph_data;
+
+    // if we are drawing the plot for the fisrt time
+    // and the dataset is too large, we set an initial selection of the last 7 days
+    if(!plot_options.hasOwnProperty('xaxis')) {
+        if(series.length && series[0].data.length > 4001) {
+            var end = series[0].data.length - 1;
+
+            plot_options.xaxis = {
+                superzoom: 1,
+                min: series[0].data[end-4000][0],
+                max: series[0].data[end][0],
+            };
+
+        }
+    }
+
     // replot graph, with this vehicle data, and this vehicles yaxes config
-    plot = $.plot(plot_holder, vehicles[vcallsign].graph_data, $.extend(false, plot_options, {yaxes:vehicles[vcallsign].graph_yaxes}));
+    plot = $.plot(plot_holder, series, $.extend(false, plot_options, {yaxes:vehicles[vcallsign].graph_yaxes}));
 
     vehicles[vcallsign].graph_data_updated = false;
 }