fixed js chart referenced

app/assets/javascripts/chartDashboard.js

@@ -1,56 +1,66 @@
 (function (window) {
-    // Initialize flask-socketio
-    var socket = io();
-    var serviceId = chart.getAttribute('data-service-id');
 
-    socket.on('connect', function() {
-        socket.emit('fetch_daily_stats', serviceId);
-    });
-
-    socket.on('daily_stats_update', function(data) {
-        var labels = [];
-        var deliveredData = [];
-
-        for (var date in data) {
-            labels.push(date);
-            deliveredData.push(data[date].sms.delivered);
+    function initializeChartAndSocket() {
+        var ctx = document.getElementById('myChart');
+        if (!ctx) {
+            return;
         }
 
-        myBarChart.data.labels = labels;
-        myBarChart.data.datasets[0].data = deliveredData;
-        myBarChart.update();
-    });
-
-    socket.on('error', function(data) {
-        console.log('Error:', data);
-    });
-
-    sevenDaysButton.addEventListener('click', function() {
-        socket.emit('fetch_daily_stats', serviceId);
-    });
-
-    // Initialize Chart.js bar chart
-    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
+        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 = ctx.getAttribute('data-service-id');
+
+        socket.on('connect', function() {
+            socket.emit('fetch_daily_stats', serviceId);
+        });
+
+        socket.on('daily_stats_update', function(data) {
+            var labels = [];
+            var deliveredData = [];
+
+            for (var date in data) {
+                labels.push(date);
+                deliveredData.push(data[date].sms.delivered);
+            }
+
+            myBarChart.data.labels = labels;
+            myBarChart.data.datasets[0].data = deliveredData;
+            myBarChart.update();
+        });
+
+        socket.on('error', function(data) {
+            console.log('Error:', data);
+        });
+
+        var sevenDaysButton = document.getElementById('sevenDaysButton');
+        if (sevenDaysButton) {
+            sevenDaysButton.addEventListener('click', function() {
+                socket.emit('fetch_daily_stats', serviceId);
+            });
         }
-    });
+    }
+
+    document.addEventListener('DOMContentLoaded', initializeChartAndSocket);
 
 })(window);

app/templates/views/dashboard/dashboard.html

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