add style folder
This commit is contained in:
parent
4f04823a81
commit
a7e0a3f19b
3 changed files with 33 additions and 14 deletions
36
app.js
36
app.js
|
@ -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)
|
|
||||||
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);
|
data.forEach(element => {
|
||||||
|
date.push(element.date)
|
||||||
|
})
|
||||||
}).catch(err => {
|
}).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);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
});
|
});
|
||||||
|
|
|
@ -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="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
0
style/style.css
Normal file
Loading…
Reference in a new issue