Panoramica
I grafici di Google possono visualizzare intervalli intorno a una serie. Possono essere utilizzate per rappresentare gli intervalli di confidenza, i valori minimo e massimo intorno a un valore, il campionamento del percentile o qualsiasi altra cosa che richieda un margine variabile intorno a una serie.
Esistono sei stili di intervallo: linea, barra, casella, bastoncino, punto e area. Di seguito ne trovi alcuni esempi. In ogni esempio utilizzeremo lo stesso set di dati, qui mostrato senza intervalli:
Il grafico riportato sopra è semplice: contiene sette serie di dati, tutte di pari importanza. In quello che segue, supponiamo che la prima serie sia la serie principale e le altre sei siano confrontate con la serie tramite intervalli.
Intervalli di riga
Gli intervalli di linea vengono talvolta utilizzati per rappresentare la varianza di più esperimenti. Nel grafico che segue viene mostrata una serie principale e gli intervalli intorno a essa.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'values');
data.addColumn({id:'i0', type:'number', role:'interval'});
data.addColumn({id:'i1', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addRows([
[1, 100, 90, 110, 85, 96, 104, 120],
[2, 120, 95, 130, 90, 113, 124, 140],
[3, 130, 105, 140, 100, 117, 133, 139],
[4, 90, 85, 95, 85, 88, 92, 95],
[5, 70, 74, 63, 67, 69, 70, 72],
[6, 30, 39, 22, 21, 28, 34, 40],
[7, 80, 77, 83, 70, 77, 85, 90],
[8, 100, 90, 110, 85, 95, 102, 110]]);
// The intervals data as narrow lines (useful for showing raw source data)
var options_lines = {
title: 'Line intervals, default',
curveType: 'function',
lineWidth: 4,
intervals: { 'style':'line' },
legend: 'none'
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
chart_lines.draw(data, options_lines);
}
</script>
</head>
<body>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>
</body>
</html>
Nei dati sopra riportati, puoi notare che abbiamo allegato tre diversi identificatori alle serie supplementari: i0, i2 e i3. Possiamo utilizzarli per creare uno stile diverso
per le serie; di seguito, assegniamo colori e
spessori diversi.
Nota: come abbiamo detto prima, riutilizzare gli ID
non è una buona forma in generale, dato che i2 viene utilizzato quattro volte. Funziona, ma potremmo modificare questo comportamento in futuro.
L'unica differenza sta nelle opzioni:
var options_lines = {
title: 'Line intervals, tailored',
lineWidth: 4,
curveType:'function',
interval: {
'i0': { 'style':'line', 'color':'#D3362D', 'lineWidth': 0.5 },
'i1': { 'style':'line', 'color':'#F1CA3A', 'lineWidth': 1 },
'i2': { 'style':'line', 'color':'#5F9654', 'lineWidth': 2 },
},
legend: 'none',
};
Intervalli tra le barre
Gli intervalli delle barre creano barre di errore intorno ai dati. La prima e l'ultima colonna dell'intervallo sono tracciate come barre larghe parallele all'asse del dominio, mentre le colonne interne sono rappresentate da "gradi" più brevi. Viene aggiunto uno "stick" per unire le barre larghe (se queste due barre hanno lo stesso valore, la levetta viene visualizzata come un punto, a meno che l'opzione pointSize non sia zero).
La larghezza delle barre orizzontali corrispondenti alla prima e all'ultima colonna è controllata con intervals.barWidth, mentre la larghezza delle barre orizzontali corrispondenti alle colonne interne viene controllata con intervals.shortBarWidth. Se questi valori vengono omessi, viene visualizzato un grafico come quello riportato sopra, con le seguenti opzioni:
var options_bars = {
title: 'Bars, default',
curveType: 'function',
series: [{'color': '#D9544C'}],
intervals: { style: 'bars' },
legend: 'none',
};
Intervalli delle caselle
Gli intervalli di caselle hanno visualizzato le colonne nella tabella dati come un insieme di rettangoli nidificati: la prima e l'ultima colonna formano il rettangolo più esterno, mentre le colonne interne vengono visualizzate come rettangoli più scuri all'interno del riquadro contenitore.
Ecco come specificare gli intervalli di caselle:
var options = {
series: [{'color': '#1A8763'}],
intervals: { style: 'boxes' },
legend: 'none',
};
Puoi mettere più in evidenza i riquadri con le opzioni intervals.lineWidth e intervals.barWidth:
Le opzioni pertinenti:
var options = {
title:'Boxes, thick',
curveType:'function',
lineWidth: 4,
series: [{'color': '#1A8763'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
legend: 'none',
};
Intervalli tra le barre
Gli intervalli di tratti mostrano coppie di colonne come
un insieme di tratti paralleli all'asse target. Uno stecco di altezza pari a zero viene
visualizzato come punto, che può essere soppresso impostando
l'opzione pointSize su zero.
Puoi crearli con un style di
'sticks':
var options_sticks = {
title:'Sticks, default',
curveType:'function',
series: [{'color': '#E7711B'}],
intervals: { style: 'sticks' },
legend: 'none',
};
Intervalli di punti
Gli intervalli di punti mostrano i dati dell'intervallo come piccoli cerchi:
La dimensione dei punti può essere controllata con
l'opzione intervals.pointSize. Ecco il numero 2:
var options_points = {
title:'Points, default',
curveType:'function',
lineWidth: 4,
series: [{'color': '#D3362D'}],
intervals: { 'style':'points', pointSize: 2 },
legend: 'none',
};
Ecco come si presenta al minuto 8:
Intervalli di aree
Un intervallo dell'area mostra i dati dell'intervallo come un insieme di aree ombreggiate nidificate. La nidificazione di coppie di colonne è simile a quella degli intervalli a scatola, tranne per il fatto che è richiesto un numero pari di colonne.
A questo scopo, imposta style su 'area':
var options = {
title:'Area, default',
curveType:'function',
series: [{'color': '#F1CA3A'}],
intervals: { 'style':'area' },
legend: 'none',
};
Combinare gli stili a intervalli
Per una personalizzazione ancora maggiore, puoi combinare gli stili degli intervalli in un grafico.
Ecco un grafico che combina intervalli di aree e barre:
Nel grafico riportato sopra, specifichiamo un style
di 'bars' per gli intervalli taggati con i0
e i1 e uno stile 'area' per i2. Quindi usiamo pointSize per limitare
le barre:
var options = {
title:'Bar/area interval chart',
curveType:'function',
intervals: { 'color':'series-color' },
interval: {
'i0': { 'color': '#4374E0', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
'i1': { 'color': '#E49307', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
'i2': { 'style':'area', 'curveType':'function', 'fillOpacity':0.3 }},
legend: 'none',
};
Ecco un grafico a linee a intervalli a barre con gli intervalli i2
rappresentati come tratti:
var options = {
title:'Sticks, horizontal',
curveType:'function',
lineWidth: 4,
series: [{'color': '#E7711B'}],
intervals: { 'lineWidth': 4, 'barWidth': 0.5 },
interval: {
'i2': { 'style':'sticks', 'color':'grey', 'boxWidth': 2.5,
'lineWidth': 1 }
},
legend: 'none',
};
Ecco un grafico a linee a intervalli che utilizza caselle con bassa opacità per posizionare gli intervalli selezionati sullo sfondo:
// Focus is the error bars, but boxes are visible in the background.
var options_boxes_background = {
title:'Background boxes',
curveType:'function',
lineWidth: 4,
series: [{'color': '#1A8763'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5 },
interval: {
'i2': { 'style':'boxes', 'color':'grey', 'boxWidth': 2.5,
'lineWidth': 0, 'fillOpacity': 0.2 }
},
legend: 'none',
};
Possiamo creare un grafico a intervalli "punti e baffi" specificando uno stile 'points' a bassa opacità per un intervallo insieme a un boxWidth:
var options = {
title:'Points and whiskers',
curveType:'function',
lineWidth: 4,
series: [{'color': '#D3362D'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5 },
interval: {
'i2': { 'style':'points', 'color':'grey', 'pointSize': 10,
'lineWidth': 0, 'fillOpacity': 0.3 }
},
legend: 'none',
};
Riquadro
Infine, sulla base del grafico "punti e baffi" riportato sopra, possiamo utilizzare intervalli a scatola e a barre per creare un grafico box plot di base.
var options = {
title:'Box Plot',
height: 500,
legend: {position: 'none'},
hAxis: {
gridlines: {color: '#fff'}
},
lineWidth: 0,
series: [{'color': '#D3362D'}],
intervals: {
barWidth: 1,
boxWidth: 1,
lineWidth: 2,
style: 'boxes'
},
interval: {
max: {
style: 'bars',
fillOpacity: 1,
color: '#777'
},
min: {
style: 'bars',
fillOpacity: 1,
color: '#777'
}
}
};
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawBoxPlot);
function drawBoxPlot() {
var array = [
['a', 100, 90, 110, 85, 96, 104, 120],
['b', 120, 95, 130, 90, 113, 124, 140],
['c', 130, 105, 140, 100, 117, 133, 139],
['d', 90, 85, 95, 85, 88, 92, 95],
['e', 70, 74, 63, 67, 69, 70, 72],
['f', 30, 39, 22, 21, 28, 34, 40],
['g', 80, 77, 83, 70, 77, 85, 90],
['h', 100, 90, 110, 85, 95, 102, 110]
];
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'series0');
data.addColumn('number', 'series1');
data.addColumn('number', 'series2');
data.addColumn('number', 'series3');
data.addColumn('number', 'series4');
data.addColumn('number', 'series5');
data.addColumn('number', 'series6');
data.addColumn({id:'max', type:'number', role:'interval'});
data.addColumn({id:'min', type:'number', role:'interval'});
data.addColumn({id:'firstQuartile', type:'number', role:'interval'});
data.addColumn({id:'median', type:'number', role:'interval'});
data.addColumn({id:'thirdQuartile', type:'number', role:'interval'});
data.addRows(getBoxPlotValues(array));
/**
* Takes an array of input data and returns an
* array of the input data with the box plot
* interval data appended to each row.
*/
function getBoxPlotValues(array) {
for (var i = 0; i < array.length; i++) {
var arr = array[i].slice(1).sort(function (a, b) {
return a - b;
});
var max = arr[arr.length - 1];
var min = arr[0];
var median = getMedian(arr);
// First Quartile is the median from lowest to overall median.
var firstQuartile = getMedian(arr.slice(0, 4));
// Third Quartile is the median from the overall median to the highest.
var thirdQuartile = getMedian(arr.slice(3));
array[i][8] = max;
array[i][9] = min
array[i][10] = firstQuartile;
array[i][11] = median;
array[i][12] = thirdQuartile;
}
return array;
}
/*
* Takes an array and returns
* the median value.
*/
function getMedian(array) {
var length = array.length;
/* If the array is an even length the
* median is the average of the two
* middle-most values. Otherwise the
* median is the middle-most value.
*/
if (length % 2 === 0) {
var midUpper = length / 2;
var midLower = midUpper - 1;
return (array[midUpper] + array[midLower]) / 2;
} else {
return array[Math.floor(length / 2)];
}
}
var options = {
title:'Box Plot',
height: 500,
legend: {position: 'none'},
hAxis: {
gridlines: {color: '#fff'}
},
lineWidth: 0,
series: [{'color': '#D3362D'}],
intervals: {
barWidth: 1,
boxWidth: 1,
lineWidth: 2,
style: 'boxes'
},
interval: {
max: {
style: 'bars',
fillOpacity: 1,
color: '#777'
},
min: {
style: 'bars',
fillOpacity: 1,
color: '#777'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('box_plot'));
chart.draw(data, options);
}