.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;
}
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 2022(6.85 MB)
Tutti gli annual report
Elenco dei grafici per la Rete GARR
- Capacità aggregata link di backbone
- Capacità aggregata link di accesso
- Capacità link di backbone
- Capacità link di accesso
- Volume di traffico totale
- Volume di traffico dei peering
- Volume di traffico degli accessi e dei peering di ricerca
- Tipologia di traffico di peering
Scegli
Capacità aggregata link di backbone
Capacità aggregata link di accesso
Capacità link di backbone
Capacità link di accesso
Volume di traffico totale
Volume di traffico dei peering
Volume di traffico degli accessi e dei peering di ricerca
Tipologia di traffico di peering
Capacità aggregata link di backbone
Il grafico mostra l’andamento della capacità aggregata della connettività IP del backbone della rete GARR.
Cambia periodo
Salva immagine
Capacità aggregata link di accesso
Il grafico mostra l’andamento della capacità aggregata dei collegamenti di accesso delle sedi connesse a GARR.
Cambia periodo
Salva immagine
Capacità link di backbone
Il grafico mostra la composizione dei link della dorsale di rete con una ripartizione in base alla loro capacità.
Seleziona l'anno:
2022
2021
2020
2019
2018
2017
2016
Salva immagine
Capacità link di accesso
Il grafico mostra la composizione dei link di accesso delle sedi connesse a GARR con una ripartizione in base alla loro capacità.
Seleziona l'anno:
2022
2021
2020
2019
2018
2017
2016
Salva immagine
Volume di traffico totale sulla rete GARR
Il grafico mostra l’andamento del traffico totale sulla rete GARR.
Salva immagine
Volume di traffico dei peering della rete GARR
Il grafico mostra l’andamento su base mensile del volume di traffico generato dai peering della rete GARR. Le voci prese in considerazione sono il traffico upstream e dei peering diretti, il traffico da e verso gli Internet Exchange e il traffico dei peering di ricerca.
Seleziona l'anno:
2022
2021
2020
2019
2018
2017
2016
2015
2014
Salva immagine
Volume di traffico degli accessi e dei peering di ricerca
Il grafico mette a confronto, su base mensile, il traffico totale degli accessi degli utenti con il traffico dei peering di ricerca.
Seleziona l'anno:
2022
2021
2020
2019
2018
2017
2016
2015
2014
Salva immagine
Tipologia di traffico di peering
Il grafico mostra la composizione del traffico di peering sulla rete GARR.
Seleziona l'anno:
2022
2021
2020
2019
2018
2017
Salva immagine
Continua a leggere
Cloud
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 TooltipLightColore = 'rgba(0,0,0,1)';
var TooltipLightSfondo = 'rgba(0,0,0,0)';
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 {
// AGGIUNGERE legendaDinamica ALLE OPTIONS
//if (document.getElementById("contenuto-principale").offsetWidth {
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();
//console.log(chart.config.options.plugins.Contatore.fontSize);
//console.log(chart.config.options.plugins.Contatore.fontFamily);
//console.log(chart.config.options.plugins.Contatore.fontColor);
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;
if (!(chart.data.datasets[i].data[index] == 0) && (chart.getDataVisibility(index) == true)) {
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 sommaDueColonne = {
id: 'sommaDueColonne',
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();
function isOdd(i) { return i % 2;}
if (isOdd(i)) {
var zero = i-1;
var uno = i;
var primo = chart.data.datasets[zero].data[index];
var secondo = chart.data.datasets[uno].data[index];
var pes= primo+secondo;
const nCoppia = 'tot ' + pes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
const nCoppiaWidth = ctx.measureText(nCoppia).width;
if ((chart.isDatasetVisible(zero)) && (chart.isDatasetVisible(uno))) {
ctx.fillStyle = TooltipLightSfondo;
ctx.fillRect(x - ((nCoppiaWidth + 10) /2), y - 30, nCoppiaWidth + 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 = TooltipLightColore;
ctx.fillText(nCoppia, x - (nCoppiaWidth / 2), y-19);
ctx.restore();
}
}
})
})
}
};
const sommaTreColonne = {
id: 'sommaTreColonne',
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();
function isEven(n) { return n % 2 == 0;}
if (isEven(i) && i > 0) {
if (chart.isDatasetVisible(i-2) == true){
var colonnaZero = parseInt(chart.data.datasets[i-2].data[index]);
} else {
var colonnaZero = 0;
}
if (chart.isDatasetVisible(i-1) == true){
var colonnaUno = parseInt(chart.data.datasets[i-1].data[index]);
} else {
var colonnaUno = 0;
}
if (chart.isDatasetVisible(i) == true){
var colonnaDue = parseInt(chart.data.datasets[i].data[index]);
} else {
var colonnaDue = 0;
};
var ab = colonnaZero + colonnaUno;
var ac = colonnaZero + colonnaDue;
var bc = colonnaUno + colonnaDue;
var abc = colonnaZero + colonnaUno + colonnaDue;
var doppiettaAB = 'tot ' + ab.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
var doppiettaAC = 'tot ' + ac.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
var doppiettaBC = 'tot ' + bc.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
var tripletta = 'tot ' + abc.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
const triplettaWidth = ctx.measureText(tripletta).width;
const doppiettaABWidth = ctx.measureText(doppiettaAB).width;
const doppiettaACWidth = ctx.measureText(doppiettaAC).width;
const doppiettaBCWidth = ctx.measureText(doppiettaBC).width;
ctx.font = TooltipFont;
ctx.fontSize = TooltipFontSize;
ctx.fillStyle = TooltipLightColore;
if ((chart.isDatasetVisible(0) === true) && (chart.isDatasetVisible(1) === true) && (chart.isDatasetVisible(2) === false)) {
ctx.fillText(doppiettaAB, x - (doppiettaABWidth / 2), (y-19 + datapoint.height));
} else if ((chart.isDatasetVisible(0) === false) && (chart.isDatasetVisible(1) === true) && (chart.isDatasetVisible(2) === true)) {
ctx.fillText(doppiettaBC, x - (doppiettaBCWidth / 2), y-19);
} else if ((chart.isDatasetVisible(0) === true) && (chart.isDatasetVisible(1) === false) && (chart.isDatasetVisible(2) === true)) {
ctx.fillText(doppiettaAC, x - (doppiettaACWidth / 2), y-19);
} else if (chart.isDatasetVisible(0) && chart.isDatasetVisible(1) && chart.isDatasetVisible(2)) {
ctx.fillText(tripletta, x - (triplettaWidth / 2), y-19);
} else {
//console.log("una sola colonna è visibile");
};
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 CapacitaAggregataBackboneDataUno = {
tricodemo: 1,
labels: ['2018', '2019', '2020', '2021', '2022'],
datasets: [{
label: 'Capacità in Gbps',
data: [2950, 3020, 3130, 3130, 15000],
backgroundColor: ArrayColore[0],
borderColor: ArrayColoreBordo[0],
borderWidth: BordoSpessore
}]
};
const CapacitaAggregataBackboneDataDue = {
tricodemo: 2,
labels: ['2013', '2014', '2015', '2016', 2017],
datasets: [{
label: 'Capacità in Gbps',
data: [833, 860, 1890, 2040, 2550],
backgroundColor: ArrayColore[0],
borderColor: ArrayColoreBordo[0],
borderWidth: BordoSpessore
}]
};
const optionsCAB = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Capacità aggregata link di backbone',
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: 'Capacità aggregata in Gbps',
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() {
if (!(numeroScheda)) {numeroScheda="-2"};
var CanvasTemp = CapacitaAggregataBackboneGraficoHD;
var a = document.getElementById('CapacitaAggregataBackbone_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'capacita-aggregata-link-di-backbone-GARR'+numeroScheda+'.png';
}
}
}
const CapacitaAggregataBackboneConfig = {
type: 'bar',
data: CapacitaAggregataBackboneDataUno,
options: optionsCAB,
plugins: [mostraEtichetteStacked, sfondoBianco, LogoGARR]
};
const CapacitaAggregataBackboneGrafico = new Chart(
document.getElementById('CapacitaAggregataBackbone'),
CapacitaAggregataBackboneConfig
);
const CapacitaAggregataBackboneGraficoHD = new Chart(
document.getElementById('CapacitaAggregataBackboneHD'),
CapacitaAggregataBackboneConfig
);
const optionsCAA = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Capacità aggregata link di accesso',
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: 'Capacità aggregata in Gbps',
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() {
if (!(numeroScheda)) {numeroScheda="-2"};
var CanvasTemp = CapacitaAggregataAccessoGraficoHD;
var a = document.getElementById('CapacitaAggregataAccesso_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'capacita-aggregata-link-di-accesso-GARR'+numeroScheda+'.png';
}
}
}
const CapacitaAggregataAccessoDataUno = {
tricodemo: 1,
labels: ['2018', '2019', '2020', '2021', 2022],
datasets: [{
label: 'Capacità in Gbps',
data: [1840, 2000, 3440, 3700, 3900],
backgroundColor: ArrayColore[1],
borderColor: ArrayColoreBordo[1],
borderWidth: BordoSpessore
}]
};
const CapacitaAggregataAccessoDataDue = {
tricodemo: 2,
labels: ['2013', '2014', '2015', '2016', 2017],
datasets: [{
label: 'Capacità in Gbps',
data: [659, 836, 1150, 1360, 1580],
backgroundColor: ArrayColore[1],
borderColor: ArrayColoreBordo[1],
borderWidth: BordoSpessore
}]
};
const CapacitaAggregataAccessoConfig = {
type: 'bar',
data: CapacitaAggregataAccessoDataUno,
options: optionsCAA,
plugins: [mostraEtichetteStacked, sfondoBianco, LogoGARR]
};
const CapacitaAggregataAccessoGrafico = new Chart(
document.getElementById('CapacitaAggregataAccesso'),
CapacitaAggregataAccessoConfig
);
const CapacitaAggregataAccessoGraficoHD = new Chart(
document.getElementById('CapacitaAggregataAccessoHD'),
CapacitaAggregataAccessoConfig
);
const optionsCLB = {
maintainAspectRatio: false, // true
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Capacità link di backbone',
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: 'link',
}
}
}
const CapacitaLinkBackboneData = { // 2022
labels: ['≥ 100 Gbps', '< 100 Gbps', '≤ 10 Gbps', '≤ 1 Gbps'],
datasets: [{
label: '2022',
data: [23, 80, 38, 68],
backgroundColor: ArrayColore,
borderColor: Bianco,
hoverBorderColor: Bianco,
spacing: 10,
hoverOffset: 4,
borderRadius: 6,
borderWidth: 3
}]
};
const CapacitaLinkBackboneConfig = {
type: 'doughnut',
data: CapacitaLinkBackboneData,
options: optionsCLB,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const CapacitaLinkBackboneGrafico = new Chart(
document.getElementById('CapacitaLinkBackbone'),
CapacitaLinkBackboneConfig
);
const optionsCLBHD = {
maintainAspectRatio: false, // true
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Capacità link di backbone',
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: 'link',
}
},
animation: {
onComplete: function() {
var annoSelect = document.getElementById('selectCLB');
var annoSelezionato = annoSelect.options[annoSelect.selectedIndex].text;
var CanvasTemp = CapacitaLinkBackboneGraficoHD;
var a = document.getElementById('CapacitaLinkBackbone_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'capacita-link-di-backbone-GARR-'+annoSelezionato+'.png';
}
}
}
const CapacitaLinkBackboneConfigHD = {
type: 'doughnut',
data: CapacitaLinkBackboneData,
options: optionsCLBHD,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const CapacitaLinkBackboneGraficoHD = new Chart(
document.getElementById('CapacitaLinkBackboneHD'),
CapacitaLinkBackboneConfigHD
);
const optionsCLA = {
maintainAspectRatio: false, // true
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Capacità link di accesso',
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: 'link',
}
}
}
const CapacitaLinkAccessoData = { // 2022
labels: ['< 0.1 Gbps', '≥ 0.1 Gbps', '≥ 1 Gbps', '≥ 10 Gbps'],
datasets: [{
label: '2022',
data: [5, 347, 345, 160],
backgroundColor: ArrayColore,
borderColor: Bianco,
hoverBorderColor: Bianco,
spacing: 10,
hoverOffset: 4,
borderRadius: 6,
borderWidth: 3
}]
};
const CapacitaLinkAccessoConfig = {
type: 'doughnut',
data: CapacitaLinkAccessoData,
options: optionsCLA,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const CapacitaLinkAccessoGrafico = new Chart(
document.getElementById('CapacitaLinkAccesso'),
CapacitaLinkAccessoConfig
);
const optionsCLAHD = {
maintainAspectRatio: false, // true
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Capacità link di accesso',
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: 'link',
}
},
animation: {
onComplete: function() {
var annoSelect = document.getElementById('selectCLA');
var annoSelezionato = annoSelect.options[annoSelect.selectedIndex].text;
var CanvasTemp = CapacitaLinkAccessoGraficoHD;
var a = document.getElementById('CapacitaLinkAccesso_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'capacita-link-di-accesso-GARR-'+annoSelezionato+'.png';
}
}
}
const CapacitaLinkAccessoConfigHD = {
type: 'doughnut',
data: CapacitaLinkAccessoData,
options: optionsCLAHD,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const CapacitaLinkAccessoGraficoHD = new Chart(
document.getElementById('CapacitaLinkAccessoHD'),
CapacitaLinkAccessoConfigHD
);
const optionsVTT = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Volume di traffico totale sulla rete 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: '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 = VolumeTrafficoTotaleGraficoHD;
var a = document.getElementById('VolumeTrafficoTotale_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'volume-traffico-totale-rete-GARR.png';
}
}
}
const VolumeTrafficoTotaleData = {
labels: ['2014', '2015', '2016', '2017', '2018', '2019','2020','2021', 2022],
datasets: [{
label: 'Andamento del traffico totale sulla rete GARR',
data: [126, 172, 306, 301, 384, 492, 460, 506, 724],
pointBackgroundColor: ArrayColoreBordo[0],
backgroundColor: ArrayColoreSfondo[0],
borderColor: ArrayColore[0],
borderWidth: 1,
borderDash: [4, 4],
fill: true,
tension: 0.5
}]
};
const VolumeTrafficoTotaleConfig = {
type: 'line',
data: VolumeTrafficoTotaleData,
options: optionsVTT,
plugins: [sfondoBianco, mostraEtichetteSopra, LogoGARR]
};
const VolumeTrafficoTotaleGrafico = new Chart(
document.getElementById('VolumeTrafficoTotale'),
VolumeTrafficoTotaleConfig
);
const VolumeTrafficoTotaleGraficoHD = new Chart(
document.getElementById('VolumeTrafficoTotaleHD'),
VolumeTrafficoTotaleConfig
);
const optionsVTP = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Volume di traffico dei peering della rete 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
}
}
},
datalabels: {
color: '#fff',
formatter: function(value, context) {
return value.toLocaleString()
}
}
},
scales: {
x: {
beginAtZero: false,
title: {
text: 'Mese',
display: AssiVisualizza,
align: AssiAllinea,
padding: AssiPadding,
color: AssiColore,
font: {
family: AssiFont,
size: AssiFontSize,
style: AssiStile,
}
},
ticks: {
callback: function(TestoLungo) {
const NuovoTesto = this.getLabelForValue(TestoLungo);
const TestoCorto = NuovoTesto.substr(0, 3);
return TestoCorto;
},
color: TicksColore,
font: {
family: TicksFont,
size: TicksFontSize,
style: TicksStile
}
},
stacked: true,
},
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
}
},
stacked: true,
}
},
animation: {
onComplete: function() {
var annoSelect = document.getElementById('selectVTP');
var annoSelezionato = annoSelect.options[annoSelect.selectedIndex].text;
var CanvasTemp = VolumeTrafficoPeeringGraficoHD;
var a = document.getElementById('VolumeTrafficoPeering_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'volume-traffico-peering-rete-GARR-'+annoSelezionato+'.png';
}
}
}
const VolumeTrafficoPeeringData = {
labels: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
datasets: [{
label: 'Internet Exchange',
data: [70, 76, 96, 77, 93, 74, 67, 43, 76, 98, 105, 72 ],
backgroundColor: ArrayColore[3],
borderColor: ArrayColoreBordo[3],
borderWidth: BordoSpessore
},{
label: 'Research',
data: [322, 297, 318, 353, 328, 318, 356, 401, 327, 503, 455, 442],
backgroundColor: ArrayColore[0],
borderColor: ArrayColoreBordo[0],
borderWidth: BordoSpessore
},{
label: 'Upstream & Direct peerings',
data: [53, 58, 71, 68, 80, 62, 65, 47, 75, 89, 103, 90],
backgroundColor: ArrayColore[2],
borderColor: ArrayColoreBordo[2],
borderWidth: BordoSpessore
}]
};
const VolumeTrafficoPeeringConfig = {
type: 'bar',
data: VolumeTrafficoPeeringData,
options: optionsVTP,
plugins: [sfondoBianco, ChartDataLabels, sommaTreColonne, LogoGARR]
};
const VolumeTrafficoPeeringGrafico = new Chart(
document.getElementById('VolumeTrafficoPeering'),
VolumeTrafficoPeeringConfig
);
const VolumeTrafficoPeeringGraficoHD = new Chart(
document.getElementById('VolumeTrafficoPeeringHD'),
VolumeTrafficoPeeringConfig
);
const optionsVAP = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Volume di traffico degli accessi e dei peering di ricerca',
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: 'Mese',
display: AssiVisualizza,
align: AssiAllinea,
padding: AssiPadding,
color: AssiColore,
font: {
family: AssiFont,
size: AssiFontSize,
style: AssiStile,
}
},
ticks: {
callback: function(TestoLungo) {
const NuovoTesto = this.getLabelForValue(TestoLungo);
const TestoCorto = NuovoTesto.substr(0, 3);
return TestoCorto;
},
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 annoSelect = document.getElementById('selectVAP');
var annoSelezionato = annoSelect.options[annoSelect.selectedIndex].text;
var CanvasTemp = VolumeAccessiPeeringGraficoHD;
var a = document.getElementById('VolumeAccessiPeering_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'volume-accesso-peering-rete-GARR-'+annoSelezionato+'.png';
}
}
}
const VolumeAccessiPeeringData = {
labels: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
datasets: [{
label: 'Traffico di accesso utenti',
data: [53, 52, 59, 59, 60, 53, 56, 54, 57, 76, 72, 66],
pointBackgroundColor: ArrayColoreBordo[0],
backgroundColor: ArrayColoreSfondo[0],
borderColor: ArrayColore[0],
borderWidth: 1,
borderDash: [4, 4],
fill: true,
tension: 0.5
},{
label: 'Ricerca',
data: [32, 29, 31, 35, 32, 31, 35, 40, 37, 50, 45, 44],
pointBackgroundColor: ArrayColoreBordo[1],
backgroundColor: ArrayColoreSfondo[1],
borderColor: ArrayColore[1],
borderWidth: 1,
borderDash: [4, 4],
fill: true,
tension: 0.5
}]
};
const VolumeAccessiPeeringConfig = {
type: 'line',
data: VolumeAccessiPeeringData,
options: optionsVAP,
plugins: [sfondoBianco, mostraEtichetteSopra, LogoGARR]
};
const VolumeAccessiPeeringGrafico = new Chart(
document.getElementById('VolumeAccessiPeering'),
VolumeAccessiPeeringConfig
);
const VolumeAccessiPeeringGraficoHD = new Chart(
document.getElementById('VolumeAccessiPeeringHD'),
VolumeAccessiPeeringConfig
);
const optionsTTP = {
maintainAspectRatio: false,
plugins: {
title: {
text: 'Tipologia di traffico di peering',
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: 'peering',
}
}
}
const TipologiaTrafficoPeeringData = { // 2021
labels: ['Ricerca', 'Internet Exchange', 'Upstream & Direct peerings'],
datasets: [{
label: '2021',
data: [274899, 73292, 31970],
backgroundColor: ArrayColore,
borderColor: Bianco,
hoverBorderColor: Bianco,
spacing: 10,
hoverOffset: 4,
borderRadius: 6,
borderWidth: 3
}]
};
const optionsTTPHD = {
maintainAspectRatio: false,
plugins: {
title: {
text: 'Tipologia di traffico di peering',
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: 'peering',
}
},
animation: {
onComplete: function() {
var annoSelect = document.getElementById('selectTTP');
var annoSelezionato = annoSelect.options[annoSelect.selectedIndex].text;
var CanvasTemp = TipologiaTrafficoPeeringGraficoHD;
var a = document.getElementById('TipologiaTrafficoPeering_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'tipologia-traffico-peering-GARR-'+annoSelezionato+'.png';
}
}
}
const TipologiaTrafficoPeeringConfig = {
type: 'doughnut',
data: TipologiaTrafficoPeeringData,
options: optionsTTP,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const TipologiaTrafficoPeeringGrafico = new Chart(
document.getElementById('TipologiaTrafficoPeering'),
TipologiaTrafficoPeeringConfig
);
const TipologiaTrafficoPeeringConfigHD = {
type: 'doughnut',
data: TipologiaTrafficoPeeringData,
options: optionsTTPHD,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const TipologiaTrafficoPeeringGraficoHD = new Chart(
document.getElementById('TipologiaTrafficoPeeringHD'),
TipologiaTrafficoPeeringConfigHD
);
function CambiaPeriodo(c , g, hd, d1, d2, k) {
var trik = c.data.tricodemo;
var chiave = k.id;
var graficoSospeso = document.getElementById(chiave);
graficoSospeso.classList.add("uk-link-muted");
graficoSospeso.href = "javascript:;";
if (trik == 1) {
c.data = d2;
g.update();
hd.data = d2;
hd.update();
numeroScheda = "-1";
} else {
c.data = d1;
g.update();
hd.data = d1;
hd.update();
numeroScheda = "-2";
}
sospendiLink = setInterval(togliMuto, 1000);
function togliMuto() {
graficoSospeso.classList.remove("uk-link-muted");
clearInterval(sospendiLink);
}
}
const periodoCLB = document.getElementById('selectCLB');
periodoCLB.addEventListener('change', SelezionaPeriodoCLB)
function SelezionaPeriodoCLB() {
var lnk = document.getElementById('CapacitaLinkBackbone_link');
lnk.classList.add("uk-link-muted");
lnk.href = "javascript:;";
periodoCLB.value.split(',');
CapacitaLinkBackboneGrafico.data.datasets[0].data = periodoCLB.value.split(',');
CapacitaLinkBackboneGrafico.options.plugins.title.text = 'Capacità link di backbone nel ' + periodoCLB.options[periodoCLB.selectedIndex].text;
// CapacitaLinkBackboneGrafico.options.plugins.legend.position = posizioneLegenda;
CapacitaLinkBackboneGrafico.update();
CapacitaLinkBackboneGraficoHD.data.datasets[0].data = periodoCLB.value.split(',');
CapacitaLinkBackboneGraficoHD.options.plugins.title.text = 'Capacità link di backbone nel ' + periodoCLB.options[periodoCLB.selectedIndex].text;
CapacitaLinkBackboneGraficoHD.update();
sospendiLink = setInterval(togliMuto, 1000);
function togliMuto() {
lnk.classList.remove("uk-link-muted");
clearInterval(sospendiLink);
}
}
const periodoCLA = document.getElementById('selectCLA');
periodoCLA.addEventListener('change', SelezionaPeriodoCLA)
function SelezionaPeriodoCLA() {
var lnk = document.getElementById('CapacitaLinkAccesso_link');
lnk.classList.add("uk-link-muted");
lnk.href = "javascript:;";
periodoCLA.value.split(',');
CapacitaLinkAccessoGrafico.data.datasets[0].data = periodoCLA.value.split(',');
CapacitaLinkAccessoGrafico.options.plugins.title.text = 'Capacità link di accesso nel ' + periodoCLA.options[periodoCLA.selectedIndex].text;
// CapacitaLinkAccessoGrafico.options.plugins.legend.position = posizioneLegenda;
CapacitaLinkAccessoGrafico.update();
CapacitaLinkAccessoGraficoHD.data.datasets[0].data = periodoCLA.value.split(',');
CapacitaLinkAccessoGraficoHD.options.plugins.title.text = 'Capacità link di accesso nel ' + periodoCLA.options[periodoCLA.selectedIndex].text;
CapacitaLinkAccessoGraficoHD.update();
sospendiLink = setInterval(togliMuto, 1000);
function togliMuto() {
lnk.classList.remove("uk-link-muted");
clearInterval(sospendiLink);
}
}
const periodoVTP = document.getElementById('selectVTP');
periodoVTP.addEventListener('change', SelezionaPeriodoVTP)
function SelezionaPeriodoVTP() {
var lnk = document.getElementById('VolumeTrafficoPeering_link');
lnk.classList.add("uk-link-muted");
lnk.href = "javascript:;";
VolumeTrafficoPeeringGrafico.options.plugins.title.text = 'Volume di traffico dei peering della rete GARR nel ' + periodoVTP.options[periodoVTP.selectedIndex].text;
var alfa = periodoVTP.value.split(';');
var a = alfa[0];
var b = alfa[1];
var c = alfa[2];
VolumeTrafficoPeeringGrafico.data.datasets[0].data = a.split(',');
VolumeTrafficoPeeringGrafico.data.datasets[1].data = b.split(',');
VolumeTrafficoPeeringGrafico.data.datasets[2].data = c.split(',');
VolumeTrafficoPeeringGrafico.update();
VolumeTrafficoPeeringGraficoHD.data.datasets[0].data = a.split(',');
VolumeTrafficoPeeringGraficoHD.data.datasets[1].data = b.split(',');
VolumeTrafficoPeeringGraficoHD.data.datasets[2].data = c.split(',');
VolumeTrafficoPeeringGraficoHD.update();
sospendiLink = setInterval(togliMuto, 1000);
function togliMuto() {
lnk.classList.remove("uk-link-muted");
clearInterval(sospendiLink);
}
}
const periodoVAP = document.getElementById('selectVAP');
periodoVAP.addEventListener('change', SelezionaPeriodoVAP)
function SelezionaPeriodoVAP() {
var lnk = document.getElementById('VolumeAccessiPeering_link');
lnk.classList.add("uk-link-muted");
lnk.href = "javascript:;";
VolumeAccessiPeeringGrafico.options.plugins.title.text = 'Volume di traffico degli accessi e dei peering di ricerca nel ' + periodoVAP.options[periodoVAP.selectedIndex].text;
var alfa = periodoVAP.value.split(';');
var a = alfa[0];
var b = alfa[1];
VolumeAccessiPeeringGrafico.data.datasets[0].data = a.split(',');
VolumeAccessiPeeringGrafico.data.datasets[1].data = b.split(',');
VolumeAccessiPeeringGrafico.update();
VolumeAccessiPeeringGraficoHD.data.datasets[0].data = a.split(',');
VolumeAccessiPeeringGraficoHD.data.datasets[1].data = b.split(',');
VolumeAccessiPeeringGraficoHD.update();
sospendiLink = setInterval(togliMuto, 1000);
function togliMuto() {
lnk.classList.remove("uk-link-muted");
clearInterval(sospendiLink);
}
}
const periodoTTP = document.getElementById('selectTTP');
periodoTTP.addEventListener('change', SelezionaPeriodoTTP)
function SelezionaPeriodoTTP() {
var lnk = document.getElementById('TipologiaTrafficoPeering_link');
lnk.classList.add("uk-link-muted");
lnk.href = "javascript:;";
TipologiaTrafficoPeeringGrafico.options.plugins.title.text = 'Tipologia di traffico di peering nel ' + periodoTTP.options[periodoTTP.selectedIndex].text;
// TipologiaTrafficoPeeringGrafico.options.plugins.legend.position = posizioneLegenda;
periodoTTP.value.split(',');
TipologiaTrafficoPeeringGrafico.data.datasets[0].data = periodoTTP.value.split(',');
TipologiaTrafficoPeeringGrafico.update();
TipologiaTrafficoPeeringGraficoHD.options.plugins.title.text = 'Tipologia di traffico di peering nel ' + periodoTTP.options[periodoTTP.selectedIndex].text;
periodoTTP.value.split(',');
TipologiaTrafficoPeeringGraficoHD.data.datasets[0].data = periodoTTP.value.split(',');
TipologiaTrafficoPeeringGraficoHD.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;
});
});
