keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

Update Chart.js and change style for a more fitting one

Browse Source
This commit is contained in:
Théo Marchal
2022-08-09 23:35:46 +02:00
parent 302f51dcb3
commit 9ca53a4176
7 changed files with 221 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
scripts/stats.js
View File

@ -1,128 +1,172 @@
jQuery(document).ready(function($)
{
var canvasMonth = document.getElementById("month").getContext('2d');
var chartMonth = new Chart(canvasMonth, {
type: 'bar',
data: {
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
datasets: [{
label: 'nombre de tableaux',
data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
backgroundColor: '#2589BD',
borderColor: '#187795',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}, gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Tableaux'
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
},
legend: {
display: false
},
animation: {
duration: 0
},
responsiveAnimationDuration: 0
}
});
document.fonts.ready.then(function() {
Chart.defaults.font.family = "'Rubik', Helvetica";
Chart.defaults.color = "#000000";
var canvasYear = document.getElementById("year").getContext('2d');
var chartYear = new Chart(canvasYear, {
type: 'bar',
data: {
labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
datasets: [{
label: 'nombre de tableaux',
data: [24, 16, 7, 57, 117, 112, 52],
backgroundColor: '#2589BD',
borderColor: '#187795',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}, gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Tableaux'
}
}],
xAxes: [{
gridLines: {
display: false
}
var canvasMonth = document.getElementById("month").getContext('2d');
var chartMonth = new Chart(canvasMonth, {
type: 'bar',
data: {
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
datasets: [{
label: 'nombre de tableaux',
data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
backgroundColor: '#2589BD',
}]
},
legend: {
display: false
},
animation: {
duration: 0
},
responsiveAnimationDuration: 0
}
});
options: {
plugins: {
tooltip: {
mode: 'index',
intersect: false,
titleFont: {
size: 13
},
bodyFont: {
size: 13
},
},
legend: {
display: false,
position: "bottom",
},
},
scales: {
y: {
ticks: {
beginAtZero: true
},
grid: {
lineWidth: 0
},
title: {
display: true,
text: 'Tableaux'
}
},
xAxes: {
grid: {
lineWidth: 0
},
}
},
animation: {
duration: 0
},
responsiveAnimationDuration: 0
}
});
var canvasDimension = document.getElementById("dimension").getContext('2d');
var chartDimension = new Chart(canvasDimension, {
type: 'bar',
data: {
labels: ["Histoire", "Nature morte", "Paysage", "Portrait", "Scène"],
datasets: [{
label: 'nombre de tableaux',
data: [2, 42, 173, 59, 107],
backgroundColor: '#2589BD',
borderColor: '#187795',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}, gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Tableaux'
}
}],
xAxes: [{
gridLines: {
display: false
}
var canvasYear = document.getElementById("year").getContext('2d');
var chartYear = new Chart(canvasYear, {
type: 'bar',
data: {
labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
datasets: [{
label: 'nombre de tableaux',
data: [24, 16, 7, 57, 117, 112, 52],
backgroundColor: '#2589BD',
}]
},
legend: {
display: false
options: {
plugins: {
tooltip: {
mode: 'index',
intersect: false,
titleFont: {
size: 13
},
bodyFont: {
size: 13
},
},
legend: {
display: false,
position: "bottom",
},
},
scales: {
y: {
ticks: {
beginAtZero: true
},
grid: {
lineWidth: 0
},
title: {
display: true,
text: 'Tableaux'
}
},
x: {
grid: {
lineWidth: 0
},
}
},
animation: {
duration: 0
},
responsiveAnimationDuration: 0
}
});
var canvasDimension = document.getElementById("dimension").getContext('2d');
var chartDimension = new Chart(canvasDimension, {
type: 'bar',
data: {
labels: ["Histoire", "Nature morte", "Paysage", "Portrait", "Scène"],
datasets: [{
label: 'nombre de tableaux',
data: [2, 42, 173, 59, 107],
backgroundColor: '#2589BD',
}]
},
animation: {
duration: 0
},
responsiveAnimationDuration: 0
}
options: {
plugins: {
tooltip: {
mode: 'index',
intersect: false,
titleFont: {
size: 13
},
bodyFont: {
size: 13
},
},
legend: {
display: false,
position: "bottom",
},
},
responsive: true,
scales: {
y: {
ticks: {
beginAtZero: true
},
grid: {
lineWidth: 0
},
title: {
display: true,
text: 'Tableaux'
},
stacked: true,
},
x: {
grid: {
lineWidth: 0
},
stacked: true,
}
},
animation: {
duration: 0
},
responsiveAnimationDuration: 0
}
});
});
});