Panoramica
I grafici di Google possono mostrare intervalli intorno a una serie. Possono essere utilizzati per rappresentare intervalli di confidenza, valori minimi e massimi in base a un valore, campionamento percentile o qualsiasi altro elemento che richieda un margine variabile all'interno di una serie.
Esistono sei stili di intervallo: linea, barra, casella, stick, punto e area. Di seguito sono riportati alcuni esempi. In ogni esempio utilizzeremo lo stesso set di dati, qui mostrato senza intervalli:
Il grafico sopra è semplice: contiene sette serie di dati, tutte con pari importanza. In questo caso, supponiamo che la prima sia la serie principale e che le altre sei vengano confrontate tramite intervalli.
Intervalli di linee
A volte vengono usati gli intervalli di linee per rappresentare la varianza di più esperimenti. Nel grafico qui sotto viene illustrata una serie principale e gli intervalli circostanti.
<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 collegato tre diversi identificatori alle serie supplementari: i0, i2 e i3. Possiamo utilizzarle per diversificare la serie; di seguito, diamo colori e spessori diversi.
Nota: in generale, è una forma scadente riutilizzare gli ID come abbiamo fatto sopra, mentre i2 viene utilizzato quattro volte. Funziona, ma potremmo modificare questo comportamento in futuro.
L'unica differenza riguarda le 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 di barre
Gli intervalli di barra creano barre di errore attorno 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 tracciate come "tick" più brevi. Viene aggiunta una chiavetta per unire le barre larghe (se queste due barre hanno lo stesso valore, la levetta viene visualizzata come punto, a meno che l'opzione pointSize non sia zero).
La larghezza delle barre orizzontali corrispondenti alla prima e all'ultima colonna viene controllata con intervals.barWidth, mentre la larghezza delle barre orizzontali corrispondenti alle colonne interne viene controllata con intervals.shortBarWidth. Se questi elementi vengono omessi, otterrai un grafico come quello riportato sopra che mostra le opzioni seguenti:
var options_bars = {
title: 'Bars, default',
curveType: 'function',
series: [{'color': '#D9544C'}],
intervals: { style: 'bars' },
legend: 'none',
};
Intervalli di casella
Gli intervalli di casella hanno visualizzato le colonne nella tabella dei dati come un insieme di rettangoli nidificati: la prima e l'ultima colonna formano il rettangolo più esterno e le colonne interne vengono visualizzate come rettangoli più scuri all'interno della casella di contenimento.
Per specificare gli intervalli di caselle:
var options = {
series: [{'color': '#1A8763'}],
intervals: { style: 'boxes' },
legend: 'none',
};
Puoi aumentare la visibilità delle caselle 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 di durata
Gli intervalli di base mostrano le coppie di colonne come una serie di levette parallele all'asse target. Una levetta di altezza pari a zero viene visualizzata come punto, il che può essere soppresso impostando l'opzione pointSize su zero.
Puoi crearne una con una 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 del punto può essere controllata con l'opzione intervals.pointSize. Eccone 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 all'indirizzo 8:
Intervalli di aree
Un intervallo di area mostra i dati dell'intervallo come un insieme di aree ombreggiate nidificate. La nidificazione di coppie di colonne è simile a quella degli intervalli di casella, ad eccezione del fatto che è richiesto un numero di colonne pari.
Per farlo, 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 intervalli a intervalli all'interno di un grafico.
Ecco un grafico che combina gli intervalli di area e barra:
Nel grafico sopra, specifichiamo un style di 'bars' per gli intervalli taggati con i0 e i1 e uno stile 'area' per i2. Poi usiamo pointSize per fissare
i limiti:
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',
};
Di seguito è riportato un grafico a linee con gli intervalli di i2 rappresentati come bastoncini:
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 con intervalli che utilizza caselle di opacità bassa per posizionare intervalli selezionati in background:
// 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 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',
};
Tracciato a cassetta
Infine, sulla base del grafico sopra "punti e baffi", possiamo utilizzare intervalli di riquadri e barre per creare un grafico di base di box.
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);
}