Présentation
Les graphiques Google peuvent afficher des intervalles autour d'une série. Elles peuvent être utilisées pour représenter les intervalles de confiance, les valeurs minimales et maximales autour d'une valeur, l'échantillonnage au centile ou tout autre élément nécessitant une marge variable autour d'une série.
Il existe six styles d'intervalle: ligne, barre, boîte, barrette, point et zone. Vous trouverez ci-dessous des exemples pour chaque méthode. Dans chaque exemple, nous allons utiliser le même ensemble de données, affiché sans intervalles:
Le graphique ci-dessus est simple: il comporte sept séries de données, toutes d'importance égale. Dans ce qui suit, nous supposons que la première série est la série principale et que les six autres y sont comparées via des intervalles.
Intervalles entre les lignes
Les intervalles de ligne sont parfois utilisés pour représenter la variance de plusieurs expériences. Le graphique suivant illustre une série primaire et les intervalles qui l'entourent.
<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>
Dans les données ci-dessus, vous pouvez voir que nous avons associé trois identifiants différents à la série supplémentaire: i0, i2 et i3. Nous pouvons les utiliser pour appliquer un style différent à ces séries. Ci-dessous, nous leur attribuons différentes couleurs et épaisseurs.
Remarque:En général, il n'est pas utile de réutiliser des ID comme indiqué ci-dessus, i2 étant utilisé quatre fois. Cela fonctionne, mais il est possible que nous modifiions ce comportement à l'avenir.
La seule différence réside dans les options:
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',
};
Intervalles des barres
Les intervalles de barres créent des barres d'erreur autour de vos données. Les première et dernière colonnes de l'intervalle sont dessinées sous forme de barres larges parallèles à l'axe du domaine, et les colonnes internes sont dessinées sous forme de "graduations" plus courtes. Un "stick" est ajouté pour joindre les barres larges (si ces deux barres ont la même valeur, le stick s'affiche en tant que point, sauf si l'option pointSize est égale à zéro).
La largeur des barres horizontales correspondant aux première et dernière colonnes est contrôlée avec intervals.barWidth, et la largeur des barres horizontales correspondant aux colonnes internes est contrôlée avec intervals.shortBarWidth. S'ils sont omis, un graphique semblable à celui ci-dessus s'affiche, avec les options ci-dessous:
var options_bars = {
title: 'Bars, default',
curveType: 'function',
series: [{'color': '#D9544C'}],
intervals: { style: 'bars' },
legend: 'none',
};
Intervalles entre les cases
Dans votre table de données, les intervalles de cases sont affichées sous la forme d'un ensemble de rectangles imbriqués: les première et dernière colonnes forment le rectangle le plus externe, et les colonnes internes s'affichent sous forme de rectangles plus sombres dans leur boîte conteneur.
Pour spécifier des intervalles de champ, procédez comme suit:
var options = {
series: [{'color': '#1A8763'}],
intervals: { style: 'boxes' },
legend: 'none',
};
Vous pouvez améliorer la proéminence des cases à l'aide des options intervals.lineWidth et intervals.barWidth:
Les options pertinentes:
var options = {
title:'Boxes, thick',
curveType:'function',
lineWidth: 4,
series: [{'color': '#1A8763'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
legend: 'none',
};
Intervalles entre les bâtons
Les intervalles de bâton affichent des paires de colonnes sous la forme d'un ensemble de bâtons parallèles à l'axe cible. Un stick de hauteur nulle s'affiche sous la forme d'un point, que vous pouvez supprimer en définissant l'option pointSize sur zéro.
Vous pouvez les créer avec un style de 'sticks':
var options_sticks = {
title:'Sticks, default',
curveType:'function',
series: [{'color': '#E7711B'}],
intervals: { style: 'sticks' },
legend: 'none',
};
Intervalles de points
Les intervalles de points affichent les données d'intervalle sous forme de petits cercles:
La taille du point peut être contrôlée à l'aide de l'option intervals.pointSize. Ici, c'est deux:
var options_points = {
title:'Points, default',
curveType:'function',
lineWidth: 4,
series: [{'color': '#D3362D'}],
intervals: { 'style':'points', pointSize: 2 },
legend: 'none',
};
Voici ce à quoi cela ressemble à 8:
Intervalles en fonction de la zone
Un intervalle d'aire affiche les données d'intervalle sous la forme d'un ensemble de zones ombrées imbriquées. L'imbrication de paires de colonnes est semblable à celle des intervalles de boîte, à la différence qu'un nombre pair de colonnes est requis.
Pour ce faire, définissez style sur 'area' :
var options = {
title:'Area, default',
curveType:'function',
series: [{'color': '#F1CA3A'}],
intervals: { 'style':'area' },
legend: 'none',
};
Combiner des styles d'intervalle
Pour une personnalisation encore plus poussée, vous pouvez combiner des styles d'intervalles dans un même graphique.
Voici un graphique qui combine des intervalles en aires et en barres:
Dans le graphique ci-dessus, nous spécifions un style de 'bars' pour les intervalles avec les tags i0 et i1, et un style 'area' pour i2. Nous utilisons ensuite pointSize pour plafonner les barres:
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',
};
Voici un graphique en courbes avec intervalles à barres, avec les intervalles i2 représentés par des bâtons:
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',
};
Voici un graphique en courbes d'intervalle qui utilise des zones à faible opacité pour placer les intervalles sélectionnés en arrière-plan:
// 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',
};
Nous pouvons créer un graphique d'intervalle "points et moustaches" en spécifiant un style 'points' à faible opacité pour un intervalle avec 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',
};
Graphique en boîte
Enfin, sur la base du graphique "points et moustaches" ci-dessus, nous pouvons utiliser des intervalles en boîte et en barres pour créer un graphique en boîte de 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);
}