fixed js chart referenced

app/assets/javascripts/chartDashboard.js

@@ -1,7 +1,35 @@
 (function (window) {
-    // Initialize flask-socketio
+
+    function initializeChartAndSocket() {
+        var ctx = document.getElementById('myChart');
+        if (!ctx) {
+            return;
+        }
+
+        var myBarChart = new Chart(ctx.getContext('2d'), {
+            type: 'bar',
+            data: {
+                labels: [],
+                datasets: [
+                    {
+                        label: 'Delivered',
+                        data: [],
+                        backgroundColor: '#0076d6',
+                        stack: 'Stack 0'
+                    },
+                ]
+            },
+            options: {
+                scales: {
+                    y: {
+                        beginAtZero: true
+                    }
+                }
+            }
+        });
+
         var socket = io();
-    var serviceId = chart.getAttribute('data-service-id');
+        var serviceId = ctx.getAttribute('data-service-id');
 
         socket.on('connect', function() {
             socket.emit('fetch_daily_stats', serviceId);
@@ -25,32 +53,14 @@
             console.log('Error:', data);
         });
 
+        var sevenDaysButton = document.getElementById('sevenDaysButton');
+        if (sevenDaysButton) {
             sevenDaysButton.addEventListener('click', function() {
                 socket.emit('fetch_daily_stats', serviceId);
             });
+        }
+    }
 
-    // Initialize Chart.js bar chart
+    document.addEventListener('DOMContentLoaded', initializeChartAndSocket);
-    var ctx = document.getElementById('myChart').getContext('2d');
-    var myBarChart = new Chart(ctx, {
-        type: 'bar',
-        data: {
-            labels: [],
-            datasets: [
-                {
-                    label: 'Delivered',
-                    data: [],
-                    backgroundColor: '#0076d6',
-                    stack: 'Stack 0'
-                },
-            ]
-        },
-        options: {
-            scales: {
-                y: {
-                    beginAtZero: true
-                }
-            }
-        }
-    });
 
 })(window);

app/templates/views/dashboard/dashboard.html

@@ -23,8 +23,7 @@
     </h2>
 
     <button id="sevenDaysButton">7 Days</button>
-    <canvas id="myChart" ></canvas>
+    <canvas id="myChart" data-service-id="{{ service_id }}"></canvas>
-    <div id="chart" data-service-id="{{ service_id }}"></div>
     {{ ajax_block(partials, updates_url, 'inbox') }}
 
     {{ ajax_block(partials, updates_url, 'totals') }}