Bab 3 PENERAPAN INTERVAL, LINE, PIE, DAN ORG CHART PART I

Bab 3
PENERAPAN INTERVAL, LINE, PIE,
DAN ORG CHART

3.1 PENJELASAN HTML DAN JAVA SCRIPT

HTML

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan
untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam
sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis
dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata
dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan
perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan
di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard
Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara
luas untuk menampilkan halaman web.

HTML 7saat ini merupakan standar
Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web
Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee
Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

SEJARAH HTML

Pada tahun 1980 seorang ahli fisika, Tim Berners-Lee, dan juga seorang kontraktor
di CERN (Organisasi Eropa untuk Riset Nuklir) mengusulkan dan menyusun
ENQUIRE, sebuah sistem untuk ilmuwan CERN dalam membagi dokumen. Sembilan
tahun kemudian, Berners-Lee mengusulkan adanya sistem markah berbasis
internet.

Berners-Lee menspesifikasikan HTML dan menulis jaringan beserta perangkat lunaknya di akhir 1990. Pada tahun yang sama, Berners-Lee dan Robert Cailliau, insinyur sistem data CERN berkolaborasi dalam sebuah permintaan untuk pendanaan, namun tidak diterima secara resmi oleh CERN. Di catatan pribadinya sejak 1990 dia mendaftar"beberapa dari banyak daerah yang menggunakan hypertext" dan pertama-tama menempatkan sebuah ensiklopedia.

Penjelasan pertama yang dibagi untuk umum dari HTML adalah sebuah dokumen yang disebut "Tanda HTML", pertama kali disebutkan di Internet oleh Tim Berners-Lee pada akhir 1991. Tanda ini menggambarkan 18 elemen awal mula, versi sederhana dari HTML. Kecuali untuk tag hyperlink, yang sangat dipengaruhi oleh SGMLguid, in-house Standard Generalized Markup Language (SGML) berbasis format dokumen di CERN. Sebelas elemen ini masih ada di HTML 4.

HTML adalah bahasa markah yang digunakan peramban untuk menafsirkan dan menulis teks, gambar dan bahan lainnya ke dalam halaman web secara visual maupun suara. Karakteristik dasar untuk setiap item dari markah HTML didefinisikan di dalam peramban, dan karakteristik ini dapat diubah atau ditingkatkan dengan menggunakan tambahan halaman web desainer CSS.

Banyak elemen teks ditemukan di laporan teknis ISO pada tahun 1988 TR 9537 Teknik untuk menggunakan SGML, yang pada gilirannya meliputi fitur bahasa format teks awal seperti yang digunakan oleh komandan RUNOFF dikembangkan pada awal 1960-an untuk sistem operasi: perintah-perintah format ini berasal dari perintah yang digunakan oleh pengetik untuk memformat dokumen CTSS secara manual. Namun, konsep SGML dari markah umum didasarkan pada unsur-unsur daripada hanya efek cetak, dengan pemisahan struktur dan markah juga; HTML telah semakin bergerak ke arah ini dengan CSS.

JAVASCRIPT

JavaScript adalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi Live-Script, dan akhirnya menjadi JavaScript.

Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. Maka  dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript. JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX.

SEJARH JAVASCRIPT

JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape di bawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript. Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama Java-
Script, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript. JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX.

3.2 PENGGUNAAN INTERVAL CHART

3.2.1 LINE INTERVAL

 

Line Interval terkadang digunakan untuk menggambarkan variasi dari beberapa percobaan. Dalam grafik berikut, kita menggambarkan serangkaian primer dan interval 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]]);
// Interval data garis sempit (berguna untuk menampilkan data sumber mentah)
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>

Dalam data di atas, Anda dapat melihat bahwa kita melampirkan tiga identifier yang berbeda untuk seri tambahan: I0, i2, dan i3. Kita dapat menggunakan mereka untuk model seri yang berbeda; dibawah ini, kami memberi mereka warna yang berbeda dan ketebalan. Catatan : Pada umumnya, Itu adalah bentuk awal untuk menggunakan kembali ID seperti yang kita miliki di atas, dengan i2 digunakan empat kali. Ia bekerja, tetapi kami dapat mengubah perilaku ini di masa depan. Satu-satunya perbedaan adalah dalam pilihan :

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’,
};

3.2.2 BOX INTERVALInterval kotak diberikan kolom dalam tabel data anda sebagai satu set persegi panjang bersarang: kolom pertama dan terakhir membentuk persegi panjang terluar, dan kolom dalam membuat sebagai persegi panjang gelap dalam kotak berisinya.

 

