add different data for every client

address.json

@@ -1,7 +1,7 @@
 [ 
-    
+  [
     {
-        "ip": "18:36:F3:98:4F:9A" , 
+        "ip": "2001:0db8:85a3:0000:0000:8a2e:0370:7334" , 
         "date": "2018-12-25"
     },
     {
@@ -13,11 +13,11 @@
         "date":"2018-12-26"
     },
     {
-        "ip": "18:36:F3:98:4F:9A" , 
+        "ip": "2001:0db8:85a3:0000:0000:8a2e:0370:7334" , 
         "date": "2018-12-25"
     },
     {
-        "ip":"2a0a:e5c0:2:5:3106:3977:2f62:5c3c",
+        "ip":"2001:0db8:85a3:0000:0000:8a2e:0370:7334",
         "date":"2018-12-27"
     },
     {
@@ -40,6 +40,122 @@
         "ip":"2a0a:e5c0:2:2:400:c8ff:fe68:bed1" ,
         "date":"2018-12-30"
     },
+    {
+        "ip": "2001:0db8:85a3:0000:0000:8a2e:0370:7334" , 
+        "date": "2018-12-25"
+    },
+    {
+        "ip":"2a0a:e5c0:0:2:400:b3ff:fe39:7959",
+        "date":"2018-12-31"
+    },
+    {
+        "ip":"2a0a:e5c0:2:2:400:c8ff:fe68:bed1",
+        "date":"2018-01-01"
+    },
+    {
+        "ip": "2001:0db8:85a3:0000:0000:8a2e:0370:7334" , 
+        "date": "2018-01-01"
+    }
+  ],
+  [
+    {
+        "ip": "18:36:F3:98:4F:9A" , 
+        "date": "2018-12-25"
+    },
+    {
+        "ip": "2001:0db8:85a3:0000:0000:8a2e:0370:7334" , 
+        "date": "2018-12-25"
+    },
+    {
+        "ip":"2a0a:e5c0:2:2:400:c8ff:fe68:bed1" ,
+        "date":"2018-12-26"
+    },
+    {
+        "ip": "2001:0db8:85a3:0000:0000:8a2e:0370:7334" , 
+        "date": "2018-12-25"
+    },
+    {
+        "ip":"2a0a:e5c0:2:5:3106:3977:2f62:5c3c",
+        "date":"2018-12-27"
+    },
+    {
+        "ip":"2a0a:e5c0:0:2:400:b3ff:fe39:7959",
+        "date":"2018-12-28"
+    },
+    {
+        "ip": "2001:0db8:85a3:0000:0000:8a2e:0370:7334" , 
+        "date": "2018-12-25"
+    },
+    {
+        "ip":"2001:0db8:85a3:0000:0000:8a2e:0370:7334",
+        "date":"2018-01-01"
+    },
+    {
+        "ip": "2a0a:e5c0:2:2:400:c8ff:fe68:bed1" , 
+        "date": "2018-12-29"
+    },
+    {
+        "ip":"2001:0db8:85a3:0000:0000:8a2e:0370:7334" ,
+        "date":"2018-12-30"
+    },
+    {
+        "ip": "18:36:F3:98:4F:9A" , 
+        "date": "2018-12-25"
+    },
+    {
+        "ip":"2001:0db8:85a3:0000:0000:8a2e:0370:7334",
+        "date":"2018-12-31"
+    },
+    {
+        "ip":"2a0a:e5c0:2:2:400:c8ff:fe68:bed1",
+        "date":"2018-01-01"
+    },
+    {
+        "ip": "2001:0db8:85a3:0000:0000:8a2e:0370:7334" , 
+        "date": "2018-01-01"
+    } 
+  ], 
+  [
+    {
+        "ip": "2001:0db8:85a3:0000:0000:8a2e:0370:7334" , 
+        "date": "2018-12-25"
+    },
+    {
+        "ip": "2001:0db8:85a3:0000:0000:8a2e:0370:7334" , 
+        "date": "2018-12-25"
+    },
+    {
+        "ip":"2a0a:e5c0:2:2:400:c8ff:fe68:bed1" ,
+        "date":"2018-12-26"
+    },
+    {
+        "ip": "18:36:F3:98:4F:9A" , 
+        "date": "2018-12-25"
+    },
+    {
+        "ip":"2a0a:e5c0:2:5:3106:3977:2f62:5c3c",
+        "date":"2018-12-27"
+    },
+    {
+        "ip":"2001:0db8:85a3:0000:0000:8a2e:0370:7334",
+        "date":"2018-12-28"
+    },
+    {
+        "ip": "18:36:F3:98:4F:9A" , 
+        "date": "2018-12-25"
+    },
+    {
+        "ip":"2001:0db8:85a3:0000:0000:8a2e:0370:7334",
+        "date":"2018-01-01"
+    },
+    {
+        "ip": "2001:0db8:85a3:0000:0000:8a2e:0370:7334" , 
+        "date": "2018-12-29"
+    },
+    {
+        "ip":"2a0a:e5c0:2:2:400:c8ff:fe68:bed1" ,
+        "date":"2018-12-30"
+    },
     {
         "ip": "18:36:F3:98:4F:9A" , 
         "date": "2018-12-25"
@@ -53,9 +169,10 @@
         "date":"2018-01-01"
     },
     {
-        "ip": "2a0a:e5c0:0:2:400:b3ff:fe39:7959" , 
+        "ip": "2001:0db8:85a3:0000:0000:8a2e:0370:7334" , 
         "date": "2018-01-01"
     }
+  ]  
 ]
  		
 		

