Ringkasan
Google Chart dapat menampilkan interval di sekitar deret. Metrik ini dapat digunakan untuk menggambarkan interval keyakinan, nilai minimum dan maksimum di sekitar nilai, sampling persentil, atau hal lainnya yang memerlukan margin bervariasi di sekitar deret.
Ada enam gaya interval: garis, batang, kotak, stik, titik, dan area. Di bawah ini, Anda akan melihat contohnya masing-masing. Dalam setiap contoh, kita akan menggunakan {i>dataset<i} yang sama, yang ditampilkan tanpa interval:
Diagram di atas sederhana: diagram ini memiliki tujuh rangkaian data, yang semuanya memiliki nilai penting yang sama. Selanjutnya, kita akan mengasumsikan bahwa deret pertama adalah rangkaian utama, dan enam deret lainnya dibandingkan melalui interval.
Interval Garis
Interval garis terkadang digunakan untuk menggambarkan varians dari beberapa eksperimen. Dalam diagram berikut, kami menggambarkan deret utama dan interval di sekitarnya.
<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>
Pada data di atas, Anda dapat melihat bahwa kami melampirkan tiga ID yang berbeda ke seri tambahan: i0, i2, dan i3. Kita dapat menggunakannya untuk menata gaya seri
tersebut secara berbeda; di bawah ini, kami memberinya warna dan
ketebalan yang berbeda.
Catatan: Secara umum, menggunakan kembali
ID seperti yang kita miliki tidaklah baik, karena i2 digunakan empat kali. Ini
akan berfungsi, tetapi kami mungkin mengubah perilaku ini di masa mendatang.
Satu-satunya perbedaan adalah pada opsinya:
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',
};
Interval Batang
Interval batang membuat batang error di sekitar data Anda. Kolom pertama dan terakhir pada interval digambar sebagai batang lebar yang sejajar dengan sumbu domain, dan kolom bagian dalam digambar sebagai "tick" yang lebih pendek. "stick" ditambahkan untuk menggabungkan batang lebar (jika kedua batang ini memiliki nilai yang sama, stick akan dirender sebagai titik, kecuali jika opsi pointSize adalah nol).
Lebar batang horizontal yang sesuai dengan kolom pertama dan
terakhir dikontrol dengan intervals.barWidth, dan
lebar batang horizontal yang sesuai dengan kolom bagian dalam
dikontrol dengan intervals.shortBarWidth. Jika hal tersebut dihilangkan, Anda akan mendapatkan diagram seperti di atas dengan opsi di bawah ini:
var options_bars = {
title: 'Bars, default',
curveType: 'function',
series: [{'color': '#D9544C'}],
intervals: { style: 'bars' },
legend: 'none',
};
Interval Kotak
Interval kotak merender kolom dalam tabel data Anda sebagai sekumpulan persegi panjang bertingkat: kolom pertama dan terakhir membentuk persegi panjang terluar, dan kolom dalam dirender sebagai persegi panjang yang lebih gelap di dalam kotak yang menampungnya.
Berikut cara menentukan interval kotak:
var options = {
series: [{'color': '#1A8763'}],
intervals: { style: 'boxes' },
legend: 'none',
};
Anda dapat membuat kotak lebih terlihat dengan
opsi intervals.lineWidth dan
intervals.barWidth:
Opsi yang relevan:
var options = {
title:'Boxes, thick',
curveType:'function',
lineWidth: 4,
series: [{'color': '#1A8763'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
legend: 'none',
};
Interval Tetap
Interval stik menampilkan pasangan kolom sebagai
kumpulan stik yang sejajar dengan sumbu target. Stik dengan tinggi nol
dirender sebagai titik, yang dapat disembunyikan dengan menyetel
opsi pointSize ke nol.
Anda dapat membuatnya dengan style dari
'sticks':
var options_sticks = {
title:'Sticks, default',
curveType:'function',
series: [{'color': '#E7711B'}],
intervals: { style: 'sticks' },
legend: 'none',
};
Interval Titik
Interval titik menampilkan data interval sebagai lingkaran kecil:
Ukuran titik dapat dikontrol dengan
opsi intervals.pointSize. Jadi, hasilnya adalah 2:
var options_points = {
title:'Points, default',
curveType:'function',
lineWidth: 4,
series: [{'color': '#D3362D'}],
intervals: { 'style':'points', pointSize: 2 },
legend: 'none',
};
Berikut tampilannya pada angka 8:
Interval Area
Interval area merender data interval sebagai kumpulan area berarsir bertingkat. Penyusunan pasangan kolom mirip dengan interval kotak, hanya saja diperlukan jumlah kolom genap.
Hal ini dilakukan dengan menetapkan style ke 'area':
var options = {
title:'Area, default',
curveType:'function',
series: [{'color': '#F1CA3A'}],
intervals: { 'style':'area' },
legend: 'none',
};
Menggabungkan Gaya Interval
Untuk penyesuaian yang lebih besar lagi, Anda dapat menggabungkan gaya interval dalam satu diagram.
Berikut adalah diagram yang menggabungkan interval luas dan batang:
Pada diagram di atas, kami menentukan style dari 'bars' untuk interval yang diberi tag dengan i0 dan i1, serta gaya 'area' untuk i2. Lalu, kita menggunakan pointSize untuk
membatasi batang:
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',
};
Berikut adalah diagram garis interval batang dengan interval i2
yang diwakili sebagai stik:
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',
};
Berikut adalah diagram garis interval yang menggunakan kotak opasitas rendah untuk menempatkan interval yang dipilih di latar belakang:
// 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',
};
Kita dapat membuat diagram interval "titik dan whiskers" dengan
menentukan gaya 'points' opasitas rendah untuk satu interval
bersama dengan 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',
};
Plot Kotak
Terakhir, berdasarkan diagram "titik dan whiskers" di atas, kita dapat menggunakan interval kotak dan batang untuk membuat diagram box plot dasar.
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);
}