add style folder

app.js

@@ -1,37 +1,55 @@
-let labels = []
-let data = []
+let addresses = []
+let date = []
+let ipv4_v6 = []
+
+//Fetch call to get data from addresses json file
 fetch('./address.json').then(response => {
     return response.json();
   }).then(data => {
     data.sort(function(a,b){
-        console.log(a.date)
-        console.log(b.date)
-        return new Date(a.date) - new Date(b.date) ;
+        return new Date(a.date) - new Date(b.date);
     });
-    console.log(data);
-  }).catch(err => {
-    
-  });
+    data.forEach(element => {
+        date.push(element.date)
+    })
+}).catch(err => {
+    console.log(err);
+});
+console.log(date);
 
 var ctx = document.getElementById("myChart").getContext('2d');
 var myChart = new Chart(ctx, {
     type: 'bar',
     data: {
-        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+        labels:date,
         datasets: [{
-            label: '# of Votes',
-            data: [1, -1, 1, -1, 1, -1],
+            label: 'Ipv4 and Ipv6 routin protocols used ',
+            data: [1 , -1 ,1 , -1 ,1 , -1 ,1 , -1 ,1 , -1 ,1 , -1 ,1 , -1 ,1 ,1],
             borderWidth: 1
         }]
     },
     options: {
         
         scales: {
+            
             yAxes: [{
                 ticks: {
                     beginAtZero:true
                 }
             }]
         }
-    }
+    },
+    plugins: [{
+        beforeInit: function(chart) {
+           var time = chart.options.scales.xAxes[0].time, // 'time' object reference
+              // difference (in days) between min and max date
+              timeDiff = moment(time.max).diff(moment(time.min), 'd');
+           // populate 'labels' array
+           // (create a date string for each date between min and max, inclusive)
+           for (i = 0; i <= timeDiff; i++) {
+              var _label = moment(time.min).add(i, 'd').format('YYYY-MM-DD HH:mm:ss');
+              chart.data.labels.push(_label);
+           }
+        }
+     }]
 });

index.htm

@@ -13,8 +13,9 @@
 
         
 
-        <canvas id="myChart" width="400" height="400"></canvas>
 
+
+        <canvas id="myChart" width="400" height="400"></canvas>
         <script src="lodash.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>