app.js

@@ -5,6 +5,18 @@ var addresses = []
 var date = []
 var ipv4_v6 = []
 
+//colors object for different graphs
+var chartColors = {
+    red: 'rgb(255, 99, 132)',
+    orange: 'rgb(255, 159, 64)',
+    yellow: 'rgb(255, 205, 86)',
+    green: 'rgb(75, 192, 192)',
+    blue: 'rgb(54, 162, 235)',
+    purple: 'rgb(153, 102, 255)',
+    grey: 'rgb(231,233,237)'
+};
+
+//test function for ip addresses 
 function Ip4OrIp6(ipAddress){
     if(ipAddress.length == 39){
         ipv4_v6.push(1);
@@ -26,52 +38,93 @@ function getData(){
 
 getData().then((data)=>{
     data.forEach(element => {
-        date.push(element.date);
+         date.push(element.date);
-        Ip4OrIp6(element.ip);
+    //     Ip4OrIp6(element.ip);
-    });
+    // });
     
-    console.log(date);
+    // console.log(date);
-    console.log(ipv4_v6);
+    // console.log(ipv4_v6);
     
     date.sort((a, b)=>{
         return new Date(a) - new Date(b)
     })
 
 
+    
     var ctx = document.getElementById("myChart").getContext('2d');
     var chart = new Chart(ctx, {
-        type: 'bar',
+        type: 'line',
         data: {
             labels:date ,
-            datasets: [{
+            datasets: [
-            label: "Statistics for IPV4 and IPV6",
+                {
-            data:ipv4_v6,
+                    label: "My First dataset",
-            }
+                    backgroundColor: chartColors.red,
-        ]
+                    borderColor: chartColors.red,
+                    data: [
+                      randomScalingFactor(),
+                      randomScalingFactor(),
+                      randomScalingFactor(),
+                      randomScalingFactor(),
+                      randomScalingFactor(),
+                      randomScalingFactor(),
+                      randomScalingFactor()
+                    ],
+                    fill: false,
+                  }, {
+                    label: "My Second dataset",
+                    fill: false,
+                    backgroundColor: chartColors.blue,
+                    borderColor: chartColors.blue,
+                    data: [
+                      randomScalingFactor(),
+                      randomScalingFactor(),
+                      randomScalingFactor(),
+                      randomScalingFactor(),
+                      randomScalingFactor(),
+                      randomScalingFactor(),
+                      randomScalingFactor()
+                    ],
+                  }
+            ]
         },
         options: {
         legend: { display: false },
         title: {
             display: true,
             text: 'Statistics for IPV4 and IPV6'
-        }
+        },
-        }
+        scales: {
-    }) 
+            xAxes: [{
-})
+              display: true,
-//Fetch call to get data from addresses json file
+              gridLines: {
-// async function retrieveIpAdresses(){
+                display: false ,
-//     await fetch('./address.json').then(response => {
+                color: "blue"
-//         response.json();
+              },
-//     }).then(data => {
+              scaleLabel: {
-//         data.forEach(element=>{
+                display: true,
-//             console.log(element)
+                labelString: 'Time',
-//             date.push(element.date)
+                
-//         })
+              }
-//     }).catch(err => {
+            }],
-//         err = err
+            yAxes: [{
-//     });
+              display: true,
-
+              gridLines: {
-// }
+                display: false ,
+                color: "blue"
+              },
+              scaleLabel: {
+                display: true,
+                labelString: 'Ipv4 or Ipv6',
+                
+              }
+            }]
+          }
+        } }
+)});
+      
+
+