172 lines
5.6 KiB
JavaScript
172 lines
5.6 KiB
JavaScript
jQuery(document).ready(function($)
|
|
{
|
|
document.fonts.ready.then(function() {
|
|
Chart.defaults.font.family = "'Rubik', Helvetica";
|
|
Chart.defaults.color = "#000000";
|
|
|
|
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',
|
|
}]
|
|
},
|
|
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 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',
|
|
}]
|
|
},
|
|
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',
|
|
}]
|
|
},
|
|
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
|
|
}
|
|
});
|
|
});
|
|
}); |