jQuery(document).ready(function($) { // a n t i s p a m (hopefully) $('a.mail').on('click', function() { var href = $(this).attr('href'); var a1 = "hoo"; var a2 = "den" ; var a3 = "@"; var a4 = "marc"; var a5 = "ya"; var a6 = ".c"; var a7 = "hal"; var a8 = "om"; var a9 = "is_"; var goodMail = a2 + a9 + a4 + a7 + a3 + a5 + a1 + a6 + a8; $(this).attr('href', href.replace('badmail', goodMail + '?subject=[Ginou] Contact')); }); // photos stats fifties = {"none": 0, "bad": 0, "ok": 0, "good": 0}; sixties = {"none": 0, "bad": 0, "ok": 0, "good": 0}; seventies = {"none": 0, "bad": 0, "ok": 0, "good": 0}; eighties = {"none": 0, "bad": 0, "ok": 0, "good": 0}; nineties = {"none": 0, "bad": 0, "ok": 0, "good": 0}; zeroes = {"none": 0, "bad": 0, "ok": 0, "good": 0}; tens = {"none": 0, "bad": 0, "ok": 0, "good": 0}; $.getJSON("data.json", function(data) { function gatherYear(array, min, max) { if (i.year >= min && i.year <= max) { if (i.photo == "none") array.none++; if (i.photo == "bad") array.bad++; if (i.photo == "ok") array.ok++; if (i.photo == "good") array.good++; } } for (i of data) { gatherYear(fifties, 1950, 1959); gatherYear(sixties, 1960, 1969); gatherYear(seventies, 1970, 1979); gatherYear(eighties, 1980, 1989); gatherYear(nineties, 1990, 1999); gatherYear(zeroes, 2000, 2009); gatherYear(tens, 2010, 2020); } Chart.defaults.font.family = "'Rubik', Helvetica"; Chart.defaults.color = "#000000"; var canvasPhoto = document.getElementById("photo").getContext('2d'); var chartPhoto = new Chart(canvasPhoto, { type: 'bar', data: { labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"], datasets: [{ label: 'Pas de photo', backgroundColor: '#FB6962', data: [ fifties.none, sixties.none, seventies.none, eighties.none, nineties.none, zeroes.none, tens.none ] }, { label: 'Photo de mauvaise qualité', backgroundColor: '#FCFC99', data: [ fifties.bad, sixties.bad, seventies.bad, eighties.bad, nineties.bad, zeroes.bad, tens.bad ] }, { label: 'Photo de qualité acceptable', backgroundColor: '#79DE79', data: [ fifties.ok, sixties.ok, seventies.ok, eighties.ok, nineties.ok, zeroes.ok, tens.ok ] }, { label: 'Photo de bonne qualité', backgroundColor: '#0CC078', data: [ fifties.good, sixties.good, seventies.good, eighties.good, nineties.good, zeroes.good, tens.good ] }] }, options: { plugins: { tooltip: { mode: 'index', intersect: false, titleFont: { size: 14 }, bodyFont: { size: 14 }, }, legend: { display: false, position: "bottom", }, }, responsive: true, scales: { y: { ticks: { font: { size: 14 }, beginAtZero: true }, grid: { lineWidth: 0 }, title: { display: true, text: 'Tableaux', font: { size: 16 } }, stacked: true, }, x: { ticks: { font: { size: 14 }, }, grid: { lineWidth: 0 }, stacked: true, }, }, animation: { duration: 0 }, responsiveAnimationDuration: 0, }, }); }); });