connecting api data to socket and setting up chartjs to use the data

app/assets/javascripts/chartDashboard.js

@@ -1,24 +1,78 @@
 (function (window) {
 
-    const ctx = document.getElementById('myChart');
+    var socket = io();
+    var serviceId = chart.getAttribute('data-service-id');
 
-    new Chart(ctx, {
+    socket.on('connect', function() {
+        console.log('Connected to the server');  // Debug log, i'll delete later
+        socket.emit('fetch_daily_stats', serviceId);
+        socket.emit('fetch_single_month_notification_stats', serviceId);
+        socket.emit('fetch_monthly_stats_by_year', serviceId);
+    });
+
+    //this is for previous 7 days
+    socket.on('daily_stats_update', function(data) {
+        console.log('Received daily_stats_update:', data);
+        // Process the data
+        var labels = [];
+        var deliveredData = [];
+        // var failureData = [];
+        // var requestedData = [];
+
+        for (var date in data) {
+            labels.push(date);
+            deliveredData.push(data[date].sms.delivered);
+            // failureData.push(data[date].sms.failure);
+            // requestedData.push(data[date].sms.requested);
+        }
+
+        // Update Chart.js
+        myBarChart.data.labels = labels;
+        myBarChart.data.datasets[0].data = deliveredData;
+        myBarChart.update();
+    });
+    //this is for a single month
+    socket.on('single_month_notification_stats_update', function(data) {
+        console.log('Received single_month_notification_stats_update:', data);
+        // Update Chart.js with new data here
+    });
+    //this is for monthly stats by year
+    socket.on('monthly_stats_by_year_update', function(data) {
+        console.log('Received monthly_stats_by_year_update:', data);
+        // Update Chart.js with new data here
+    });
+
+    socket.on('error', function(data) {
+        console.log('Error:', data);
+    });
+
+    sevenDaysButton.addEventListener('click', function() {
+        socket.emit('fetch_monthly_stats_by_year', serviceId);
+        console.log('button click');  // Debug log, i'll delete later
+    });
+
+    // Initialize Chart.js bar chart
+    var ctx = document.getElementById('myChart').getContext('2d');
+    var myBarChart = new Chart(ctx, {
         type: 'bar',
         data: {
-        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-        datasets: [{
-            label: '# of Votes',
-            data: [12, 19, 3, 5, 2, 3],
-            borderWidth: 1
-        }]
+            labels: [], // Initialize with empty data
+            datasets: [
+                {
+                    label: 'Delivered',
+                    data: [],
+                    backgroundColor: '#0076d6',
+                    stack: 'Stack 0'
+                },
+            ]
         },
         options: {
-        scales: {
-            y: {
-            beginAtZero: true
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
             }
         }
-        }
     });
 
 })(window);