var options = { series: [{’color’: ’#1A8763’}], intervals: { style: ’boxes’ },
legend: ’none’, };
Anda dapat membuat kotak lebih menonjol dengan intervals.lineWidth dan
intervals.barWidth pilihan:
Opsi yang sama :
var options = {
title:’Boxes, thick’,
curveType:’function’,
lineWidth: 4,
series: [{’color’: ’#1A8763’}],
intervals: { ’lineWidth’:2, ’barWidth’: 0.5, style: ’boxes’ },
legend: ’none’,
};Anda dapat membuat kotak lebih menonjol dengan intervals.lineWidth dan intervals.
barWidth pilihan :

 

Opsi yang sama :
var options = { title:’Boxes, thick’, curveType:’function’,
lineWidth: 4, series: [{’color’: ’#1A8763’}],
intervals: { ’lineWidth’:2, ’barWidth’: 0.5, style: ’boxes’ },
legend: ’none’, };

3.2.3 STICK INTERVAL

Stick Intervals menampilkan pasangan kolom sebagai satu set tongkat sejajar dengan
sumbu sasaran. Sebuah tongkat nol tinggi diberikan sebagai titik, yang dapat
ditekan dengan menetapkan pilihan pointSize ke nol.


 

Anda dapat membuat ini dengan model ’sticks’:
var options_sticks = {
title:’Sticks, default’,
curveType:’function’,
series: [{’color’: ’#E7711B’}],
intervals: { style: ’sticks’ },
legend: ’none’,
};

3.2.4 POINT INTERVALPoint intervals interval titik menampilkan data interval sebagai lingkaran kecil:

 

Pada point size dapat dikontrol dengan intervals.pointSize pilih. Di sini, adalah 2 :

var options_points = {
title:’Points, default’,
curveType:’function’,
lineWidth: 4,
series: [{’color’: ’#D3362D’}],
intervals: { ’style’:’points’, pointSize: 2 },
legend: ’none’,
};

ini adalah apa yang terlihat pada 8 :

 

3.2.5 AREA INTERVAL

Sebuah area interval merender data interval sebagai set berbayang daerah bersarang.
Bersarang pasangan kolom mirip dengan interval kotak, kecuali pada sebuah
jumlah kolom yang diperlukan.

 

Hal ini dicapai dengan menetapkan cara untuk ’area’:
var options = {
title:’Area, default’,
curveType:’function’,
series: [{’color’: ’#F1CA3A’}],
intervals: { ’style’:’area’ },
legend: ’none’,
};

3.2.6 COMBININNG INTERVAL STYLES

Untuk kustomisasi yang lebih besar, Anda dapat menggabungkan Interval styles
dalam satu grafik. Berikut adalah grafik yang menggabungkan interval daerah dan
bar:



 

Pada chart di atas, kami spesifikan sebuah model dari ’bars’ untuk interval ditandai
dengan i0 dan i1, dan sebuah ’area’ bentuk untuk i2. Lalu kita gunakan
pointSize untuk menutup bar:



 

Berikut bar interval garis grafik dengan interval i2 direpresentasikan sebagai
tongkat:

 
 
 Berikut ini adalah interval line chart yang menggunakan kotak opacity rendah
untuk menempatkan interval yang dipilih di latar belakang:





Kita dapat membuat sebuah "points and whiskers" interval chart dengan menentukan
opacity rendah model ’points’ untuk satu interval bersama dengan sebuah
boxWidth:




3.2.7 BOX PLOT

Pada akhirnya, berdasarkan grafik "points and whiskers" di atas, kitad apat gunakan box dan bar intervals untuk membuat sebuah dasar box plot chart. Baik histogram dan stem-and-leaf plots berguna untuk memberikan gambaran ukuran tendensi sentral dan kesimetrisan data pengamatan. Penyajian grafis lainnya yang bisa merangkum informasi lebih detail mengenai distribusi nilai-nilai data pengamatan adalah Box and Whisker Plots atau lebih sering disebut dengan BoxPlot atau
Box-Plot (kotak-plot) saja. Seperti namanya, Box and Whisker, bentuknya terdiri dari Box (kotak) dan whisker. Pada gambar di bawah, Box adalah kotak berwarna hijau dan whisker garis berwarna biru.



Boxplot merupakan ringkasan distribusi sampel yang disajikan secara grafis yang bisa menggambarkan bentuk distribusi data (skewness), ukuran tendensi sentral dan ukuran penyebaran (keragaman) data pengamatan. Terdapat 5 ukuran statistik yang bisa kita baca dari boxplot, yaitu:
• nilai minimum: nilai observasi terkecil
• Q1: kuartil terendah atau kuartil pertama
• Q2: median atau nilai pertengahan
Q3: kuartil tertinggi atau kuartil ketiga
• nilai maksimum: nilai observasi terbesar.
Selain itu, boxplot juga dapat menunjukkan ada tidaknya nilai outlier dan nilai ekstrim dari data pengamatan