.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 i servizi applicativi
- Mirror: volume di traffico annuale
- Filesender: file inviati
- Speedtest: misure effettuate
Scegli
Mirror: volume di traffico annuale
Filesender: file inviati
Speedtest: misure effettuate
Mirror: volume di traffico annuale
Il grafico mostra il volume totale di dati trasferiti dal Mirror verso l’esterno.
Salva immagine
Filesender: file inviati
Il grafico mostra il numero di file inviati in un anno utilizzando il servizio Filesender.
Salva immagine
Speedtest: misure effettuate
GARR Speedtest misura capacità, latenza e jitter di una connessione di rete.
Il grafico mostra il numero di misure effettuate e il numero di indirizzi IP unici da cui provengono.
Salva immagine
Continua a leggere
Servizi di rete e accesso
Personale
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(".", ",").replace(/\B(?=(\d{3})+(?!\d))/g, ".");
const textWidth = ctx.measureText(text).width;
//chart.getDatasetMeta(0).data;
//console.log(chart.getDataVisibility(index));
//var sdata = chart.getDatasetMeta(0).data;
//console.log(sdata);
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 WebMeetingsOreData = {
tricodemo: 1,
labels: ['2017', '2018', '2019', '2020'],
datasets: [{
label: 'Ore di presenza in aula virtuale',
data: [2464, 3296, 4966, 34381],
backgroundColor: ArrayColore[0],
borderColor: ArrayColoreBordo[0],
borderWidth: BordoSpessore
}]
};
const optionsWMO = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'WebMeetings: ore di presenza in aula virtuale',
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: 'Anno',
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: 'Ore',
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 CanvasTemp = WebMeetingsOreGraficoHD;
var a = document.getElementById('WebMeetingsOre_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'webmeetings-ore-di-presenza-GARR.png';
}
}
}
const WebMeetingsOreConfig = {
type: 'bar',
data: WebMeetingsOreData,
options: optionsWMO,
plugins: [mostraEtichetteStacked, sfondoBianco, LogoGARR]
};
const WebMeetingsOreGrafico = new Chart(
document.getElementById('WebMeetingsOre'),
WebMeetingsOreConfig
);
const WebMeetingsOreGraficoHD = new Chart(
document.getElementById('WebMeetingsOreHD'),
WebMeetingsOreConfig
);
*/
const optionsMTA = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Mirror: volume di traffico annuale',
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: 'Anno',
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: 'Petabyte: 1PB = 1.000.000 GB',
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 CanvasTemp = MirrorTrafficoAnnualeGraficoHD;
var a = document.getElementById('MirrorTrafficoAnnuale_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'mirror-traffico-annuale-GARR.png';
}
}
}
const MirrorTrafficoAnnualeData = {
tricodemo: 1,
labels: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],
datasets: [{
label: 'Capacità in Petabyte',
data: [8.1, 7.4, 6.9, 6.8, 6.0, 5.8, 6.0, 4.5, 5.7],
pointBackgroundColor: ArrayColoreBordo[4],
backgroundColor: ArrayColoreSfondo[4],
borderColor: ArrayColore[4],
borderWidth: 1,
borderDash: [4, 4],
fill: true,
tension: 0.5
}]
};
const MirrorTrafficoAnnualeConfig = {
type: 'line',
data: MirrorTrafficoAnnualeData,
options: optionsMTA,
plugins: [mostraEtichetteSopra, sfondoBianco, LogoGARR]
};
const MirrorTrafficoAnnualeGrafico = new Chart(
document.getElementById('MirrorTrafficoAnnuale'),
MirrorTrafficoAnnualeConfig
);
const MirrorTrafficoAnnualeGraficoHD = new Chart(
document.getElementById('MirrorTrafficoAnnualeHD'),
MirrorTrafficoAnnualeConfig
);
const optionsFLS = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Filesender: file inviati',
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: 'Anno',
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: 'File inviati',
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 CanvasTemp = FilesenderGraficoHD;
var a = document.getElementById('Filesender_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'filesender-file-inviati-GARR.png';
}
}
}
const FilesenderData = {
labels: ['2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],
datasets: [{
label: 'File inviati',
data: [35000, 59000, 88000, 90407, 100583, 73605, 132904, 138000],
pointBackgroundColor: ArrayColoreBordo[5],
backgroundColor: ArrayColoreSfondo[5],
borderColor: ArrayColore[5],
borderWidth: 1,
borderDash: [4, 4],
fill: true,
tension: 0.5
}]
};
const FilesenderConfig = {
type: 'line',
data: FilesenderData,
options: optionsFLS,
plugins: [sfondoBianco, mostraEtichetteSopra, LogoGARR]
};
const FilesenderGrafico = new Chart(
document.getElementById('Filesender'),
FilesenderConfig
);
const FilesenderGraficoHD = new Chart(
document.getElementById('FilesenderHD'),
FilesenderConfig
);
const optionsSPT = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'GARR Speedtest: misure effettuate',
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: 'Anno',
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: 'Misure effettuate',
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 CanvasTemp = SpeedTestGraficoHD;
var a = document.getElementById('SpeedTest_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'misure-effettuate-speedtest-GARR.png';
}
}
}
const SpeedTestData = {
labels: ['2019', '2020', '2021'],
datasets: [{
label: 'Misure',
data: [3650, 28950, 33500],
backgroundColor: ArrayColore[0],
borderColor: ArrayColoreBordo[0],
borderWidth: BordoSpessore
},{
label: 'IP unici',
data: [830, 11522, 20000],
backgroundColor: ArrayColore[1],
borderColor: ArrayColoreBordo[1],
borderWidth: BordoSpessore
}]
};
const SpeedTestConfig = {
type: 'bar',
data: SpeedTestData,
options: optionsSPT,
plugins: [sfondoBianco, mostraEtichette, LogoGARR]
};
const SpeedTestGrafico = new Chart(
document.getElementById('SpeedTest'),
SpeedTestConfig
);
const SpeedTestGraficoHD = new Chart(
document.getElementById('SpeedTestHD'),
SpeedTestConfig
);
$(function(){
$('#selectGrafico').on('change', function () {
var url = $(this).val();
if (url) {
window.location = url;
}
return false;
});
});
