stats.js (2237B)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | const ALPHA_RANGE = {
min: 0.08,
max: 1
}
const chart_colors = chart => {
const range = ALPHA_RANGE;
const N = chart.data.datasets[0].data.length;
backgrounds = Array(N);
for (let mono = range.min; mono <= range.max; mono += range.max / (N + 1))
backgrounds[Math.round((mono - range.min) * N / range.max)] = `rgba(${BASE},${mono})`;
chart.data.datasets[0].backgroundColor = backgrounds;
return backgrounds;
};
const chart_empty = chart => {
chart.data.labels = [];
chart.data.datasets[0].data = [];
};
const push_data = (chart, label, data) => {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
}
$(document).ready(() => {
$('.home').click(() => {
window.location.href = '/';
})
for (const canvas of ['#pie', '#bar']) {
const context = $(canvas)[0];
const dimension = $(canvas).closest('div').innerWidth() - 22;
context.height = dimension;
context.width = dimension;
}
});
// CHARTS:
let pie;
let bar; // Make sure they're global.
$(document).ready(() => {
const pie_context = $('#pie');
pie = new Chart(pie_context[0], {
type: 'pie',
data: {
labels: [],
datasets: [{
label: '№ of Votes',
data: [],
backgroundColor: [],
}]
},
options: {}
});
const bar_context = $('#bar')
bar = new Chart(bar_context[0], {
type: 'horizontalBar',
data: {
labels: [],
datasets: [{
label: '№ of Votes',
data: [],
backgroundColor: `rgba(${BASE}, 0.05)`,
}]
},
options: {
title: {
display: true,
color: '#fff',
text: 'Distribution of alternative/other votes.'
},
scales: {
yAxes: [{
gridLines: {
color: `rgba(${BASE}, 0.1)`,
},
categoryPercentage: 0.9,
barPercentage: 1.0,
ticks: {
mirror: true,
padding: -10,
}
}],
xAxes: [{
gridLines: {
color: `rgba(${BASE}, 0.1)`,
},
ticks: {
stepSize: 1
}
}]
},
legend: {
display: false,
}
}
});
});
|