add style folder

This commit is contained in:
rloukil 2018-12-26 13:29:13 +01:00
parent 4f04823a81
commit a7e0a3f19b
3 changed files with 33 additions and 14 deletions

44
app.js
View File

@ -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);
}
}
}]
});

View File

@ -11,10 +11,11 @@
<body>
<div class="container">
<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>

0
style/style.css Normal file
View File