Genel bakış
Google Listeleri bir serinin etrafında aralıklar gösterebilir. Bunlar; güven aralıklarını, bir değerin çevresindeki minimum ve maksimum değerleri, yüzdelik örneklemeyi veya bir serinin değişken marjını gerektiren diğer öğeleri göstermek için kullanılabilir.
Altı aralık stili vardır: çizgi, çubuk, kutu, çubuk, nokta ve alan. Aşağıda her biriyle ilgili örnekler verilmiştir. Her örnekte, herhangi bir aralık olmadan burada gösterilen aynı veri kümesini kullanacağız:
Yukarıdaki tablo basittir: Her biri önem açısından eşit olan yedi veri dizisi içerir. Sonraki örnekte ilk serinin birincil dizi, diğer altının da aralıklar aracılığıyla karşılaştırıldığını varsayarız.
Satır Aralıkları
Satır aralıkları bazen birden fazla denemenin varyansını göstermek için kullanılır. Aşağıdaki grafikte birincil seri ve aralıkları verilmiştir.
<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>
Yukarıdaki verilerde, ek serilere üç farklı tanımlayıcı eklediğimizi görebilirsiniz: i0,
i2 ve i3. Bunları, bu serileri farklı şekillerde
tasarlamak için kullanabiliriz. Aşağıda onlara farklı renkler ve kalınlıklar veriyoruz.
Not: Genellikle, yukarıda sahip olduğumuz şekilde kimlikleri yeniden kullanmak kötü bir davranıştır ve i2 dört kez kullanılmaktadır. Bu şekilde çalışır, ancak gelecekte bu davranışı değiştirebiliriz.
Tek fark seçenekler arasındaki fark:
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',
};
Çubuk Aralıkları
Çubuk aralıkları, verilerinizin etrafında hata çubukları oluşturur. Aralığın ilk ve son sütunları, alan eksenine paralel olarak geniş çubuklar olarak, iç sütunlar ise daha kısa "işaretler" olarak çizilir. Geniş çubukları birleştirmek için bir "çubuk" eklenir (pointSize seçeneği sıfır olmadığı sürece bu iki çubuk aynı değere sahipse çubuk, nokta olarak oluşturulur).
İlk ve son sütunlara karşılık gelen yatay çubukların genişliği intervals.barWidth ve iç sütunlara karşılık gelen yatay çubukların genişliği intervals.shortBarWidth ile kontrol edilir. Bu değişiklikler kaldırıldığında yukarıdaki gibi bir grafik açılır ve şu seçenekler gösterilir:
var options_bars = {
title: 'Bars, default',
curveType: 'function',
series: [{'color': '#D9544C'}],
intervals: { style: 'bars' },
legend: 'none',
};
Box Aralıkları
Veri tablonuzdaki sütunlar, iç içe yerleştirilmiş bir dizi dikdörtgen olarak kutu aralıklarında oluşturulur: İlk ve son sütunlar en dıştaki dikdörtgeni, iç sütunlar ise içerdikleri kutularda koyu dikdörtgenler olarak oluşturulur.
Box aralıklarının nasıl belirtileceği aşağıda açıklanmıştır:
var options = {
series: [{'color': '#1A8763'}],
intervals: { style: 'boxes' },
legend: 'none',
};
intervals.lineWidth ve intervals.barWidth seçeneklerini kullanarak kutuları daha belirgin hale getirebilirsiniz:
İlgili seçenekler:
var options = {
title:'Boxes, thick',
curveType:'function',
lineWidth: 4,
series: [{'color': '#1A8763'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
legend: 'none',
};
Yapışkan Aralıklar
Yapışma aralıkları, sütun çiftlerini hedef eksene paralel bir çubuk çubuğu olarak gösterir. Yüksekliğe sahip bir çubuk nokta olarak oluşturulur. Bu, pointSize seçeneğinin sıfır olarak ayarlanmasıyla engellenebilir.
Bunları şu şekilde oluşturabilirsiniz: style/'sticks':
var options_sticks = {
title:'Sticks, default',
curveType:'function',
series: [{'color': '#E7711B'}],
intervals: { style: 'sticks' },
legend: 'none',
};
Nokta Aralıkları
Nokta aralıkları, aralık verilerini küçük daireler olarak gösterir:
Nokta boyutu, intervals.pointSize seçeneği ile kontrol edilebilir. Burada 2:
var options_points = {
title:'Points, default',
curveType:'function',
lineWidth: 4,
series: [{'color': '#D3362D'}],
intervals: { 'style':'points', pointSize: 2 },
legend: 'none',
};
Saat 8'deki gibi görünür:
Alan Aralıkları
Alan aralığı, aralık verilerini iç içe yerleştirilmiş gölgeli alanlar olarak oluşturur. İki sütun sütunu iç içe yerleştirmek kutu sayılarına benzer, ancak tek sayı için sütun gerekir.
Bunun için style, 'area' ayarlanır:
var options = {
title:'Area, default',
curveType:'function',
series: [{'color': '#F1CA3A'}],
intervals: { 'style':'area' },
legend: 'none',
};
Aralık Stillerini Birleştirme
Daha da fazla özelleştirme için aralık stillerini tek bir grafikte birleştirebilirsiniz.
Alan ve çubuk aralıklarını birleştiren bir grafik:
Yukarıdaki grafikte i0 ve i1 ile etiketlenmiş aralıklar için style 'bars' ve i2 için 'area' stili belirtiyoruz. Ardından, çubukları sınırlamak için
pointSize kullanıyoruz:
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',
};
Burada, çubuk olarak temsil edilen i2 aralıklarının bulunduğu bir çubuk aralık çizgi grafiği gösterilmektedir:
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',
};
Aşağıda, seçilen aralıkları arka plana yerleştirmek için düşük opaklık kutuları kullanan bir aralık çizgi grafiği verilmiştir:
// 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',
};
Bir aralıkla ilgili olarak düşük opaklık 'points' stili boxWidth ile birlikte "noktalar ve bıyıklar" aralık grafiği oluşturabiliriz:
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',
};
Kutu Alanı
Son olarak, yukarıdaki "puanlar ve bıyıklar" grafiğini temel alarak, temel bir kutu grafiği oluşturmak için kutu ve çubuk aralıkları kullanabiliriz.
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);
}