.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 la comunicazione GARR
- Social Media: followers
- GARR TV: filmati disponibili
- GARR News: pagine visualizzate
Scegli
Social Media: followers
GARR TV: filmati disponibili
GARR News: pagine visualizzate
Social media: followers
Il grafico mostra l’andamento dei followers sui vari canali social GARR.
Salva immagine
GARR TV: filmati disponibili
Il grafico mostra l’andamento dei filmati disponibili sulla piattaforma GARR TV.
Salva immagine
GARR News: pagine visualizzate
Il grafico mostra l’andamento del numero di pagine visualizzate dell’edizione online del magazine GARR NEWS.
Salva immagine
Continua a leggere
Personale
Rete GARR
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 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 optionsCVP = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Visualizzazioni di post',
display: TitoloVisualizza,
align: TitoloAllinea,
padding: TitoloPadding,
color: TitoloColore,
font: {
family: TitoloFont,
size: TitoloFontSize,
style: TitoloStile,
}
},
tooltip: {
enabled: true
},
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: 'Visualizzazioni',
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 = VisualizzazioniPostGraficoHD;
var a = document.getElementById('VisualizzazioniPost_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'visualizzazione-post-GARR.png';
}
}
}
const VisualizzazioniPostData = {
labels: ['2015', '2016', '2017', '2018', '2019','2020'],
datasets: [{
label: 'Facebook',
data: [99678, 231815, 212083, 274594, 333018, 209988],
backgroundColor: ArrayColoreBordo[0],
borderColor: ArrayColore[0],
borderWidth: 1,
borderDash: [4, 4],
tension: 0.5
},{
label: 'Youtube',
data: [2965, 6377, 16923, 22357, 22406, 50870],
backgroundColor: ArrayColoreBordo[2],
borderColor: ArrayColore[2],
borderWidth: 1,
borderDash: [4, 4],
tension: 0.5
},{
label: 'Twitter',
data: [54535, 161891, 206487, 336600, 366573, 248366],
backgroundColor: ArrayColoreBordo[3],
borderColor: ArrayColore[3],
borderWidth: 1,
borderDash: [4, 4],
tension: 0.5
}]
};
const VisualizzazioniPostConfig = {
type: 'line',
data: VisualizzazioniPostData,
options: optionsCVP,
plugins: [sfondoBianco, LogoGARR]
};
const VisualizzazioniPostGrafico = new Chart(
document.getElementById('VisualizzazioniPost'),
VisualizzazioniPostConfig
);
const VisualizzazioniPostGraficoHD = new Chart(
document.getElementById('VisualizzazioniPostHD'),
VisualizzazioniPostConfig
);
*/
const optionsCVF = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Social media: Followers',
display: TitoloVisualizza,
align: TitoloAllinea,
padding: TitoloPadding,
color: TitoloColore,
font: {
family: TitoloFont,
size: TitoloFontSize,
style: TitoloStile,
}
},
tooltip: {
enabled: true
},
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: 'Followers',
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 = FollowersGraficoHD;
var a = document.getElementById('Followers_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'followers-GARR.png';
}
}
}
const FollowersData = {
labels: ['2017', '2018', '2019','2020','2021'],
datasets: [{
label: 'Facebook',
data: [1697, 2082, 2562, 3149, 3530],
backgroundColor: ArrayColoreBordo[0],
borderColor: ArrayColore[0],
borderWidth: 1,
borderDash: [4, 4],
tension: 0.5
},{
label: 'Twitter',
data: [1114, 1405, 1559, 1763, 1942],
backgroundColor: ArrayColoreBordo[3],
borderColor: ArrayColore[3],
borderWidth: 1,
borderDash: [4, 4],
tension: 0.5
},{
label: 'Youtube',
data: [280, 477, 734, 1440, 2180],
backgroundColor: ArrayColoreBordo[2],
borderColor: ArrayColore[2],
borderWidth: 1,
borderDash: [4, 4],
tension: 0.5
},{
label: 'Linkedin',
data: [0, 867, 1174, 1579, 2079],
backgroundColor: ArrayColoreBordo[1],
borderColor: ArrayColore[1],
borderWidth: 1,
borderDash: [4, 4],
tension: 0.5
},{
label: 'Instagram',
data: [0, 0, 505, 582, 679],
backgroundColor: ArrayColoreBordo[6],
borderColor: ArrayColore[6],
borderWidth: 1,
borderDash: [4, 4],
tension: 0.5
}]
};
const FollowersConfig = {
type: 'line',
data: FollowersData,
options: optionsCVF,
plugins: [sfondoBianco, LogoGARR]
};
const FollowersGrafico = new Chart(
document.getElementById('Followers'),
FollowersConfig
);
const FollowersGraficoHD = new Chart(
document.getElementById('FollowersHD'),
FollowersConfig
);
const optionsCGT = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'GARR TV: filmati disponibili',
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: 'Video',
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 = GARRTvGraficoHD;
var a = document.getElementById('GARRTv_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'filmati-disponibili-GARRTv-GARR.png';
}
}
}
const GARRTvData = {
labels: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],
datasets: [{
label: 'Video disponibili',
data: [553, 770, 890, 1102, 1271, 1465, 1644, 2161, 2362],
pointBackgroundColor: ArrayColoreBordo[0],
backgroundColor: ArrayColoreSfondo[0],
borderColor: ArrayColore[0],
borderWidth: 1,
borderDash: [4, 4],
fill: true,
tension: 0.5
}]
};
const GARRTvConfig = {
type: 'line',
data: GARRTvData,
options: optionsCGT,
plugins: [sfondoBianco, mostraEtichetteSopra, LogoGARR]
};
const GARRTvGrafico = new Chart(
document.getElementById('GARRTv'),
GARRTvConfig
);
const GARRTvGraficoHD = new Chart(
document.getElementById('GARRTvHD'),
GARRTvConfig
);
const optionsCGN = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'GARR News: visualizzazione pagine',
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: 'Pagine',
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 = GARRNewsGraficoHD;
var a = document.getElementById('GARRNews_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'lettori-GARR-News-GARR.png';
}
}
}
const GARRNewsData = {
labels: ['2014','2015', '2016', '2017', '2018', '2019', '2020', '2021'],
datasets: [{
label: 'Numero di pagine',
data: [7877, 10751, 10600, 12955, 13037, 13635, 20374, 28281],
pointBackgroundColor: ArrayColoreBordo[5],
backgroundColor: ArrayColoreSfondo[5],
borderColor: ArrayColore[5],
borderWidth: 1,
borderDash: [4, 4],
fill: true,
tension: 0.5
}]
};
const GARRNewsConfig = {
type: 'line',
data: GARRNewsData,
options: optionsCGN,
plugins: [sfondoBianco, mostraEtichetteSopra, LogoGARR]
};
const GARRNewsGrafico = new Chart(
document.getElementById('GARRNews'),
GARRNewsConfig
);
const GARRNewsGraficoHD = new Chart(
document.getElementById('GARRNewsHD'),
GARRNewsConfig
);
/*
const optionsCVS = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Visualizzazioni di pagine',
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: false,
title: {
text: 'Visualizzazioni',
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 = VisualizzazioniSitiGraficoHD;
var a = document.getElementById('VisualizzazioniSiti_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'visualizzazioni-pagine-GARR.png';
}
}
}
const VisualizzazioniSitiData = {
labels: ['2016', '2017', '2018', '2019', '2020', '2021'],
datasets: [{
label: 'Pagine visualizzate',
data: [479000, 541000, 521000, 538328, 743197, 624000],
pointBackgroundColor: ArrayColoreBordo[4],
backgroundColor: ArrayColoreSfondo[4],
borderColor: ArrayColore[4],
borderWidth: 1,
borderDash: [4, 4],
fill: true,
tension: 0.5
}]
};
const VisualizzazioniSitiConfig = {
type: 'line',
data: VisualizzazioniSitiData,
options: optionsCVS,
plugins: [sfondoBianco, mostraEtichetteSopra, LogoGARR]
};
const VisualizzazioniSitiGrafico = new Chart(
document.getElementById('VisualizzazioniSiti'),
VisualizzazioniSitiConfig
);
const VisualizzazioniSitiGraficoHD = new Chart(
document.getElementById('VisualizzazioniSitiHD'),
VisualizzazioniSitiConfig
);
*/
$(function(){
$('#selectGrafico').on('change', function () {
var url = $(this).val();
if (url) {
window.location = url;
}
return false;
});
});
