rloukil/Ungleich
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add style folder

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

44
app.js
View file

@ -1,37 +1,55 @@
let labels = [] let addresses = []
let data = [] let date = []
let ipv4_v6 = []
//Fetch call to get data from addresses json file
fetch('./address.json').then(response => { fetch('./address.json').then(response => {
return response.json(); return response.json();
}).then(data => { }).then(data => {
data.sort(function(a,b){ data.sort(function(a,b){
console.log(a.date) return new Date(a.date) - new Date(b.date);
console.log(b.date)
return new Date(a.date) - new Date(b.date) ;
}); });
console.log(data); data.forEach(element => {
}).catch(err => { date.push(element.date)
})
}); }).catch(err => {
console.log(err);
});
console.log(date);
var ctx = document.getElementById("myChart").getContext('2d'); var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, { var myChart = new Chart(ctx, {
type: 'bar', type: 'bar',
data: { data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], labels:date,
datasets: [{ datasets: [{
label: '# of Votes', label: 'Ipv4 and Ipv6 routin protocols used ',
data: [1, -1, 1, -1, 1, -1], data: [1 , -1 ,1 , -1 ,1 , -1 ,1 , -1 ,1 , -1 ,1 , -1 ,1 , -1 ,1 ,1],
borderWidth: 1 borderWidth: 1
}] }]
}, },
options: { options: {
scales: { scales: {
yAxes: [{ yAxes: [{
ticks: { ticks: {
beginAtZero:true 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);
}
}
}]
}); });

3
index.htm
View file

@ -11,10 +11,11 @@
<body> <body>
<div class="container"> <div class="container">
<canvas id="myChart" width="400" height="400"></canvas> <canvas id="myChart" width="400" height="400"></canvas>
<script src="lodash.js"></script> <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/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> <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