diff --git a/address.json b/address.json index b5fd37e..a9574d6 100644 --- a/address.json +++ b/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" } + ] ] diff --git a/app.js b/app.js index a2c0149..c49ea4f 100644 --- a/app.js +++ b/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); - Ip4OrIp6(element.ip); - }); + date.push(element.date); + // Ip4OrIp6(element.ip); + // }); - console.log(date); - console.log(ipv4_v6); + // console.log(date); + // 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: [{ - label: "Statistics for IPV4 and IPV6", - data:ipv4_v6, - } - ] + datasets: [ + { + 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' - } - } - }) -}) -//Fetch call to get data from addresses json file -// async function retrieveIpAdresses(){ -// await fetch('./address.json').then(response => { -// response.json(); -// }).then(data => { -// data.forEach(element=>{ -// console.log(element) -// date.push(element.date) -// }) -// }).catch(err => { -// err = err -// }); - -// } + }, + scales: { + xAxes: [{ + display: true, + gridLines: { + display: false , + color: "blue" + }, + scaleLabel: { + display: true, + labelString: 'Time', + + } + }], + yAxes: [{ + display: true, + gridLines: { + display: false , + color: "blue" + }, + scaleLabel: { + display: true, + labelString: 'Ipv4 or Ipv6', + + } + }] + } + } } +)}); + + +