Messkurve für Schleife wird angezeigt

components/modules/Kue705FO.tsx

@@ -281,83 +281,94 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
 
   const createLoopChart = (data: DataLoop[], title: string) => {
     const canvas = document.getElementById("myChart") as HTMLCanvasElement;
-    const ctx = canvas?.getContext("2d");
-    if (!ctx) {
-      console.error("Canvas context konnte nicht gefunden werden");
+    if (!canvas) {
+      console.error("Canvas mit ID 'myChart' nicht gefunden.");
       return;
     }
-
-    const createLoopChart = (data: DataLoop[], title: string) => {
-      const canvas = document.getElementById("myChart") as HTMLCanvasElement;
-      const ctx = canvas?.getContext("2d");
-      if (!ctx) {
-        console.error("Canvas context konnte nicht gefunden werden");
-        return;
-      }
-
-      new Chart(ctx, {
-        type: "line",
-        data: {
-          labels: data.map((row) => new Date(row.t).toLocaleString("de-DE")),
-          datasets: [
-            {
-              label: "Isolationswiderstand (MOhm)",
-              data: data.map((row) => row.m),
-              borderColor: "#00AEEF",
-              borderWidth: 1,
-              tension: 0.1, // Ersatz für lineTension
-              pointRadius: 0.3,
-              pointHoverRadius: 5,
-              fill: false,
-              yAxisID: "y",
-            },
-            {
-              label: "Schleifenwiderstand (kOhm)",
-              data: data.map((row) => row.n),
-              borderColor: "black",
-              borderWidth: 1,
-              tension: 0.1, // Ersatz für lineTension
-              pointRadius: 0.3,
-              pointHoverRadius: 5,
-              fill: false,
-              yAxisID: "y1",
-            },
-          ],
-        },
-        options: {
-          scales: {
-            y: {
-              type: "linear",
-              position: "left",
-              title: { display: true, text: "MOhm" },
-            },
-            y1: {
-              type: "linear",
-              position: "right",
-              title: { display: true, text: "kOhm" },
-            },
-          },
-          plugins: {
-            zoom: {
-              pan: {
-                enabled: true,
-                mode: "xy",
-              },
-              zoom: {
-                wheel: {
-                  enabled: true,
-                },
-                pinch: {
-                  enabled: true,
-                },
-                mode: "xy",
-              },
-            },
-          },
-        },
+  
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      console.error("2D-Kontext für Canvas konnte nicht erstellt werden.");
+      return;
+    }
+  
+    // Konvertiere Zeitstempel in ein lesbares Format für die X-Achse
+    const labels = data.map((row) => {
+      const date = new Date(row.t.replace(/-/g, "/")); // Zeitstring parsen
+      return date.toLocaleString("de-DE", {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
       });
-    };
+    });
+  
+    new Chart(ctx, {
+      type: "line",
+      data: {
+        labels,
+        datasets: [
+          {
+            label: "Isolationswiderstand (MOhm)",
+            data: data.map((row) => row.m),
+            borderColor: "#00AEEF",
+            borderWidth: 1,
+            tension: 0.1, // Glättung der Linie
+            pointRadius: 1,
+            pointHoverRadius: 5,
+            fill: false,
+            yAxisID: "y",
+          },
+          {
+            label: "Schleifenwiderstand (kOhm)",
+            data: data.map((row) => row.n),
+            borderColor: "black",
+            borderWidth: 1,
+            tension: 0.1,
+            pointRadius: 1,
+            pointHoverRadius: 5,
+            fill: false,
+            yAxisID: "y1",
+          },
+        ],
+      },
+      options: {
+        scales: {
+          x: {
+            type: "category",
+            title: { display: true, text: "Zeit" },
+          },
+          y: {
+            type: "linear",
+            position: "left",
+            title: { display: true, text: "MOhm" },
+          },
+          y1: {
+            type: "linear",
+            position: "right",
+            title: { display: true, text: "kOhm" },
+          },
+        },
+        plugins: {
+          zoom: {
+            pan: {
+              enabled: true,
+              mode: "xy",
+            },
+            zoom: {
+              wheel: {
+                enabled: true,
+              },
+              pinch: {
+                enabled: true,
+              },
+              mode: "xy",
+            },
+          },
+        },
+      },
+    });
   };
+  
 
   useEffect(() => {
     const updateAlarmStatus = () => {