You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
5.3 KiB
172 lines
5.3 KiB
|
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<script src="chart.js"></script> |
|
<meta charset="UTF-8" /> |
|
<title>twister-stat</title> |
|
</head> |
|
<body> |
|
<canvas id="chart"></canvas> |
|
<script> |
|
|
|
const labels = []; |
|
|
|
labels.push('2013.11'); |
|
labels.push('2013.12'); |
|
labels.push('2014.1'); |
|
labels.push('2014.2'); |
|
labels.push('2014.3'); |
|
labels.push('2014.4'); |
|
labels.push('2014.5'); |
|
labels.push('2014.6'); |
|
labels.push('2014.7'); |
|
labels.push('2014.8'); |
|
labels.push('2014.9'); |
|
labels.push('2014.10'); |
|
labels.push('2014.11'); |
|
labels.push('2014.12'); |
|
labels.push('2015.1'); |
|
labels.push('2015.2'); |
|
labels.push('2015.3'); |
|
labels.push('2015.4'); |
|
labels.push('2015.5'); |
|
labels.push('2015.6'); |
|
labels.push('2015.7'); |
|
labels.push('2015.8'); |
|
labels.push('2015.9'); |
|
labels.push('2015.10'); |
|
labels.push('2015.11'); |
|
labels.push('2015.12'); |
|
labels.push('2016.1'); |
|
labels.push('2016.2'); |
|
labels.push('2016.3'); |
|
labels.push('2016.4'); |
|
labels.push('2016.5'); |
|
labels.push('2016.6'); |
|
labels.push('2016.7'); |
|
labels.push('2016.8'); |
|
labels.push('2016.9'); |
|
labels.push('2016.10'); |
|
labels.push('2016.11'); |
|
labels.push('2016.12'); |
|
labels.push('2017.1'); |
|
labels.push('2017.2'); |
|
labels.push('2017.3'); |
|
labels.push('2017.4'); |
|
labels.push('2017.5'); |
|
labels.push('2017.6'); |
|
labels.push('2017.7'); |
|
labels.push('2017.8'); |
|
labels.push('2017.9'); |
|
labels.push('2017.10'); |
|
labels.push('2017.11'); |
|
labels.push('2017.12'); |
|
labels.push('2018.1'); |
|
labels.push('2018.2'); |
|
labels.push('2018.3'); |
|
labels.push('2018.4'); |
|
labels.push('2018.5'); |
|
labels.push('2018.6'); |
|
labels.push('2018.7'); |
|
labels.push('2018.8'); |
|
labels.push('2018.9'); |
|
labels.push('2018.10'); |
|
labels.push('2018.11'); |
|
labels.push('2018.12'); |
|
labels.push('2019.1'); |
|
labels.push('2019.2'); |
|
labels.push('2019.3'); |
|
labels.push('2019.4'); |
|
labels.push('2019.5'); |
|
labels.push('2019.6'); |
|
labels.push('2019.7'); |
|
labels.push('2019.8'); |
|
labels.push('2019.9'); |
|
labels.push('2019.10'); |
|
labels.push('2019.11'); |
|
labels.push('2019.12'); |
|
labels.push('2020.1'); |
|
labels.push('2020.2'); |
|
labels.push('2020.3'); |
|
labels.push('2020.4'); |
|
labels.push('2020.5'); |
|
labels.push('2020.6'); |
|
labels.push('2020.7'); |
|
labels.push('2020.8'); |
|
labels.push('2020.9'); |
|
labels.push('2020.10'); |
|
labels.push('2020.11'); |
|
labels.push('2020.12'); |
|
labels.push('2021.1'); |
|
labels.push('2021.2'); |
|
labels.push('2021.3'); |
|
labels.push('2021.4'); |
|
labels.push('2021.5'); |
|
labels.push('2021.6'); |
|
labels.push('2021.7'); |
|
labels.push('2021.8'); |
|
labels.push('2021.9'); |
|
labels.push('2021.10'); |
|
labels.push('2021.11'); |
|
labels.push('2021.12'); |
|
|
|
const blocks = [9244,4322,8940,4368,4928,2160,5117,2920,5087,4548,4236,3921,4187,5088,2977,4062,4339,4470,4088,4243,4544,3569,4207,3632,4977,4320,3978,4280,4713,4402,3885,1412,4762,4966,3331,4370,4657,5023,4319,4238,4579,2806,3573,4315,4182,4366,4300,4369,4642,4284,4289,3719,4386,4544,4505,3994,4516,4583,4407,4400,4526,4491,3975,4664,4381,3460,4338,3917,4627,4400,2985,4041,4534,3763,4726,3378,4654,4289,4295,4811,4562,4393,4193,3937,4257,5273,4450,3880,3877,4854,4137,3902,4069,2787,4278,4523,4327,2846,]; |
|
const users = [12,537,34286,10633,2060,2019,1236,438,1482,5034,1859,967,2569,1218,5162,7424,1255,391,615,340,240,353,296,173,175,5573,240,196,166,154,94,895,530,69,72,81,63,79,67,60,51,71,50,70,101,45,57,124,62,42,50,38,86,39,55,34,38,40,517,243,31,23,22,23,13,14,10,28,15,19,7,45,14,17,12,14,10,11,10,4,15,3,1,1,8,30,29,8,6,5,5,8,1,,4,,2,3,]; |
|
|
|
const data = { |
|
labels: labels, |
|
datasets: [ |
|
{ |
|
label: 'blocks', |
|
data: blocks, |
|
borderColor: '#555', |
|
fill: true, |
|
scaleOverride : false, |
|
}, { |
|
label: 'users', |
|
data: users, |
|
borderColor: '#999', |
|
fill: true, |
|
scaleOverride : false, |
|
} |
|
] |
|
}; |
|
|
|
const config = { |
|
type: 'line', |
|
data: data, |
|
options: { |
|
responsive: true, |
|
plugins: { |
|
title: { |
|
display: true, |
|
text: "blocks: 420389 | users: 91397" |
|
}, |
|
}, |
|
interaction: { |
|
intersect: false, |
|
}, |
|
scales: { |
|
x: { |
|
display: true, |
|
title: { |
|
display: true |
|
} |
|
}, |
|
y: { |
|
display: true, |
|
title: { |
|
display: true, |
|
text: 'Quantity' |
|
} |
|
} |
|
} |
|
}, |
|
}; |
|
|
|
const twisterStat = new Chart(document.getElementById('chart'), config); |
|
|
|
</script> |
|
</body> |
|
</html>
|
|
|