diff --git a/data_visualization/js/visualizations.js b/data_visualization/js/visualizations.js
new file mode 100644
index 0000000..47f6a1d
--- /dev/null
+++ b/data_visualization/js/visualizations.js
@@ -0,0 +1,99 @@
+let metricChartInstance = null;
+let spikeChartInstance = null;
+
+function renderMetricCharts(metricReport) {
+  if (!metricReport || !metricReport.metrics || !Array.isArray(metricReport.metrics)) {
+    console.warn('renderMetricCharts: invalid metricReport');
+    return;
+  }
+
+  const ctxMetrics = document.getElementById('metricChart');
+  const ctxSpikes = document.getElementById('spikeChart');
+  if (!ctxMetrics || !ctxSpikes) {
+    console.error('Chart canvas elements not found');
+    return;
+  }
+
+  if (metricChartInstance) {
+    metricChartInstance.destroy();
+  }
+  if (spikeChartInstance) {
+    spikeChartInstance.destroy();
+  }
+
+  const labels = metricReport.metrics.map(m => m.name);
+  const dataValues = metricReport.metrics.map(m => m.value);
+
+  metricChartInstance = new Chart(ctxMetrics, {
+    type: 'bar',
+    data: {
+      labels: labels,
+      datasets: [{
+        label: 'Metrik-Werte',
+        data: dataValues,
+        backgroundColor: 'rgba(54, 162, 235, 0.6)',
+        borderColor: 'rgba(54, 162, 235, 1)',
+        borderWidth: 1
+      }]
+    },
+    options: {
+      responsive: true,
+      plugins: {
+        legend: { position: 'top' },
+        title: { display: true, text: 'Migrationsmetriken (nach Setup)' }
+      },
+      scales: {
+        y: { beginAtZero: true }
+      }
+    }
+  });
+
+  const spikeLabels = metricReport.spikes ? metricReport.spikes.map(s => s.timestamp) : [];
+  const spikeValues = metricReport.spikes ? metricReport.spikes.map(s => s.intensity) : [];
+  spikeChartInstance = new Chart(ctxSpikes, {
+    type: 'line',
+    data: {
+      labels: spikeLabels,
+      datasets: [{
+        label: 'Spike Intensität',
+        data: spikeValues,
+        borderColor: 'rgba(255, 99, 132, 1)',
+        backgroundColor: 'rgba(255, 99, 132, 0.3)',
+        tension: 0.3,
+        fill: true
+      }]
+    },
+    options: {
+      responsive: true,
+      plugins: {
+        legend: { position: 'top' },
+        title: { display: true, text: 'Migrationsspitzen über Zeit' }
+      },
+      scales: {
+        y: { beginAtZero: true }
+      }
+    }
+  });
+}
+
+function updateSummaryCards(metricReport) {
+  if (!metricReport || !metricReport.metrics || !Array.isArray(metricReport.metrics)) {
+    console.warn('updateSummaryCards: invalid metricReport');
+    return;
+  }
+
+  const avgValue = metricReport.metrics.reduce((acc, m) => acc + (m.value || 0), 0) / metricReport.metrics.length;
+  const maxValue = Math.max(...metricReport.metrics.map(m => m.value || 0));
+  const minValue = Math.min(...metricReport.metrics.map(m => m.value || 0));
+
+  const cardAvg = document.getElementById('card-average');
+  const cardMax = document.getElementById('card-max');
+  const cardMin = document.getElementById('card-min');
+
+  if (cardAvg) cardAvg.textContent = avgValue.toFixed(2);
+  if (cardMax) cardMax.textContent = maxValue.toFixed(2);
+  if (cardMin) cardMin.textContent = minValue.toFixed(2);
+}
+
+window.renderMetricCharts = renderMetricCharts;
+window.updateSummaryCards = updateSummaryCards;
\ No newline at end of file