add the dynamic data visualizatior component and implement it

src/components/navbar.vue

@@ -41,6 +41,9 @@
            <li class="nav-item btn btn-outline-success mx-1 align-self-center w-100 mb-1 text-nowrap">
             <router-link to="/CoronaStat" class="nav-link">Covid-19</router-link>
           </li>
+          <li class="nav-item btn btn-outline-success mx-1 align-self-center w-100 mb-1 text-nowrap">
+            <router-link to="/DynamicData" class="nav-link">Dynamic</router-link>
+          </li>
           <!-- <li class="nav-item dropdown btn btn-outline-success mx-1">
             <a
               class="nav-link dropdown-toggle"

src/router.js

@@ -3,6 +3,7 @@ import Home from './views/Home.vue'
 import About from './views/About.vue'
 import SickForm from './views/SickForm.vue'
 import CoronaStat from './views/CoronaStat.vue'
+import DynamicData from './views/DynamicData.vue'
 
 const routes = [
   {
@@ -24,7 +25,13 @@ const routes = [
     path: '/CoronaStat',
     name: 'CoronaStat',
     component: CoronaStat
+  },
+  {
+    path: '/DynamicData',
+    name: 'DynamicData',
+    component: DynamicData
   }
+
 ]
 
 const router = createRouter({

src/views/DynamicData.vue

+<template>
+ <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
+  <div class="container ">
+    <!-- <button v-on:click="getlCases(CoronaHisDeg.data['09271'].history)">Get Corona Data</button> -->
+    <div class="btn-group d-flex justify-content-around p-3 mx-5 mt-5">
+      <!-- <a
+        type="button"
+        class="tooltipx border-primary"
+        @mouseover="isHovering1 = true"
+        @mouseout="isHovering1 = false"
+        :class="{'border-bottom': isHovering1}"
+        @click="NewCasesHisBayern"
+      >
+        <span class="tooltiptextx">Bayern</span>
+        <i class="material-icons" style="color:#e63c54">lens</i>
+      </a>
+      <a
+        type="button"
+        class="tooltipx  border-primary"
+        @click="NewCasesHisDeggendorf"
+        @mouseover="isHovering2 = true"
+        @mouseout="isHovering2 = false"
+        :class="{ 'border-bottom': isHovering2 }"
+        ><span class="tooltiptextx">Deggendorf</span
+        ><i class="material-icons" style="color:#6f6f6e">lens</i>
+      </a> -->
+      </div>
+      <!-- Card body -->
+      <div class="card-body ">
+        <div class="chart">
+          <vue3-chart-js
+            :id="linechart.id"
+            :type="linechart.type"
+            ref="chartRef"
+            :data="linechart.data"
+            :options="linechart.options"
+          />
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+import Vue3ChartJs from '@j-t-mcc/vue3-chartjs'
+import zoomPlugin from 'chartjs-plugin-zoom'
+import dataLabels from 'chartjs-plugin-datalabels'
+import { onBeforeMount, ref } from 'vue'
+
+// globally registered and available for all charts
+Vue3ChartJs.registerGlobalPlugins([zoomPlugin])
+
+export default {
+  name: 'DynamicData',
+  components: {
+    Vue3ChartJs
+  },
+  setup () {
+    const chartRef = ref(0) // ref(0)
+    const connection = new WebSocket('ws://localhost:6868')
+    var samplePeriod = 0.300 // sample period of 300 ns depends on telemetry provider
+    var time = 0 // at start of Program set time to null
+    const linechart = {
+      id: 'line',
+      type: 'line',
+      // locally registered and available for this chart
+      plugins: [dataLabels],
+      data: {
+        labels: ['', '2', '3'],
+        datasets: [
+          {
+            label: 'Accerlometer X-axis',
+            data: [0, 0, 1],
+            borderColor: ['Blue'],
+            backgroundColor: 'Blue',
+            borderWidth: 2,
+            tension: 0.4
+          },
+          {
+            label: 'Accerlometer Y-axis',
+            data: [0, 0, 1],
+            borderColor: ['Green'],
+            backgroundColor: 'Green',
+            borderWidth: 2,
+            tension: 0.4
+          },
+          {
+            label: 'Accerlometer Z-axis',
+            data: [0, 0, 1],
+            borderColor: ['Red'],
+            backgroundColor: 'Red',
+            cubicInterpolationMode: 'monotone',
+            borderWidth: 2,
+            tension: 0.4
+          }
+
+        ]
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          zoom: {
+            zoom: {
+              wheel: {
+                enabled: true
+              },
+              pinch: {
+                enabled: true
+              },
+              mode: 'x'
+            },
+            pan: {
+              enabled: true,
+              mode: 'x'
+            }
+          },
+          datalabels: {
+            backgroundColor: function (context) {
+              return context.dataset.backgroundColor
+            },
+            borderRadius: 4,
+            color: 'white',
+            font: {
+              weight: 'bold'
+            },
+            formatter: Math.round,
+            padding: 6
+          }
+        },
+        scales: {
+          x: {
+            display: true,
+            titel: {
+              display: true,
+              text: 'Time in sec',
+              color: '#911',
+              font: {
+                family: 'Comic Sans MS',
+                size: 20,
+                weight: 'bold',
+                lineHeight: 1.2
+              },
+              padding: { top: 20, left: 0, right: 0, bottom: 0 }
+            },
+            min: 0,
+            max: 1000
+          }
+        }
+      }
+    }
+    onBeforeMount(async () => {
+      console.log('Starting connection to WebSocket Server')
+      connection.onopen = function (event) {
+        console.log(event)
+        console.log('Successfully connected to the echo websocket server...')
+      }
+      connection.onmessage = function (event) {
+        const data = JSON.parse(event.data)
+        const sensors = data.sensors
+        const x = sensors[0].value0
+        const y = sensors[0].value1
+        const z = sensors[0].value2
+        console.log(x)
+        linechart.data.datasets[0].data.push(x)
+        linechart.data.datasets[1].data.push(y)
+        linechart.data.datasets[2].data.push(z)
+        linechart.data.labels.push(Math.fround(time).toFixed(2))
+        time += samplePeriod
+        linechart.options.scales.x.max++
+        if (linechart.options.scales.x.max > 1200) {
+          linechart.options.scales.x.min++
+        }
+        chartRef.value.update()
+      }
+    })
+    return {
+      linechart,
+      chartRef
+    }
+  },
+  methods: {
+    sendMessage: function (message) {
+      console.log(this.connection)
+      this.connection.send(message)
+    }
+  },
+  data () {
+    return {
+      isHovering1: false,
+      isHovering2: false,
+      isHovering3: false,
+      isHovering4: false,
+      isHovering5: false,
+      isHovering6: false
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>