diff --git a/app.js b/app.js index 7f26240..bf35697 100644 --- a/app.js +++ b/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); + } + } + }] }); diff --git a/index.htm b/index.htm index cba306c..efd8279 100644 --- a/index.htm +++ b/index.htm @@ -11,10 +11,11 @@
+ + - diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..e69de29