updated graph

templates/index.html

@@ -33,109 +33,153 @@
 
     
     <script>
-      var chartData = {{ chart_data | tojson }};
+  Chart.register(window['chartjs-plugin-annotation']);
 
-      const acceptableDownloadRange = {
+  var chartData = {{ chart_data | tojson }};
-          min: 600,  // Replace with your desired range
-          max: 1000
-      };
 
-      const acceptableUploadRange = {
+  const acceptableDownloadRange = {
-          min: 15,
+    min: 600,
-          max: 50
+    max: 1000
-      };
+  };
 
-      const times = chartData.times;
+  const acceptableUploadRange = {
-      const downloadMinBand = times.map(() => acceptableDownloadRange.min);
+    min: 15,
-      const downloadMaxBand = times.map(() => acceptableDownloadRange.max);
+    max: 50
-      const uploadMinBand = times.map(() => acceptableUploadRange.min);
+  };
-      const uploadMaxBand = times.map(() => acceptableUploadRange.max);
 
-      var ctx = document.getElementById('speedChart').getContext('2d');
+  const times = chartData.times;
-      var speedChart = new Chart(ctx, {
+
-          type: 'line',
+  const downloadMinBand = times.map(() => acceptableDownloadRange.min);
-          data: {
+  const downloadMaxBand = times.map(() => acceptableDownloadRange.max);
-              labels: times,
+  const uploadMinBand = times.map(() => acceptableUploadRange.min);
-              datasets: [
+  const uploadMaxBand = times.map(() => acceptableUploadRange.max);
-                  {
+
-                      label: 'Download Speed',
+  // --- Build annotation boxes for NaN spans ---
-                      data: chartData.down_90th,
+  const annotations = [];
-                      borderColor: 'rgba(75, 192, 192, 1)',
+  let inGap = false;
-                      fill: false
+  let gapStart = null;
-                  },
+
-                  {
+  for (let i = 0; i < times.length; i++) {
-                      label: 'Upload Speed',
+    const down = chartData.down_90th[i];
-                      data: chartData.up_90th,
+    const up = chartData.up_90th[i];
-                      borderColor: 'rgba(153, 102, 255, 1)',
+
-                      fill: false
+    const isNan = isNaN(down) || isNaN(up);
-                  },
+
-                  // Acceptable download range band
+    if (!inGap && isNan) {
-                  {
+      inGap = true;
-                      label: 'Acceptable Download Range',
+      gapStart = times[i];
-                      data: downloadMinBand,
+    }
-                      borderColor: 'rgba(0, 200, 0, 0.1)',
+
-                      backgroundColor: 'rgba(0, 200, 0, 0.1)',
+    if (inGap && !isNan) {
-                      fill: '+1',
+      const gapEnd = times[i];
-                      pointRadius: 0,
+      annotations.push({
-                      borderWidth: 0
+        type: 'box',
-                  },
+        xMin: gapStart,
-                  {
+        xMax: gapEnd,
-                      data: downloadMaxBand,
+        backgroundColor: 'rgba(255, 0, 0, 0.15)',
-                      borderColor: 'rgba(0, 200, 0, 0.1)',
+        borderWidth: 0
-                      backgroundColor: 'rgba(0, 200, 0, 0.1)',
-                      fill: false,
-                      pointRadius: 0,
-                      borderWidth: 0
-                  },
-                  // Acceptable upload range band
-                  {
-                      label: 'Acceptable Upload Range',
-                      data: uploadMinBand,
-                      borderColor: 'rgba(255, 165, 0, 0.1)',
-                      backgroundColor: 'rgba(255, 165, 0, 0.1)',
-                      fill: '+1',
-                      pointRadius: 0,
-                      borderWidth: 0
-                  },
-                  {
-                      data: uploadMaxBand,
-                      borderColor: 'rgba(255, 165, 0, 0.1)',
-                      backgroundColor: 'rgba(255, 165, 0, 0.1)',
-                      fill: false,
-                      pointRadius: 0,
-                      borderWidth: 0
-                  }
-              ]
-          },
-          options: {
-              responsive: true,
-              plugins: {
-                  legend: {
-                      labels: {
-                          filter: function(item, chart) {
-                              // Hide max band labels
-                              return item.text !== undefined;
-                          }
-                      }
-                  }
-              },
-              scales: {
-                  x: {
-                      type: 'category',
-                      title: {
-                          display: true,
-                          text: 'Time'
-                      }
-                  },
-                  y: {
-                      title: {
-                          display: true,
-                          text: 'Speed (Mbps)'
-                      }
-                  }
-              }
-          }
       });
-    </script>
+      inGap = false;
+    }
+  }
+
+  // Close trailing gap if it reaches the end
+  if (inGap) {
+    annotations.push({
+      type: 'box',
+      xMin: gapStart,
+      xMax: times[times.length - 1],
+      backgroundColor: 'rgba(255, 0, 0, 0.15)',
+      borderWidth: 0
+    });
+  }
+
+  var ctx = document.getElementById('speedChart').getContext('2d');
+  var speedChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: times,
+      datasets: [
+        {
+          label: 'Download Speed',
+          data: chartData.down_90th,
+          borderColor: 'rgba(75, 192, 192, 1)',
+          fill: false
+        },
+        {
+          label: 'Upload Speed',
+          data: chartData.up_90th,
+          borderColor: 'rgba(153, 102, 255, 1)',
+          fill: false
+        },
+        {
+          label: 'Acceptable Download Range',
+          data: downloadMinBand,
+          borderColor: 'rgba(0, 200, 0, 0.1)',
+          backgroundColor: 'rgba(0, 200, 0, 0.1)',
+          fill: '+1',
+          pointRadius: 0,
+          borderWidth: 0
+        },
+        {
+          data: downloadMaxBand,
+          borderColor: 'rgba(0, 200, 0, 0.1)',
+          backgroundColor: 'rgba(0, 200, 0, 0.1)',
+          fill: false,
+          pointRadius: 0,
+          borderWidth: 0
+        },
+        {
+          label: 'Acceptable Upload Range',
+          data: uploadMinBand,
+          borderColor: 'rgba(255, 165, 0, 0.1)',
+          backgroundColor: 'rgba(255, 165, 0, 0.1)',
+          fill: '+1',
+          pointRadius: 0,
+          borderWidth: 0
+        },
+        {
+          data: uploadMaxBand,
+          borderColor: 'rgba(255, 165, 0, 0.1)',
+          backgroundColor: 'rgba(255, 165, 0, 0.1)',
+          fill: false,
+          pointRadius: 0,
+          borderWidth: 0
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      plugins: {
+        legend: {
+          labels: {
+            filter: function(item) {
+              return item.text !== undefined;
+            }
+          }
+        },
+        annotation: {
+          annotations: annotations
+        }
+      },
+      scales: {
+        x: {
+          type: 'category',
+          title: {
+            display: true,
+            text: 'Time'
+          }
+        },
+        y: {
+          title: {
+            display: true,
+            text: 'Speed (Mbps)'
+          },
+          min: 0
+        }
+      }
+    }
+  });
+  </script>
 {% endblock %}
 

templates/layout.html

@@ -6,6 +6,7 @@
     <title>Speed Test Results</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
 </head>
 <body>
     <header>