diff --git a/public/GoodVibrationTest.html b/public/GoodVibrationTest.html
new file mode 100644
index 0000000000000000000000000000000000000000..bcbea82b28cb7f3e653cfa1421b93840a521547b
--- /dev/null
+++ b/public/GoodVibrationTest.html
@@ -0,0 +1,74 @@
+<!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>