testing data from good vibration project results

9c562202 · Rushikesh Padsala · 4b02a2c1 · 9c562202
Commit 9c562202 authored 11 months ago by Rushikesh Padsala
Hide whitespace changes
Inline Side-by-side

Showing

with 74 additions and 0 deletions
+74 -0
--- a/public/GoodVibrationTest.html
+++ b/public/GoodVibrationTest.html
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Frequency vs Vibration Chart</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <canvas id="frequencyVibrationChart" width="800" height="400"></canvas>
+    <script>
+        // URL of the web service
+        const dataUrl = 'https://w2.iaf-ex.hft-stuttgart.de/HFT/frequency_vibration_data.json';
+
+        // Function to fetch data from the web service
+        async function fetchData() {
+            try {
+                const response = await fetch(dataUrl);
+                const jsonData = await response.json();
+                return jsonData.data;
+            } catch (error) {
+                console.error('Error fetching data:', error);
+                return [];
+            }
+        }
+
+        // Function to create the chart
+        async function createChart() {
+            const data = await fetchData();
+            const frequencies = data.map(item => item.Frequenzen);
+            const vibrationTimes = data.map(item => item.Nachhallzeit);
+
+            const chartData = {
+                labels: frequencies,
+                datasets: [{
+                    label: 'Vibration Time (Nachhallzeit)',
+                    data: vibrationTimes,
+                    borderColor: 'rgba(75, 192, 192, 1)',
+                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                    fill: false,
+                    tension: 0.1
+                }]
+            };
+
+            const config = {
+                type: 'line',
+                data: chartData,
+                options: {
+                    scales: {
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Frequency (Hz)'
+                            }
+                        },
+                        y: {
+                            title: {
+                                display: true,
+                                text: 'Vibration Time (s)'
+                            }
+                        }
+                    }
+                }
+            };
+
+            const myChart = new Chart(
+                document.getElementById('frequencyVibrationChart'),
+                config
+            );
+        }
+
+        // Call the function to create the chart
+        createChart();
+    </script>
+</body>
+</html>