.ContenitoreHD, .GraficoHD {
width: 1200px;
height: 600px;
background: rgba(255, 255, 255, 1);
}
.ContenitorePieHD, .GraficoPieHD {
width: 600px;
height: 600px;
background: rgba(255, 255, 255, 1);
}
.bottone {
margin: 15px 25px 15px 5px;
}
Elenco dei grafici per il personale GARR
- Composizione di genere
- Età
- Settore di attività
- Attività tecnica
- Tipo di contratto
- Retribuzione
Scegli
Composizione di genere
Età
Settore di attività
Attività tecnica
Tipo di contratto
Retribuzione
Composizione di genere
Il grafico mostra la composizione del personale GARR per genere.
Seleziona l'anno:
2021
2020
2019
2018
2017
Salva immagine
Età del personale
Il grafico mostra la composizione del personale GARR per fasce di età.
Seleziona l'anno:
2021
2020
2019
2018
2017
2016
Salva immagine
Settore di attività
Il grafico mostra la ripartizione del personale per attività svolta. Le attività tecniche sono legate alla mission istituzionale. Le attività amministrative sono svolte nei settori di amministrazione, segreteria, formazione, comunicazione, web e multimedia. L'attività di ricerca e sviluppo coinvolge in maniera trasversale tutto il personale GARR.
Seleziona l'anno:
2021
2020
2019
2018
Salva immagine
Attività tecnica
Il grafico mostra il dettaglio delle attività tecniche svolte dal personale GARR.
Seleziona l'anno:
2021
2020
2019
2018
Salva immagine
Tipologia di contratto
Il grafico mostra la suddivisione del personale per tipologia di contratto.
Seleziona l'anno:
2021
2020
2019
2018
Salva immagine
Retribuzione lorda annua
Il grafico mostra la distribuzione della retribuzione lorda annua dei dipendenti.
Seleziona l'anno:
2021
2020
2019
2018
2017
Salva immagine
Continua a leggere
Servizi applicativi
Comunicazione
Le informazioni contenute in questo documento sono tratte dal "Bilancio Consuntivo 2021" e dalla Relazione sull'attività svolta e risultati conseguiti 2021 approvati dall'Assemblea dei soci GARR a maggio 2022.
pdf
Scarica l'annual report 2021(22.72 MB)
Tutti gli annual report
var numeroScheda="";
var SpazioDestra = 30;
var TitoloFont = 'Raleway';
var TitoloFontSize = 15;
var TitoloVisualizza = true;
var TitoloAllinea = 'end'; // start center end
var TitoloPadding = 20;
var TitoloColore = '#1d5b37';
var TitoloStile = 'normal'; // normal italic oblique initial inherit
var ArrayColore = ["rgba(0, 29, 111, 0.6)", "rgba(0, 111, 62, 0.6)", "rgba(197, 26, 26, 0.6)", "rgba(224, 155, 38, 0.6)", "rgba(111, 0, 86, 0.6)", "rgba(228, 88, 19, 0.6)", "rgba(71, 0, 11, 0.6)"];
var ArrayColoreBordo = ["rgba(0, 29, 111, 1)", "rgba(0, 111, 62, 1)", "rgba(111, 0, 0, 1)", "rgba(224, 155, 38, 1)", "rgba(111, 0, 86, 1)", "rgba(228, 88, 19, 1)", "rgba(71, 0, 11, 1)"];
var ArrayColoreSfondo = ["rgba(0, 29, 111, 0.1)", "rgba(0, 111, 62, 0.1)", "rgba(197, 26, 26, 0.1)", "rgba(224, 155, 38, 0.1)", "rgba(111, 0, 86, 0.1)", "rgba(228, 88, 19, 0.1)", "rgba(71, 0, 11, 0.1)"];
var Bianco = '#FFFFFF';
var Nero = '#000000';
var Grigio = '#a3a3a3';
var BordoSpessore = 1;
var AssiFont = 'Varela Round';
var AssiFontSize = 13;
var AssiVisualizza = 'true';
var AssiAllinea = 'center';
var AssiPadding = 10;
var AssiColore = '#1d5b37';
var AssiStile = 'normal';
var LabelFont = 'Varela Round';
var LabelFontSize = 13;
var LabelColore = '#1d5b37';
var LabelStile = 'normal';
var TooltipFont = 'Varela Round';
var TooltipFontSize = 13;
var TooltipColore = 'rgba(255,255,255,1)';
var TooltipSfondo = 'rgba(0,0,0,1)';
var TicksFont = 'Varela Round';
var TicksFontSize = 13;
var TicksColore = '#1d5b37';
var TicksStile = 'normal';
var sfondoImmagine = 'rgba(255,255,255,1)';
var legendaImmagine = 'right';
//if (document.getElementById("contenuto-principale").offsetWidth {
chart.getDatasetMeta(i).data.forEach((datapoint, index) => {
const datapoints = chart.data.datasets[i].data;
function Totale(total, datapoint) {
return Number(total) + Number(datapoint)
}
const sommaTotale = datapoints.reduce(Totale);
const postSommaTotale = sommaTotale.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
const valorePercentuale = (chart.data.datasets[i].data[index] / sommaTotale * 100).toFixed(1);
const {x, y} = datapoint.tooltipPosition();
var cosaMisura = chart.config.options.plugins.Contatore.cosaMisura;
let primoValore = chart.data.datasets[i].data.indexOf(chart.data.datasets[i].data[index]);
if (primoValore == 0) {
const {ctx, chartArea : {top, right, bottom, left, width, height} } = chart;
ctx.save();
ctx.font = TitoloFont;
ctx.textAlign = 'center';
ctx.fillStyle = Nero;
ctx.fontSize = 30;
ctx.fillText('Totale ' + cosaMisura + ':', left + (width / 2), top + (height /2) - 11);
ctx.fillText(postSommaTotale, left + (width / 2), top + (height /2) + 11);
ctx.restore();
}
})
})
}
};
const sfondoBianco = {
id: 'sfondoBianco',
beforeDraw: (chart) => {
const ctx = chart.canvas.getContext('2d');
ctx.save();
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = sfondoImmagine;
ctx.fillRect(0, 0, chart.width, chart.height);
ctx.restore();
}
};
const mostraEtichettePie = {
id: 'mostraEtichettePie',
afterDraw(chart, args, options) {
const {ctx} = chart;
ctx.save();
chart.data.datasets.forEach((dataset, i) => {
chart.getDatasetMeta(i).data.forEach((datapoint, index) => {
const datapoints = chart.data.datasets[i].data;
function Totale(total, datapoint) {
return Number(total) + Number(datapoint)
}
const sommaTotale = datapoints.reduce(Totale);
const postSommaTotale = sommaTotale.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
const valorePercentuale = (chart.data.datasets[i].data[index] / sommaTotale * 100).toFixed(1);
const assoluto = chart.data.datasets[i].data[index];
const postAssoluto = assoluto.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
const percentuale = valorePercentuale.toString().replace(".", ",") + '%';
const assolutoWidth = ctx.measureText(postAssoluto).width;
const percentualeWidth = ctx.measureText(percentuale).width;
if (assolutoWidth >= percentualeWidth) {
var maggiore = assolutoWidth;
} else {var maggiore = percentualeWidth;}
const {x, y} = datapoint.tooltipPosition();
const textWidth = maggiore;
if (!(chart.data.datasets[i].data[index] == 0) && (chart.getDataVisibility(index) == true)) {
ctx.fillStyle = TooltipSfondo;
ctx.fillRect(x - ((textWidth + 10) /2), y - 42, textWidth + 10, 37);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x - 5, y - 5);
ctx.lineTo(x + 5, y - 5);
ctx.fill();
ctx.restore();
ctx.font = TooltipFont;
ctx.fontSize = TooltipFontSize;
ctx.fillStyle = TooltipColore;
ctx.fillText(postAssoluto, x - (textWidth / 2), y - 28);
ctx.fillText(percentuale, x - (textWidth / 2), y - 11);
ctx.restore();
}
})
})
}
};
const mostraEtichette = {
id: 'mostraEtichette',
afterDraw(chart, args, options) {
const {ctx} = chart;
ctx.save();
chart.data.datasets.forEach((dataset, i) => {
chart.getDatasetMeta(i).data.forEach((datapoint, index) => {
const {x, y} = datapoint.tooltipPosition();
// per il testo completo
// const text = chart.data.labels[index] + ': ' + chart.data.datasets[i].data[index];
const preText = chart.data.datasets[i].data[index];
const text = preText.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
const textWidth = ctx.measureText(text).width;
ctx.fillStyle = TooltipSfondo;
ctx.fillRect(x - ((textWidth + 10) /2), y - 25, textWidth + 10, 20);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x - 5, y - 5);
ctx.lineTo(x + 5, y - 5);
ctx.fill();
ctx.restore();
ctx.font = TooltipFont;
ctx.fontSize = TooltipFontSize;
ctx.fillStyle = TooltipColore;
ctx.fillText(text, x - (textWidth / 2), y - 14);
ctx.restore();
})
})
}
};
const mostraEtichetteStacked = {
id: 'mostraEtichetteStacked',
afterDraw(chart, args, options) {
const {ctx} = chart;
ctx.save();
chart.data.datasets.forEach((dataset, i) => {
chart.getDatasetMeta(i).data.forEach((datapoint, index) => {
const {x, y} = datapoint.tooltipPosition();
// per il testo completo
// const text = chart.data.labels[index] + ': ' + chart.data.datasets[i].data[index];
const preText = chart.data.datasets[i].data[index];
const text = preText.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
const textWidth = ctx.measureText(text).width;
ctx.fillStyle = TooltipSfondo;
ctx.fillRect(x - ((textWidth + 10) /2), y - 5, textWidth + 10, 20);
ctx.beginPath();
ctx.moveTo(x, y+20);
ctx.lineTo(x - 5, y + 15);
ctx.lineTo(x + 5, y + 15);
ctx.fill();
ctx.restore();
ctx.font = TooltipFont;
ctx.fontSize = TooltipFontSize;
ctx.fillStyle = TooltipColore;
ctx.fillText(text, x - (textWidth / 2), y+6);
ctx.restore();
})
})
}
};
const mostraEtichetteSopra = {
id: 'mostraEtichetteSopra',
afterDraw(chart, args, options) {
const {ctx} = chart;
ctx.save();
chart.data.datasets.forEach((dataset, i) => {
chart.getDatasetMeta(i).data.forEach((datapoint, index) => {
const {x, y} = datapoint.tooltipPosition();
// per il testo completo
// const text = chart.data.labels[index] + ': ' + chart.data.datasets[i].data[index];
const preText = chart.data.datasets[i].data[index];
const text = preText.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
const textWidth = ctx.measureText(text).width;
if (!(chart.data.datasets[i].data[index] == 0) && (chart.getDataVisibility(index) == true)) {
ctx.fillStyle = TooltipSfondo;
ctx.fillRect(x - ((textWidth + 10) /2), y - 30, textWidth + 10, 20);
ctx.beginPath();
ctx.moveTo(x, y - 5);
ctx.lineTo(x - 5, y - 10);
ctx.lineTo(x + 5, y - 10);
ctx.fill();
ctx.restore();
ctx.font = TooltipFont;
ctx.fontSize = TooltipFontSize;
ctx.fillStyle = TooltipColore;
ctx.fillText(text, x - (textWidth / 2), y-19);
ctx.restore();
}
})
})
}
};
const logo = new Image();
logo.src = 'https://www.garr.it/images/logo-garr-grafici.png';
const LogoGARR = {
id: 'LogoGARR',
beforeDraw(chart, args, options) {
const {ctx, chartArea: { top, bottom, left, right} } = chart;
const logoWidth = 100;
const logoHeight = 34;
ctx.save();
if ((logo.complete) && (ctx.canvas.offsetWidth > 640)) {
ctx.drawImage(logo, ctx.canvas.offsetWidth - (logoWidth + 10), ctx.canvas.offsetHeight - (logoHeight + 10), logoWidth, logoHeight);
} else {
logo.onload = () => chart.draw();
};
ctx.restore();
}
}
const PersonaleGenereData = {
labels: ['Uomini', 'Donne'],
datasets: [{
label: '2021',
data: [53, 25],
backgroundColor: ArrayColore,
borderColor: Bianco,
hoverBorderColor: Bianco,
spacing: 10,
hoverOffset: 4,
borderRadius: 6,
borderWidth: 3
}]
};
const optionsPGG = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Personale GARR: composizione di genere',
display: TitoloVisualizza,
align: TitoloAllinea,
padding: TitoloPadding,
color: TitoloColore,
font: {
family: TitoloFont,
size: TitoloFontSize,
style: TitoloStile,
}
},
tooltip: {
enabled: false
},
legend: {
display: true,
/*position: posizioneLegenda,*/
labels: {
color: LabelColore,
font: {
family: LabelFont,
size: LabelFontSize,
style: LabelStile
}
}
},
Contatore: {
cosaMisura: 'lavoratori',
}
}
}
const PersonaleGenereConfig = {
type: 'doughnut',
data: PersonaleGenereData,
options: optionsPGG,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const PersonaleGenereGrafico = new Chart(
document.getElementById('PersonaleGenere'),
PersonaleGenereConfig
);
const optionsPGGHD = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Personale GARR: composizione di genere',
display: TitoloVisualizza,
align: TitoloAllinea,
padding: TitoloPadding,
color: TitoloColore,
font: {
family: TitoloFont,
size: TitoloFontSize,
style: TitoloStile,
}
},
tooltip: {
enabled: false
},
legend: {
display: true,
position: legendaImmagine,
labels: {
color: LabelColore,
font: {
family: LabelFont,
size: LabelFontSize,
style: LabelStile
}
}
},
Contatore: {
cosaMisura: 'lavoratori',
}
},
animation: {
onComplete: function() {
var annoSelect = document.getElementById('selectPGG');
var annoSelezionato = annoSelect.options[annoSelect.selectedIndex].text;
var CanvasTemp = PersonaleGenereGraficoHD;
var a = document.getElementById('PersonaleGenere_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'genere-personale-GARR-'+annoSelezionato+'.png';
}
}
}
const PersonaleGenereConfigHD = {
type: 'doughnut',
data: PersonaleGenereData,
options: optionsPGGHD,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const PersonaleGenereGraficoHD = new Chart(
document.getElementById('PersonaleGenereHD'),
PersonaleGenereConfigHD
);
const PersonaleEtaData = {
labels: ['< 25', '25-30', '31-35', '36-40', '41-45', '46-50', '> 50'],
datasets: [{
label: 'Numero di lavoratori',
data: [2, 11, 3, 9, 18, 19, 16],
backgroundColor: ArrayColore[5],
borderColor: ArrayColoreBordo[5],
borderWidth: BordoSpessore
}]
};
const optionsPGE = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Età del personale GARR',
display: TitoloVisualizza,
align: TitoloAllinea,
padding: TitoloPadding,
color: TitoloColore,
font: {
family: TitoloFont,
size: TitoloFontSize,
style: TitoloStile,
}
},
tooltip: {
enabled: false
},
legend: {
display: true,
position: 'bottom',
labels: {
color: LabelColore,
font: {
family: LabelFont,
size: LabelFontSize,
style: LabelStile
}
}
}
},
scales: {
x: {
beginAtZero: false,
title: {
text: 'Età',
display: AssiVisualizza,
align: AssiAllinea,
padding: AssiPadding,
color: AssiColore,
font: {
family: AssiFont,
size: AssiFontSize,
style: AssiStile,
}
},
ticks: {
color: TicksColore,
font: {
family: TicksFont,
size: TicksFontSize,
style: TicksStile
}
}
},
y: {
beginAtZero: true,
title: {
text: 'Lavoratori',
display: AssiVisualizza,
align: AssiAllinea,
padding: AssiPadding,
color: AssiColore,
font: {
family: AssiFont,
size: AssiFontSize,
style: AssiStile,
}
},
ticks: {
color: TicksColore,
font: {
family: TicksFont,
size: TicksFontSize,
style: TicksStile
}
}
}
},
animation: {
onComplete: function() {
var annoSelect = document.getElementById('selectPGE');
var annoSelezionato = annoSelect.options[annoSelect.selectedIndex].text;
var CanvasTemp = PersonaleEtaGraficoHD;
var a = document.getElementById('PersonaleEta_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'eta-personale-GARR-'+annoSelezionato+'.png';
}
}
}
const PersonaleEtaConfig = {
type: 'bar',
data: PersonaleEtaData,
options: optionsPGE,
plugins: [mostraEtichette, sfondoBianco, LogoGARR]
};
const PersonaleEtaGrafico = new Chart(
document.getElementById('PersonaleEta'),
PersonaleEtaConfig
);
const PersonaleEtaGraficoHD = new Chart(
document.getElementById('PersonaleEtaHD'),
PersonaleEtaConfig
);
const PersonaleSettoreData = {
labels: ['Tecnici', 'Amministrazione'],
datasets: [{
label: '2021',
data: [54, 24],
backgroundColor: ArrayColore,
borderColor: Bianco,
hoverBorderColor: Bianco,
spacing: 10,
hoverOffset: 4,
borderRadius: 6,
borderWidth: 3
}]
};
const optionsPGS = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Personale GARR: settore di attività',
display: TitoloVisualizza,
align: TitoloAllinea,
padding: TitoloPadding,
color: TitoloColore,
font: {
family: TitoloFont,
size: TitoloFontSize,
style: TitoloStile,
}
},
tooltip: {
enabled: false
},
legend: {
display: true,
/*position: posizioneLegenda,*/
labels: {
color: LabelColore,
font: {
family: LabelFont,
size: LabelFontSize,
style: LabelStile
}
}
},
Contatore: {
cosaMisura: 'lavoratori',
}
}
}
const PersonaleSettoreConfig = {
type: 'doughnut',
data: PersonaleSettoreData,
options: optionsPGS,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const PersonaleSettoreGrafico = new Chart(
document.getElementById('PersonaleSettore'),
PersonaleSettoreConfig
);
const optionsPGSHD = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Personale GARR: settore di attività',
display: TitoloVisualizza,
align: TitoloAllinea,
padding: TitoloPadding,
color: TitoloColore,
font: {
family: TitoloFont,
size: TitoloFontSize,
style: TitoloStile,
}
},
tooltip: {
enabled: false
},
legend: {
display: true,
position: legendaImmagine,
labels: {
color: LabelColore,
font: {
family: LabelFont,
size: LabelFontSize,
style: LabelStile
}
}
},
Contatore: {
cosaMisura: 'lavoratori',
}
},
animation: {
onComplete: function() {
var annoSelect = document.getElementById('selectPGS');
var annoSelezionato = annoSelect.options[annoSelect.selectedIndex].text;
var CanvasTemp = PersonaleSettoreGraficoHD;
var a = document.getElementById('PersonaleSettore_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'settore-personale-GARR-'+annoSelezionato+'.png';
}
}
}
const PersonaleSettoreConfigHD = {
type: 'doughnut',
data: PersonaleSettoreData,
options: optionsPGSHD,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const PersonaleSettoreGraficoHD = new Chart(
document.getElementById('PersonaleSettoreHD'),
PersonaleSettoreConfigHD
);
const PersonaleTecnicoData = {
labels: ['Gestione e progettazione', 'Sistemi informativi', 'Cloud'],
datasets: [{
label: '2021',
data: [36, 9, 9],
backgroundColor: ArrayColore,
borderColor: Bianco,
hoverBorderColor: Bianco,
spacing: 10,
hoverOffset: 4,
borderRadius: 6,
borderWidth: 3
}]
};
const optionsPGT = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Personale tecnico GARR',
display: TitoloVisualizza,
align: TitoloAllinea,
padding: TitoloPadding,
color: TitoloColore,
font: {
family: TitoloFont,
size: TitoloFontSize,
style: TitoloStile,
}
},
tooltip: {
enabled: false
},
legend: {
display: true,
/*position: posizioneLegenda,*/
labels: {
color: LabelColore,
font: {
family: LabelFont,
size: LabelFontSize,
style: LabelStile
}
}
},
Contatore: {
cosaMisura: 'lavoratori',
}
}
}
const PersonaleTecnicoConfig = {
type: 'doughnut',
data: PersonaleTecnicoData,
options: optionsPGT,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const PersonaleTecnicoGrafico = new Chart(
document.getElementById('PersonaleTecnico'),
PersonaleTecnicoConfig
);
const optionsPGTHD = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Personale tecnico GARR',
display: TitoloVisualizza,
align: TitoloAllinea,
padding: TitoloPadding,
color: TitoloColore,
font: {
family: TitoloFont,
size: TitoloFontSize,
style: TitoloStile,
}
},
tooltip: {
enabled: false
},
legend: {
display: true,
position: legendaImmagine,
labels: {
color: LabelColore,
font: {
family: LabelFont,
size: LabelFontSize,
style: LabelStile
}
}
},
Contatore: {
cosaMisura: 'lavoratori',
}
},
animation: {
onComplete: function() {
var annoSelect = document.getElementById('selectPGT');
var annoSelezionato = annoSelect.options[annoSelect.selectedIndex].text;
var CanvasTemp = PersonaleTecnicoGraficoHD;
var a = document.getElementById('PersonaleTecnico_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'personale-tecnico-GARR-'+annoSelezionato+'.png';
}
}
}
const PersonaleTecnicoConfigHD = {
type: 'doughnut',
data: PersonaleTecnicoData,
options: optionsPGTHD,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const PersonaleTecnicoGraficoHD = new Chart(
document.getElementById('PersonaleTecnicoHD'),
PersonaleTecnicoConfigHD
);
const PersonaleContrattoData = {
labels: ['Tempo indeterminato', 'Tempo indeterminato part', 'Tempo determinato', 'Personale di enti soci presso GARR', 'Collaboratori'],
datasets: [{
label: '2021',
data: [60, 5, 13, 7, 5],
backgroundColor: ArrayColore,
borderColor: Bianco,
hoverBorderColor: Bianco,
spacing: 10,
hoverOffset: 4,
borderRadius: 6,
borderWidth: 3
}]
};
const optionsPGC = {
maintainAspectRatio: false,
rotation: 55,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Personale GARR: tipologia di contratto',
display: TitoloVisualizza,
align: TitoloAllinea,
padding: TitoloPadding,
color: TitoloColore,
font: {
family: TitoloFont,
size: TitoloFontSize,
style: TitoloStile,
}
},
tooltip: {
enabled: false
},
legend: {
display: true,
/*position: posizioneLegenda,*/
labels: {
color: LabelColore,
font: {
family: LabelFont,
size: LabelFontSize,
style: LabelStile
}
}
},
Contatore: {
cosaMisura: 'lavoratori',
}
}
}
const PersonaleContrattoConfig = {
type: 'doughnut',
data: PersonaleContrattoData,
options: optionsPGC,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const PersonaleContrattoGrafico = new Chart(
document.getElementById('PersonaleContratto'),
PersonaleContrattoConfig
);
const optionsPGCHD = {
maintainAspectRatio: false,
rotation: 55,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Personale GARR: tipologia di contratto',
display: TitoloVisualizza,
align: TitoloAllinea,
padding: TitoloPadding,
color: TitoloColore,
font: {
family: TitoloFont,
size: TitoloFontSize,
style: TitoloStile,
}
},
tooltip: {
enabled: false
},
legend: {
display: true,
position: legendaImmagine,
labels: {
color: LabelColore,
font: {
family: LabelFont,
size: LabelFontSize,
style: LabelStile
}
}
},
Contatore: {
cosaMisura: 'lavoratori',
}
},
animation: {
onComplete: function() {
var annoSelect = document.getElementById('selectPGC');
var annoSelezionato = annoSelect.options[annoSelect.selectedIndex].text;
var CanvasTemp = PersonaleContrattoGraficoHD;
var a = document.getElementById('PersonaleContratto_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'contratto-personale-GARR-'+annoSelezionato+'.png';
}
}
}
const PersonaleContrattoConfigHD = {
type: 'doughnut',
data: PersonaleContrattoData,
options: optionsPGCHD,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const PersonaleContrattoGraficoHD = new Chart(
document.getElementById('PersonaleContrattoHD'),
PersonaleContrattoConfigHD
);
const PersonaleRetribuzioneData = {
labels: ['< 30', '30-35', '35-40', '40-45', '> 45'],
datasets: [{
label: 'Lavoratori',
data: [15, 15, 10, 9, 29],
backgroundColor: ArrayColore[4],
borderColor: ArrayColoreBordo[4],
borderWidth: BordoSpessore
}]
};
const optionsPGR = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Personale GARR: retribuzione lorda annua',
display: TitoloVisualizza,
align: TitoloAllinea,
padding: TitoloPadding,
color: TitoloColore,
font: {
family: TitoloFont,
size: TitoloFontSize,
style: TitoloStile,
}
},
tooltip: {
enabled: false
},
legend: {
display: true,
position: 'bottom',
labels: {
color: LabelColore,
font: {
family: LabelFont,
size: LabelFontSize,
style: LabelStile
}
}
}
},
scales: {
x: {
beginAtZero: false,
title: {
text: 'Retribuzione (in migliaia di euro)',
display: AssiVisualizza,
align: AssiAllinea,
padding: AssiPadding,
color: AssiColore,
font: {
family: AssiFont,
size: AssiFontSize,
style: AssiStile,
}
},
ticks: {
color: TicksColore,
font: {
family: TicksFont,
size: TicksFontSize,
style: TicksStile
}
}
},
y: {
beginAtZero: true,
title: {
text: 'Lavoratori',
display: AssiVisualizza,
align: AssiAllinea,
padding: AssiPadding,
color: AssiColore,
font: {
family: AssiFont,
size: AssiFontSize,
style: AssiStile,
}
},
ticks: {
color: TicksColore,
font: {
family: TicksFont,
size: TicksFontSize,
style: TicksStile
}
}
}
},
animation: {
onComplete: function() {
var annoSelect = document.getElementById('selectPGR');
var annoSelezionato = annoSelect.options[annoSelect.selectedIndex].text;
var CanvasTemp = PersonaleRetribuzioneGraficoHD;
var a = document.getElementById('PersonaleRetribuzione_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'retribuzione-personale-GARR-'+annoSelezionato+'.png';
}
}
}
const PersonaleRetribuzioneConfig = {
type: 'bar',
data: PersonaleRetribuzioneData,
options: optionsPGR,
plugins: [mostraEtichette, sfondoBianco, LogoGARR]
};
const PersonaleRetribuzioneGrafico = new Chart(
document.getElementById('PersonaleRetribuzione'),
PersonaleRetribuzioneConfig
);
const PersonaleRetribuzioneGraficoHD = new Chart(
document.getElementById('PersonaleRetribuzioneHD'),
PersonaleRetribuzioneConfig
);
const periodoPGG = document.getElementById('selectPGG');
periodoPGG.addEventListener('change', SelezionaPeriodoPGG)
function SelezionaPeriodoPGG() {
var lnk = document.getElementById('PersonaleGenere_link');
lnk.classList.add("uk-link-muted");
lnk.href = "javascript:;";
periodoPGG.value.split(',');
PersonaleGenereGrafico.data.datasets[0].data = periodoPGG.value.split(',');
PersonaleGenereGrafico.options.plugins.title.text = 'Personale GARR: composizione di genere nel ' + periodoPGG.options[periodoPGG.selectedIndex].text;
PersonaleGenereGrafico.options.plugins.legend.position = posizioneLegenda;
PersonaleGenereGrafico.update();
PersonaleGenereGraficoHD.data.datasets[0].data = periodoPGG.value.split(',');
PersonaleGenereGraficoHD.options.plugins.title.text = 'Personale GARR: composizione di genere nel ' + periodoPGG.options[periodoPGG.selectedIndex].text;
PersonaleGenereGraficoHD.update();
sospendiLink = setInterval(togliMuto, 1000);
function togliMuto() {
lnk.classList.remove("uk-link-muted");
clearInterval(sospendiLink);
}
}
const periodoPGE = document.getElementById('selectPGE');
periodoPGE.addEventListener('change', SelezionaPeriodoPGE)
function SelezionaPeriodoPGE() {
var lnk = document.getElementById('PersonaleEta_link');
lnk.classList.add("uk-link-muted");
lnk.href = "javascript:;";
periodoPGE.value.split(',');
PersonaleEtaGrafico.data.datasets[0].data = periodoPGE.value.split(',');
PersonaleEtaGrafico.options.plugins.title.text = 'Personale GARR: età del personale nel ' + periodoPGE.options[periodoPGE.selectedIndex].text;
PersonaleEtaGrafico.update();
PersonaleEtaGraficoHD.data.datasets[0].data = periodoPGE.value.split(',');
PersonaleEtaGraficoHD.options.plugins.title.text = 'Personale GARR: età del personale nel ' + periodoPGE.options[periodoPGE.selectedIndex].text;
PersonaleEtaGraficoHD.update();
sospendiLink = setInterval(togliMuto, 1000);
function togliMuto() {
lnk.classList.remove("uk-link-muted");
clearInterval(sospendiLink);
}
}
const periodoPGS = document.getElementById('selectPGS');
periodoPGS.addEventListener('change', SelezionaPeriodoPGS)
function SelezionaPeriodoPGS() {
var lnk = document.getElementById('PersonaleSettore_link');
lnk.classList.add("uk-link-muted");
lnk.href = "javascript:;";
periodoPGS.value.split(',');
PersonaleSettoreGrafico.data.datasets[0].data = periodoPGS.value.split(',');
PersonaleSettoreGrafico.options.plugins.title.text = 'Personale GARR: settore di attività nel ' + periodoPGS.options[periodoPGS.selectedIndex].text;
PersonaleSettoreGrafico.options.plugins.legend.position = posizioneLegenda;
PersonaleSettoreGrafico.update();
PersonaleSettoreGraficoHD.data.datasets[0].data = periodoPGS.value.split(',');
PersonaleSettoreGraficoHD.options.plugins.title.text = 'Personale GARR: settore di attività nel ' + periodoPGS.options[periodoPGS.selectedIndex].text;
PersonaleSettoreGraficoHD.update();
sospendiLink = setInterval(togliMuto, 1000);
function togliMuto() {
lnk.classList.remove("uk-link-muted");
clearInterval(sospendiLink);
}
}
const periodoPGT = document.getElementById('selectPGT');
periodoPGT.addEventListener('change', SelezionaPeriodoPGT)
function SelezionaPeriodoPGT() {
var lnk = document.getElementById('PersonaleTecnico_link');
lnk.classList.add("uk-link-muted");
lnk.href = "javascript:;";
periodoPGT.value.split(',');
PersonaleTecnicoGrafico.data.datasets[0].data = periodoPGT.value.split(',');
PersonaleTecnicoGrafico.options.plugins.title.text = 'Personale GARR: personale tecnico nel ' + periodoPGT.options[periodoPGT.selectedIndex].text;
PersonaleTecnicoGrafico.options.plugins.legend.position = posizioneLegenda;
PersonaleTecnicoGrafico.update();
PersonaleTecnicoGraficoHD.data.datasets[0].data = periodoPGT.value.split(',');
PersonaleTecnicoGraficoHD.options.plugins.title.text = 'Personale GARR: personale tecnico nel ' + periodoPGT.options[periodoPGT.selectedIndex].text;
PersonaleTecnicoGraficoHD.update();
sospendiLink = setInterval(togliMuto, 1000);
function togliMuto() {
lnk.classList.remove("uk-link-muted");
clearInterval(sospendiLink);
}
}
const periodoPGC = document.getElementById('selectPGC');
periodoPGC.addEventListener('change', SelezionaPeriodoPGC)
function SelezionaPeriodoPGC() {
var lnk = document.getElementById('PersonaleContratto_link');
lnk.classList.add("uk-link-muted");
lnk.href = "javascript:;";
periodoPGC.value.split(',');
PersonaleContrattoGrafico.data.datasets[0].data = periodoPGC.value.split(',');
PersonaleContrattoGrafico.options.plugins.title.text = 'Personale GARR: tipologia di contratto nel ' + periodoPGC.options[periodoPGC.selectedIndex].text;
PersonaleContrattoGrafico.options.plugins.legend.position = posizioneLegenda;
PersonaleContrattoGrafico.update();
PersonaleContrattoGraficoHD.data.datasets[0].data = periodoPGC.value.split(',');
PersonaleContrattoGraficoHD.options.plugins.title.text = 'Personale GARR: tipologia di contratto nel ' + periodoPGC.options[periodoPGC.selectedIndex].text;
PersonaleContrattoGraficoHD.update();
sospendiLink = setInterval(togliMuto, 1000);
function togliMuto() {
lnk.classList.remove("uk-link-muted");
clearInterval(sospendiLink);
}
}
const periodoPGR = document.getElementById('selectPGR');
periodoPGR.addEventListener('change', SelezionaPeriodoPGR)
function SelezionaPeriodoPGR() {
var lnk = document.getElementById('PersonaleRetribuzione_link');
lnk.classList.add("uk-link-muted");
lnk.href = "javascript:;";
periodoPGR.value.split(',');
PersonaleRetribuzioneGrafico.data.datasets[0].data = periodoPGR.value.split(',');
PersonaleRetribuzioneGrafico.options.plugins.title.text = 'Personale GARR: retribuzione lorda annua nel ' + periodoPGR.options[periodoPGR.selectedIndex].text;
PersonaleRetribuzioneGrafico.update();
PersonaleRetribuzioneGraficoHD.data.datasets[0].data = periodoPGR.value.split(',');
PersonaleRetribuzioneGraficoHD.options.plugins.title.text = 'Personale GARR: retribuzione lorda annua nel ' + periodoPGR.options[periodoPGR.selectedIndex].text;
PersonaleRetribuzioneGraficoHD.update();
sospendiLink = setInterval(togliMuto, 1000);
function togliMuto() {
lnk.classList.remove("uk-link-muted");
clearInterval(sospendiLink);
}
}
$(function(){
$('#selectGrafico').on('change', function () {
var url = $(this).val();
if (url) {
window.location = url;
}
return false;
});
});
