add style folder
This commit is contained in:
parent
4f04823a81
commit
a7e0a3f19b
3 changed files with 33 additions and 14 deletions
42
app.js
42
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) ;
|
||||
});
|
||||
console.log(data);
|
||||
}).catch(err => {
|
||||
|
||||
return new Date(a.date) - new Date(b.date);
|
||||
});
|
||||
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);
|
||||
}
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
|
|
@ -13,8 +13,9 @@
|
|||
|
||||
|
||||
|
||||
<canvas id="myChart" width="400" height="400"></canvas>
|
||||
|
||||
|
||||
<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
0
style/style.css
Normal file
Loading…
Reference in a new issue