Hopeful fix for the small altitude plots

Author: Mark Jessop

js/tracker.js

@@ -1768,9 +1768,9 @@ function updateVehicleInfo(vcallsign, newPosition) {
   if(wvar.mode != "Position" && vehicle.graph_data.length) {
       var can = $('.vehicle'+vehicle.uuid+' .graph');
       if (vehicle.vehicle_type!="car") {
-        drawAltitudeProfile(can.get(0), can.get(1), vehicle.graph_data[0], vehicle.max_alt, true);
+        drawAltitudeProfile(can.get(0), can.get(1), vehicle.graph_data[0], vehicle.max_alt, vehicle.max_alt_time, true, vehicle.callsign);
       } else {
-        drawAltitudeProfile(can.get(0), can.get(1), vehicle.graph_data[0], vehicle.max_alt, true);
+        drawAltitudeProfile(can.get(0), can.get(1), vehicle.graph_data[0], vehicle.max_alt, vehicle.max_alt_time, true, vehicle.callsign);
       }
   }
 
@@ -2213,11 +2213,21 @@ function updatePolyline(vcallsign) {
     }
 }
 
-function drawAltitudeProfile(c1, c2, series, alt_max, chase) {
+function drawAltitudeProfile(c1, c2, series, alt_max, alt_max_time, chase, name) {
+    // Updated 2023-04-10 to make use of position time data to set 
+    // the x-coordinate. This helps resolve issues with backlog vs live data.
     alt_max = (alt_max < 2000) ? 2000 : alt_max;
     var alt_list = series.data;
+    var first_time = alt_list[0][0];
     var len = alt_list.length;
     var real_len = len - series.nulls;
+    var last_time = alt_list[len-1][0];
+    var time_range = last_time - first_time;
+
+    // Only attempt to draw if we have more than 1 data point.
+    if(len == 1){
+        return;
+    }
 
     var ctx1 = c1.getContext("2d");
     var ctx2 = c2.getContext("2d");
@@ -2250,16 +2260,19 @@ function drawAltitudeProfile(c1, c2, series, alt_max, chase) {
         ctx2.strokeStyle= "#f53333";
     }
 
-    var xt1 = (cw1 - (2 * ratio)) / real_len;
+    //var xt1 = (cw1 - (2 * ratio)) / real_len;
+    var xt1 = (cw1 - (2 * ratio)) / time_range;
     var yt1 = (ch1 - (6 * ratio)) / alt_max;
-    var xt2 = (cw2 - (2 * ratio)) / real_len;
+    //var xt2 = (cw2 - (2 * ratio)) / real_len;
+    var xt2 = (cw2 - (2 * ratio)) / time_range;
     var yt2 = (ch2 - (6 * ratio)) / alt_max;
 
     xt1 = (xt1 > 1) ? 1 : xt1;
     yt1 = (yt1 > 1) ? 1 : yt1;
     xt2 = (xt2 > 1) ? 1 : xt2;
     yt2 = (yt2 > 1) ? 1 : yt2;
 
+
     ctx1.beginPath();
     ctx2.beginPath();
 
@@ -2275,26 +2288,33 @@ function drawAltitudeProfile(c1, c2, series, alt_max, chase) {
     if(cw1*2 > real_len) {
         for(i = 0; i < real_len; i++) {
             alt = alt_list[i][1];
+            alt_time = last_time - alt_list[i][0];
 
-            ctx1.lineTo(1+((i+1)*xt1), ch1 - (alt * yt1));
-            ctx2.lineTo(1+((i+1)*xt2), ch2 - (alt * yt2));
+            // 
+            //ctx1.lineTo(1+((i+1)*xt1), ch1 - (alt * yt1));
+            //ctx2.lineTo(1+((i+1)*xt2), ch2 - (alt * yt2));
+            ctx1.lineTo(cw1-(alt_time*xt1), ch1 - (alt * yt1));
+            ctx2.lineTo(cw2-(alt_time*xt2), ch2 - (alt * yt2));
 
             if(i+2 < len && alt_list[i+2][1] === null) i += 2;
         }
     }
     // if they are too many, downsample to keep the loop short
     else {
-        xt1 = 0.5;
-        xt2 = 0.16;
+        //xt1 = 0.5;
+        //xt2 = 0.16;
         var max = cw1 * 2;
         var step = (1.0*len) / max;
 
         for(i = 0; i < max; i++) {
             alt = alt_list[Math.floor(i*step)][1];
+            alt_time = last_time - alt_list[Math.floor(i*step)][0];
             if(alt === null) continue;
 
-            ctx1.lineTo(1+((i+1)*xt1), ch1 - (alt * yt1));
-            ctx2.lineTo(1+((i+1)*xt2), ch2 - (alt * yt2));
+            //ctx1.lineTo(1+((i+1)*xt1), ch1 - (alt * yt1));
+            //ctx2.lineTo(1+((i+1)*xt2), ch2 - (alt * yt2));
+            ctx1.lineTo(cw1-(alt_time*xt1), ch1 - (alt * yt1));
+            ctx2.lineTo(cw2-(alt_time*xt2), ch2 - (alt * yt2));
         }
 
         // fix index for fill
@@ -2305,8 +2325,13 @@ function drawAltitudeProfile(c1, c2, series, alt_max, chase) {
     ctx2.stroke();
 
     // close the path, so it can be filled
-    ctx1.lineTo(1+((i+1)*xt1), ch1);
-    ctx2.lineTo(1+((i+1)*xt2), ch2);
+    //ctx1.lineTo(1+((i+1)*xt1), ch1);
+    //ctx2.lineTo(1+((i+1)*xt2), ch2);
+    end_x1 = cw1 - (last_time - alt_list[len-1][0])*xt1;
+    end_x2 = cw2 - (last_time - alt_list[len-1][0])*xt2;
+    
+    ctx1.lineTo(end_x1, ch1);
+    ctx2.lineTo(end_x2, ch2);
     ctx1.lineTo(0,ch1);
     ctx2.lineTo(0,ch2);
 
@@ -3039,6 +3064,7 @@ function addPosition(position) {
                             ascent_rate: 0.0,
                             horizontal_rate: 0.0,
                             max_alt: parseFloat(position.gps_alt),
+                            max_alt_time: convert_time(position.gps_time),
                             follow: false,
                             color_index: color_index,
                             graph_data_updated: false,
@@ -3287,6 +3313,7 @@ function addPosition(position) {
     // record the highest altitude
     if(parseFloat(position.gps_alt) > vehicle.max_alt) {
         vehicle.max_alt = parseFloat(position.gps_alt);
+        vehicle.max_alt_time = new_ts;
     }
 
     return;