Présentation
Les graphiques Google peuvent afficher des intervalles autour d'une série. Elles peuvent être utilisées pour représenter des intervalles de confiance, des valeurs minimale et maximale autour d'une valeur, un échantillonnage de centile ou tout autre élément nécessitant une marge variable autour d'une série.
Il existe six styles d'intervalle: ligne, barre, cadre, stick, point et aire. Vous trouverez ci-dessous des exemples pour chaque méthode. Dans chaque exemple, nous utiliserons le même ensemble de données, comme indiqué ici 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 supposerons que la première série est la série principale et que les six autres sont comparées par le biais d'intervalles.
Intervalles entre les lignes
Les intervalles de ligne sont parfois utilisés pour illustrer la variance de plusieurs tests. Le graphique suivant illustre une série principale et des intervalles autour.
<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 joint trois identifiants différents à la série supplémentaire : i0, i2 et i3. Nous pouvons les utiliser pour styliser ces séries différemment. Nous leur donnons ci-dessous différentes couleurs et épaisseurs.
Remarque:En règle générale, il est déconseillé d'utiliser les ID comme indiqué ci-dessus, i2 étant utilisé quatre fois. Cela fonctionne, mais nous pourrons modifier 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 entre barres
Les intervalles entre barres créent des barres d'erreur autour de vos données. Les première et dernière colonnes de l'intervalle sont représentées par des barres larges parallèles à l'axe du domaine, et les colonnes intérieures sous forme de "ticks" plus courts. Un "stick" est ajouté pour joindre les barres larges (si ces deux barres ont la même valeur, le stick est affiché sous forme de point, sauf si l'option pointSize est nulle).
La largeur des barres horizontales correspondant à la première et à la dernière colonne est contrôlée par intervals.barWidth, et la largeur des barres horizontales des colonnes intérieures est contrôlée par intervals.shortBarWidth. Si vous les omettez, un graphique semblable à celui présenté ci-dessus s'affiche:
var options_bars = {
title: 'Bars, default',
curveType: 'function',
series: [{'color': '#D9544C'}],
intervals: { style: 'bars' },
legend: 'none',
};
Intervalles entre les cases
Les intervalles entre les cases affichent les colonnes de votre tableau de donné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 intérieures s'affichent sous forme de rectangles plus sombres dans leur cadre conteneur.
Pour spécifier des intervalles, procédez comme suit:
var options = {
series: [{'color': '#1A8763'}],
intervals: { style: 'boxes' },
legend: 'none',
};
Vous pouvez rendre les cadres plus visibles grâce aux 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 de pointe
Les intervalles dans les crosses affichent des paires de colonnes parallèlement à l'axe cible. Un stick de hauteur zéro est affiché sous forme de 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 entre les points
Les intervalles entre les points affichent les données de l'intervalle sous forme de petits cercles:
La taille du point peut être contrôlée avec l'option intervals.pointSize. Voici:
var options_points = {
title:'Points, default',
curveType:'function',
lineWidth: 4,
series: [{'color': '#D3362D'}],
intervals: { 'style':'points', pointSize: 2 },
legend: 'none',
};
Voici à quoi il ressemble:
Intervalles entre zones
Un intervalle de surface 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 entre les cases, sauf qu'un nombre pair de colonnes est requis.
Pour cela, définissez style sur 'area' :
var options = {
title:'Area, default',
curveType:'function',
series: [{'color': '#F1CA3A'}],
intervals: { 'style':'area' },
legend: 'none',
};
Combiner les 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 les intervalles et les intervalles de barres:
Dans le graphique ci-dessus, nous spécifions une style de 'bars' pour les intervalles tagués avec i0 et i1, et un style 'area' pour i2. Ensuite, nous utilisons pointSize pour limiter 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 intervalle à barres, avec les intervalles i2 représentés par des sticks:
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 basé sur des intervalles 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, ainsi qu'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',
};
Représentation graphique
Enfin, en nous basant sur le graphique "Points et moustaches" ci-dessus, nous pouvons utiliser des intervalles et des intervalles pour créer un graphique 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);
}