Genel bakış
Google Grafikleri, bir serinin etrafındaki aralıkları görüntüleyebilir. Güven aralıklarını, minimum ve maksimum değerleri, yüzdelik dilim örneklemeyi veya bir seri etrafında değişen kenar boşlukları gerektiren herhangi bir şeyi göstermek için kullanılabilirler.
Altı aralık stili vardır: çizgi, çubuk, kutu, çubuk, nokta ve alan. Aşağıda her biriyle ilgili örnekler verilmiştir. Her örnekte, aynı veri kümesini kullanacağız ve burada herhangi bir aralık olmadan gösterilmektedir:
Yukarıdaki grafik basittir: Hepsi eşit önemde olan yedi veri dizisi vardır. Sıradaki bölümde, ilk serinin birincil seri olduğunu, diğer altı serinin ise aralıklar aracılığıyla karşılaştırıldığını varsayacağız.
Çizgi Aralıkları
Çizgi aralıkları bazen birden fazla denemenin varyansını göstermek için kullanılır. Aşağıdaki grafikte bir birincil seriyi ve çevresindeki aralıkları gösteriyoruz.
<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, tamamlayıcı seriye üç farklı tanımlayıcı eklediğimizi görebilirsiniz: i0, i2 ve i3. Bunları kullanarak bu seriyi farklı şekillerde
stillandırabiliriz; aşağıda onlara farklı renk ve kalınlıklar veriyoruz.
Not: Genel olarak, yukarıda belirttiğimiz gibi kimliklerin yeniden kullanılması uygun değildir. i2 dört kez kullanılır. Bu yöntem işe yarar ancak gelecekte bu davranışı değiştirebiliriz.
Tek fark seçeneklerdir:
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 geniş çubuklar
ve iç sütunlar daha kısa "kene işaretleri" olarak çizilir. Geniş çubukları birleştirmek için bir "çubuk" eklenir (bu iki çubuk aynı değere sahipse pointSize seçeneği sıfır olmadığı sürece çubuk bir nokta olarak oluşturulur).
İlk ve son sütunlara karşılık gelen yatay çubukların genişliği intervals.barWidth ile kontrol edilirken, iç sütunlara karşılık gelen yatay çubukların genişliği intervals.shortBarWidth ile kontrol edilir. Bunlar atlandığında, aşağıdaki seçeneklerle yukarıdaki gibi bir grafik elde edersiniz:
var options_bars = {
title: 'Bars, default',
curveType: 'function',
series: [{'color': '#D9544C'}],
intervals: { style: 'bars' },
legend: 'none',
};
Kutu Aralıkları
Veri tablonuzda, iç içe yerleştirilmiş bir dikdörtgen grubu olarak oluşturulan kutu aralıkları: İlk ve son sütunlar en dıştaki dikdörtgeni oluşturur ve iç sütunlar, kapsayıcı kutuları içinde daha koyu dikdörtgenler olarak oluşturulur.
Kutu 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çenekleriyle 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',
};
Çubuk Aralıkları
Çubuk aralıkları, sütun çiftlerini hedef eksene paralel çubuklar olarak gösterir. Yüksekliği sıfır olan bir çubuk nokta olarak oluşturulur. Bu çubuk, pointSize seçeneği sıfıra ayarlanarak basılabilir.
Bunları 'sticks' style ile oluşturabilirsiniz:
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örüntüler:
Nokta boyutu, intervals.pointSize seçeneğiyle kontrol edilebilir. 2. devre:
var options_points = {
title:'Points, default',
curveType:'function',
lineWidth: 4,
series: [{'color': '#D3362D'}],
intervals: { 'style':'points', pointSize: 2 },
legend: 'none',
};
8'de şöyle görünüyor:
Alan Aralıkları
Alan aralığı, aralık verilerini iç içe yerleştirilmiş gölgeli alanlar grubu olarak oluşturur. Sütun çiftlerinin iç içe yerleştirilmesi, kutu aralıklarına benzerdir. Tek fark, çift sayıda sütunun gerekli olmasıdır.
Bu işlem, style politikasının 'area' değerine ayarlanmasıyla gerçekleştirilir:
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.
Aşağıda, alan ve çubuk aralıklarını birleştiren bir grafik verilmiştir:
Yukarıdaki grafikte, i0 ve i1 ile etiketlenen aralıklar için 'bars' için style ve i2 için 'area' stili belirtiyoruz. Daha sonra, çubukları sınırlamak için pointSize kodunu kullanırız:
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',
};
i2 aralıklarının çubuk olarak gösterildiği bir çubuk aralığı çizgi grafiğini aşağıda görebilirsiniz:
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',
};
Seçili aralıkları arka plana yerleştirmek için düşük opaklığa sahip kutular kullanan aralıklı çizgi grafiğini aşağıda görebilirsiniz:
// 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ık için boxWidth ile birlikte düşük opaklığa sahip 'points' stili belirterek "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 Grafiği
Son olarak, yukarıdaki "noktalar ve bıyıklar" grafiğine göre, kutu ve çubuk aralıklarını kullanarak temel bir kutu grafiği oluşturabiliriz.
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);
}