.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;
}
The information contained in this document is taken from the "2021 Final Budget" and from the Report on the activity carried out and results achieved 2021 approved by the GARR Shareholders' Meeting in May 2022.
pdf
Download the 2021 annual report(22.72 MB)
All annual reports
List of graphs for GARR Network
- Backbone links aggregated capacity
- Access links aggregated capacity
- Backbone links capacity
- Backbone access links
- Total traffic volume
- Peering traffic volume
- Traffic volume of the accesses and peerings
- Peering traffic type
Choose
Backbone links aggregated capacity
Access links aggregated capacity
Backbone links capacity
Backbone access links
Total traffic volume
Peering traffic volume
Traffic volume of the accesses and peerings
Peering traffic type
Backbone links aggregated capacity
The graph shows the trend of the aggregated IP capacity of the GARR backbone.
Change period
Save image
Access links aggregated capacity
The graph shows the trend of aggregate access link capacity of the sites connected to GARR.
Change period
Save image
Backbone links capacity
The graph shows the composition of the network backbone links with a breakdown according to their capacity.
Select the year:
2021
2020
2019
2018
2017
2016
Save image
Backbone access links
The graph shows the composition of the access links of the sites connected to GARR with a breakdown based on their capacity.
Select the year:
2021
2020
2019
2018
2017
2016
Save image
Total traffic volume on the GARR network
The graph shows the trend of total traffic on the GARR network.
Save image
Traffic volume of the GARR network peering
The graph shows the trend on a monthly basis of the traffic volume generated by the peering of the GARR network. The items considered are upstream and direct peering traffic, traffic to and from Internet Exchanges and research peering traffic.
Select the year:
2021
2020
2019
2018
2017
2016
2015
2014
2013
Save image
Traffic volume of the accesses and peerings
The graph compares, on a monthly basis, the total user access traffic with the traffic of research peering.
Select the year:
2021
2020
2019
2018
2017
2016
2015
2014
2013
Save image
Peering traffic type
The graph shows the composition of the peering traffic on the GARR network.
Select the year:
2021
2020
2019
2018
2017
Save image
Keep reading
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 {
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('Total of ' + 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 + '%';
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 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;
if ((chart.isDatasetVisible(0) === true) && (chart.isDatasetVisible(1) === true) && (chart.isDatasetVisible(2) === false)) {
ctx.font = TooltipFont;
ctx.fontSize = TooltipFontSize;
ctx.fillStyle = TooltipLightColore;
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.font = TooltipFont;
ctx.fontSize = TooltipFontSize;
ctx.fillStyle = TooltipLightColore;
ctx.fillText(doppiettaBC, x - (doppiettaBCWidth / 2), y-19);
} else if ((chart.isDatasetVisible(0) === true) && (chart.isDatasetVisible(1) === false) && (chart.isDatasetVisible(2) === true)) {
ctx.font = TooltipFont;
ctx.fontSize = TooltipFontSize;
ctx.fillStyle = TooltipLightColore;
ctx.fillText(doppiettaAC, x - (doppiettaACWidth / 2), y-19);
} else if (chart.isDatasetVisible(0) && chart.isDatasetVisible(1) && chart.isDatasetVisible(2)) {
ctx.font = TooltipFont;
ctx.fontSize = TooltipFontSize;
ctx.fillStyle = TooltipLightColore;
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: ['2017', '2018', '2019', '2020', '2021'],
datasets: [{
label: 'Aggregated capacity (Gbps)',
data: [2550, 2950, 3020, 3130, 3130],
pointBackgroundColor: ArrayColoreBordo[0],
backgroundColor: ArrayColoreSfondo[0],
borderColor: ArrayColore[0],
borderWidth: 1,
fill: true,
stepped: 'middle',
}]
};
const CapacitaAggregataBackboneDataDue = {
tricodemo: 2,
labels: ['2012', '2013', '2014', '2015', '2016'],
datasets: [{
label: 'Aggregated capacity (Gbps)',
data: [548, 833, 860, 1890, 2040],
pointBackgroundColor: ArrayColoreBordo[0],
backgroundColor: ArrayColoreSfondo[0],
borderColor: ArrayColore[0],
borderWidth: 1,
fill: true,
stepped: 'middle',
}]
};
const optionsCAB = {
maintainAspectRatio: false,
layout: {
padding: {
right:SpazioDestra
}
},
plugins: {
title: {
text: 'Backbone links aggregated capacity',
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: 'Year',
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,
max: 3500,
title: {
text: 'Aggregated capacity (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+'-en.png';
}
}
}
const CapacitaAggregataBackboneConfig = {
type: 'line',
data: CapacitaAggregataBackboneDataUno,
options: optionsCAB,
plugins: [mostraEtichetteSopra, 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: 'Access links aggregated capacity',
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: 'Year',
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,
max: 4000,
title: {
text: 'Aggregated capacity (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+'-en.png';
}
}
}
const CapacitaAggregataAccessoDataUno = {
tricodemo: 1,
labels: ['2017', '2018', '2019', '2020', '2021'],
datasets: [{
label: 'Capacity (Gbps)',
data: [1580, 1840, 2000, 3440, 3700],
pointBackgroundColor: ArrayColoreBordo[1],
backgroundColor: ArrayColoreSfondo[1],
borderColor: ArrayColore[1],
borderWidth: 1,
fill: true,
stepped: 'middle',
}]
};
const CapacitaAggregataAccessoDataDue = {
tricodemo: 2,
labels: ['2012', '2013', '2014', '2015', '2016'],
datasets: [{
label: 'Capacity (Gbps)',
data: [479, 659, 836, 1150, 1360],
pointBackgroundColor: ArrayColoreBordo[1],
backgroundColor: ArrayColoreSfondo[1],
borderColor: ArrayColore[1],
borderWidth: 1,
fill: true,
stepped: 'middle',
}]
};
const CapacitaAggregataAccessoConfig = {
type: 'line',
data: CapacitaAggregataAccessoDataUno,
options: optionsCAA,
plugins: [mostraEtichetteSopra, 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: 'Backbone links capacity',
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: 'links',
}
}
}
const CapacitaLinkBackboneData = { // 2021
labels: ['≥ 100 Gbps', '< 100 Gbps', '≤ 10 Gbps', '≤ 1 Gbps'],
datasets: [{
label: '2021',
data: [10, 32, 76, 32],
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: 'Backbone links capacity',
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: 'links',
}
},
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+'-en.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: 'Backbone access links',
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: 'links',
}
}
}
const CapacitaLinkAccessoData = { // 2021
labels: ['< 0.1 Gbps', '≥ 0.1 Gbps', '≥ 1 Gbps', '≥ 10 Gbps'],
datasets: [{
label: '2021',
data: [12, 360, 334, 151],
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: 'Backbone access links',
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: 'links',
}
},
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+'-en.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: 'Total traffic volume on the GARR network',
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: 'Year',
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-en.png';
}
}
}
const VolumeTrafficoTotaleData = {
labels: ['2013', '2014', '2015', '2016', '2017', '2018', '2019','2020','2021'],
datasets: [{
label: 'Total traffic volume on the GARR network',
data: [118, 126, 172, 306, 301, 384, 492, 460, 506],
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: 'Traffic volume of the GARR network peering',
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
}
}
},
datalabels: {
color: '#fff',
formatter: function(value, context) {
return value.toLocaleString().replaceAll('.',',')
}
}
},
scales: {
x: {
beginAtZero: false,
title: {
text: 'Month',
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,
max: 500,
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 CanvasTemp = VolumeTrafficoPeeringGraficoHD;
var a = document.getElementById('VolumeTrafficoPeering_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'volume-traffico-peering-rete-GARR-en.png';
}
}
}
const VolumeTrafficoPeeringData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [{
label: 'Internet Exchange',
data: [51, 55, 67, 61, 65, 57, 52, 35, 63, 78, 84, 66],
backgroundColor: ArrayColore[3],
borderColor: ArrayColoreBordo[3],
borderWidth: BordoSpessore
},{
label: 'Research',
data: [245, 155, 192, 164, 195, 194, 218, 171, 172, 310, 333, 377],
backgroundColor: ArrayColore[0],
borderColor: ArrayColoreBordo[0],
borderWidth: BordoSpessore
},{
label: 'Upstream & Direct peerings',
data: [38, 45, 51, 48, 52, 41, 39, 26, 48, 61, 63, 52],
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: 'Traffic volume of the accesses and peerings',
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: 'Month',
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,
max:60,
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 = VolumeAccessiPeeringGraficoHD;
var a = document.getElementById('VolumeAccessiPeering_link');
a.href = CanvasTemp.toBase64Image();
a.download = 'volume-accesso-peering-rete-GARR-en.png';
}
}
}
const VolumeAccessiPeeringData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [{
label: 'Traffic volume of accesses and peerings',
data: [42, 33, 39, 36, 39, 38, 41, 31, 38, 55, 56, 59],
pointBackgroundColor: ArrayColoreBordo[0],
backgroundColor: ArrayColoreSfondo[0],
borderColor: ArrayColore[0],
borderWidth: 1,
borderDash: [4, 4],
fill: true,
tension: 0.5
},{
label: 'Research',
data: [25, 16, 19, 16, 20, 19, 22, 17, 17, 31, 33, 38],
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: 'Peering traffic type',
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: 'peerings',
}
}
}
const TipologiaTrafficoPeeringData = { // 2021
labels: ['Research', '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 TipologiaTrafficoPeeringConfig = {
type: 'doughnut',
data: TipologiaTrafficoPeeringData,
options: optionsTTP,
plugins: [mostraEtichettePie, sfondoBianco, LogoGARR, Contatore]
};
const TipologiaTrafficoPeeringGrafico = new Chart(
document.getElementById('TipologiaTrafficoPeering'),
TipologiaTrafficoPeeringConfig
);
const optionsTTPHD = {
maintainAspectRatio: false,
plugins: {
title: {
text: 'Peering traffic type',
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: 'peerings',
}
},
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+'-en.png';
}
}
}
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 = 'Backbone links aggregated capacity in ' + 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 = 'Backbone links aggregated capacity in ' + 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 = 'Access links aggregated capacity in ' + 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 = 'Access links aggregated capacity in ' + 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 = 'Traffic volume of the GARR network peering in ' + 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 = 'Traffic volume of the accesses and peerings in ' + 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 = 'Peering traffic type in ' + 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 = 'Peering traffic type in ' + 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;
});
});
