Bab3

Perangkat Lunak yang Mendukung Pembuatan Diagram

Perangkat lunak yang digunakan adalah Google Chart dengan menggunakan bahasa JavaScript dan HTML. Untuk materi stepped area chart kami menggunakan perangkat lunak microsoft exel, dimana microsoft excel termasuk dalam program google SpreadSheet.

1.1 Google Chart

Bagan atau chart memang mempunyai fungsi yang cukup penting dalam dunia statistik maupun analisis. Dengan ditampilkannya bagan maka representasi data akan terlihat secara jelas dan memungkinkan data menjadi mudah dibaca. Berkaitan dengan bagan, seorang web developer sebenarnya bisa membuatnya dengan native PHP language. Namun hasil yang ditampilkan pasti terlihat kaku dan kurang interaktif.

Bagi sebagian developer web, menampilkan bagan dengan memanfaatkan library chart akan mempunyai banyak kelebihan. Dari sisi estetika desain terlihat baik, dan interaksi data pun dapat terlihat teratur. Di internet terdapat banyak sekali library sejenis ini, namun tutorial pada artikel ini akan menjelaskan bagaimana caranya membuat bagan grafik yang dinamis menggunakan API dari Google, yakni Google Chart Tools.

Google Chart API adalah alat yang memungkinkan orang dengan mudah membuat grafik dari beberapa data dan menanamkan dalam sebuah halaman web. Google menciptakan PNG gambar grafik dari data dan parameter format dalam permintaan HTTP. Banyak jenis grafik yang didukung, dan dengan membuat permintaan ke tag gambar, orang hanya dapat mencakup grafik dalam halaman web.

Awalnya itu adalah perangkat internal untuk mendukung embedding cepat grafik dalam aplikasi Google sendiri (seperti Google Finance misalnya). Google pikir itu akan menjadi alat yang berguna untuk membuka pengembang web. Secara resmi diluncurkan pada tanggal 6 Desember 2007. Saat ini, garis, bar, pie, dan grafik radar, serta diagram Venn, pencar plot, sparklines, peta, google-o-meter, dan kode QR yang didukung. API ini ditinggalkan pada tahun 2012 dengan ketersediaan dijamin sampai April 2015. Setelah periode itu, Google berhak untuk mematikannya tanpa pemberitahuan, meskipun hingga April 2016, tidak ada rencana untuk melakukannya. Alternatif yang direkomendasikan oleh Google adalah Google Charts.

Charts Google adalah murni perpustakaan charting berdasarkan JavaScript dimaksudkan untuk meningkatkan aplikasi web dengan menambahkan kemampuan charting interaktif. Mendukung berbagai grafik. Grafik ditarik menggunakan SVG di browser standar seperti Chrome, Firefox, Safari, Internet Explorer (IE). Dalam warisan IE 6, VML digunakan untuk menggambar grafik.

http://chart.apis.google.com/chart?
chs=200x200
&chdlp=b
&chtt=Uberman
&chdl=Asleep|Awake
&chd=t:1,11,1,11,1,11,1,11,1,11,1,11
&cht=p
&chco=586F8E,7D858F,586F8E,7D858F,586F8E,7D858F,586F8E,7D858F,
586F8E,7D858F,586F8E,7D858F

Figure 1.1: Contoh Pembuatan Chart

1.2 JavaSript

JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript 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.

1.2.1 Sejarah 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 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.

1.2.2 Penulisan JavaScript

Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang dibuka dengan tag <script type = “text/javascript”>

<script type="text/javascript">
 alert("Halo Dunia!");
</script>

Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari JavaScript). Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal <head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut:

<script type="text/javascript" src="alamat.js">
</script>

Skrip di head

Skrip ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. Peletakkan skrip di head akan menjamin skrip dimuat terlebih dahulu sebelum dipanggil.

<html>
<head>
<script type="text/javascript">
...
</script>
</head>
</html>

Skrip di body

Skrip ini dieksekusi ketika halaman dimuat sampai di bagian <body>. Ketika menempatkan skrip pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian.

<html>
<head>
</head>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>

Jumlah JavaScript di <head> dan <body> yang ditempatkan pada dokumen tidak terbatas.

Skrip eksternal

Terkadang ada yang menginnginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman. Maka JavaScript dapat ditulis di file secara eksternal. Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokumen HTML. Berkas JavaScript tersebut disimpan dengan ekstensi .js.

JavaScript : js/xxx.js document.write(“pesan ini tampil ketika halaman diload”);

Untuk menggunakan eksternal JavaScript (.js) dipakai atribut “src” pada tag <script> pada halaman HTML-nya.

<html>
<head>
</head>
<body>
<script src="xxx.js">
</script>
<p>Script di atas berada di berkas "xxx.js" (eksternal) </p>
</body>
</html>

1.3 HTML

Hyper Text 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 pernagkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi web dengan perintah perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan penggunanya ole 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 di Jenewa).

1.3.1 Sejarah

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 ilmuan CERN dalam membagi dokumen. Sembilan tahun kemudian, Berners-Lee mengusulkan adanya sistem markah berbasis internet. Barners-Lee mengusulkan 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 akhitr 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 berasa; 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.

1.3.2 Kegunaan HTML

Dokumen HTML mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b> TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format di dalam halaman web daripada menentukan penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web.

Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasis Windows. Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat pada pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat dan berisi Grafika dan Pranala.

1.3.2.1 Menyunting Format Tulisan

HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah :

Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

Menampilkan tulisan dalam bentuk cetakan tebal

Menampilkan sekelompok kata dalam bentuk miring

Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik

Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

1.3.3 Tanda Pada HTML

Secara garis besar, terdapat 4 jenis elemen dari HTML :

Ada tiga macam pranala (link) yang dapat digunakan :

Pranala menuju bagian lain dari page.

Pranala menuju page lain dalam satu web site.

Pranala menuju resource atau web site yang berbeda.

Selain markup presentasional, markup yang lain tidak menentukan bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets.

1.3.4 Penulisan HTML

Untuk HTML 4 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head bgcolor=black text=white>
  <title>Selamat Datang HTML</title>
 </head>
 <body>
  <p>Halo dunia!</p>
 </body>
</html>

Untuk HTML 5

<!DOCTYPE HTML>
<html>
 <head style="background-color: black; color: white;">
  <title>Selamat Datang HTML</title>
 </head>
 <body>
  <p>Halo dunia!</p>
 </body>
</html>

1.3.4.1 Head

Dokumen HTML diapit oleh tag <HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul halaman pada titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword. Header juga memuat tag META yang biasanya dapat digunakan untuk menentukan informasi tertentu mengenai dokumen HTML. Anda bisa menentukan author name, keywords, dan lainnya pada tag META.

Contoh :

<meta name="author" content="ubuntu-online">

1.3.4.2 Body

Bagian BODY, yang dinyatakan dengan tag <BODY>…</BODY>, merupakan tubuh atau isi dari dokumen HTML di mana anda meletakan informasi yang akan ditampilkan pada browser.

1.3.4.3 Tag

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).

Tag biasanya merupakan suatu pasangan yang disebut dengan :

Tag awal, dinyatakan dalam bentuk <nama tag>

Tag akhir, dinyatakan dalam bentuk </nama tag>

Formatnya: <nama tag> teks yang ditampilkan </nama tag>.

Contoh:

untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML

<i>Teks ini terlihat miring di browser Anda</i>

1.3.4.4 Atribut

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya, digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah STYLE dengan nilai "text-align:left". Nilai atribut STYLE ditulis dalam bahasa CSS.

<P STYLE="text-align:left">

1.4 Google SpreadSheet

SpreadSheet adalah sebuah program aplikasi komputer interaktif untuk organisasi dan analisis data dalam bentuk tabel. SpreadSheet dikembangkan sebagai simulasi komputerisasi akuntansi lembar kertas. Program ini beroperasi pada data yang direpresentasikan sebagai sel dari array, yang diselenggarakan dalam baris dan kolom. Setiap sel dari array adalah elemen model-view-controller yang dapat berisi baik numerik atau data teks, atau hasil dari formula yang secara otomatis menghitung dan menampilkan nilai berdasarkan isi sel lain. Pengguna spreadsheet dapat membuat perubahan dalam nilai yang disimpan dan mengamati efek pada nilai-nilai dihitung.

Software spreadsheet modern dapat memiliki beberapa lembar interaktif, dan dapat menampilkan data baik sebagai teks dan angka, atau dalam bentuk grafik. Selain operasi dasar aritmatika dan fungsi matematika, spreadsheet modern yang menyediakan built-in fungsi untuk operasi keuangan dan statistik umum. Perhitungan seperti deviasi standar dapat diterapkan pada data tabular dengan fungsi diprogram dalam formula. Program spreadsheet juga menyediakan ekspresi kondisional, fungsi untuk mengkonversi antara teks dan angka, dan fungsi yang beroperasi pada string teks. Spreadsheet sekarang telah menggantikan sistem berbasis kertas di seluruh dunia bisnis. Meskipun mereka pertama kali dikembangkan untuk tugas-tugas akuntansi atau pembukuan, mereka sekarang digunakan secara ekstensif dalam konteks dimana daftar tabular dibangun, diurutkan dan berbagi.

1.4.1 Microsoft Excel

Microsoft Excel atau Microsoft Office Excel adalah sebuah program aplikasi lembar kerja spreadsheet yang dibuat dan didistribusikan oleh Microsoft Corporation yang dapat dijalankan pada Microsoft Windows dan Mac OS. Aplikasi ini memiliki fitur kalkulasi dan pembuatan grafik yang, dengan menggunakan strategi marketing Microsoft yang agresif, menjadikan Microsoft Excel sebagai salah satu program komputer yang populer digunakan di dalam komputer mikro hingga saat ini. Bahkan, saat ini program ini merupakan program spreadsheet paling banyak digunakan oleh banyak pihak, baik di platform PC berbasis Windows maupun platform Macintosh berbasis Mac OS, semenjak versi 5.0 diterbitkan pada tahun 1993. Aplikasi ini merupakan bagian dari Microsoft Office System, dan versi terakhir adalah versi Microsoft Office Excel 2013 yang diintegrasikan di dalam paket Microsoft Office System 2013.

1.4.1.1 Sejarah Microsoft Excel

Pada tahun 1982, Microsoft membuat sebuah program spreadsheet yang disebut dengan Multiplan, yang sangat populer dalam sistem-sistem CP/M, tetapi tidak dalam sistem MS-DOS mengingat di sana sudah berdiri saingannya, yakni Lotus 1-2-3. Hal ini membuat Microsoft memulai pengembangan sebuah program spreadsheet yang baru yang disebut dengan Excel, dengan tujuan, seperti yang dikatakan oleh Doug Klunder, "do everything 1-2-3 does and do it better/melakukan apa yang dilakukan oleh 1-2-3 dan lebih baik lagi".

Versi pertama Excel dirilis untuk Macintosh pada tahun 1985 dan versi Windows-nya menyusul (dinomori versi 2.0) pada November 1987. Lotus ternyata terlambat turun ke pasar program spreadsheet untuk Windows, dan pada tahun tersebut, Lotus 1-2-3 masih berbasis MS-DOS. Pada tahun 1988, Excel pun mulai menggeser 1-2-3 dalam pangsa pasar program spreadsheet dan menjadikan Microsoft sebagai salah satu perusahaan pengembang aplikasi perangkat lunak untuk komputer pribadi yang andal. Prestasi ini mengukuhkan Microsoft sebagai kompetitor yang sangat kuat bagi 1-2-3 dan bahkan mereka mengembangkannya lebih baik lagi. Microsoft, dengan menggunakan keunggulannya, rata-rata merilis versi Excel baru setiap dua tahun sekali, dan versi Excel untuk Windows terakhir adalah Microsoft Office Excel 2010 (Excel 14), sementara untuk Macintosh (Mac OS X), versi terakhirnya adalah Excel for Mac.

Pada awal-awal peluncurannya, Excel menjadi sasaran tuntutan perusahaan lainnya yang bergerak dalam bidang industri finansial yang telah menjual sebuah perangkat lunak yang juga memiliki nama Excel. Akhirnya, Microsoft pun mengakhiri tuntutan tersebut dengan kekalahan dan Microsoft harus mengubah nama Excel menjadi "Microsoft Excel" dalam semua rilis pers dan dokumen Microsoft. Meskipun demikian, dalam praktiknya, hal ini diabaikan dan bahkan Microsoft membeli Excel dari perusahaan yang sebelumnya menuntut mereka, sehingga penggunaan nama Excel saja tidak akan membawa masalah lagi. Microsoft juga sering menggunakan huruf XL sebagai singkatan untuk program tersebut, yang meskipun tidak umum lagi, ikon yang digunakan oleh program tersebut masih terdiri atas dua huruf tersebut (meski diberi beberapa gaya penulisan). Selain itu, ekstensi default dari spreadsheet yang dibuat oleh Microsoft Excel hingga versi 11.0 (Excel 2003) adalah *.xls sedangkan mulai Microsoft Office Excel 2007 (versi 12.0) ekstensi default-nya adalah *.xlsx yang mendukung format HTML namun dengan isi yang sama memiliki ukuran file yang lebih kecil jika dibandingkan dengan versi-versi Excel sebelumnya.

Excel menawarkan banyak keunggulan antar muka jika dibandingkan dengan program spreadsheet yang mendahuluinya, tetapi esensinya masih sama dengan VisiCalc (perangkat lunak spreadsheet yang terkenal pertama kali): Sel disusun dalam baris dan kolom, serta mengandung data atau formula dengan berisi referensi absolut atau referensi relatif terhadap sel lainnya.

Excel merupakan program spreadsheet pertama yang mengizinkan pengguna untuk mendefinisikan bagaimana tampilan dari spreadsheet yang mereka sunting: font, atribut karakter, dan tampilan setiap sel. Excel juga menawarkan penghitungan kembali terhadap sel-sel secara cerdas, di mana hanya sel yang berkaitan dengan sel tersebut saja yang akan diperbarui nilanya (di mana program-program spreadsheet lainnya akan menghitung ulang keseluruhan data atau menunggu perintah khusus dari pengguna). Selain itu, Excel juga menawarkan fitur pengolahan grafik yang sangat baik.

Ketika pertama kali dibundel ke dalam Microsoft Office pada tahun 1993, Microsoft pun mendesain ulang tampilan antar muka yang digunakan oleh Microsoft Word dan Microsoft PowerPoint untuk mencocokkan dengan tampilan Microsoft Excel, yang pada waktu itu menjadi aplikasi spreadsheet yang paling disukai.

Sejak tahun 1993, Excel telah memiliki bahasa pemrograman Visual Basic for Applications (VBA), yang dapat menambahkan kemampuan Excel untuk melakukan automatisasi di dalam Excel dan juga menambahkan fungsi-fungsi yang dapat didefinisikan oleh pengguna (user-defined functions/UDF) untuk digunakan di dalam worksheet. Dalam versi selanjutnya, bahkan Microsoft menambahkan sebuah integrated development environment (IDE) untuk bahasa VBA untuk Excel, sehingga memudahkan programmer untuk melakukan pembuatan program buatannya. Selain itu, Excel juga dapat merekam semua yang dilakukan oleh pengguna untuk menjadi macro, sehingga mampu melakukan automatisasi beberapa tugas. VBA juga mengizinkan pembuatan form dan kontrol yang terdapat di dalam worksheet untuk dapat berkomunikasi dengan penggunanya. Bahasa VBA juga mendukung penggunaan DLL ActiveX/COM, meski tidak dapat membuatnya. Versi VBA selanjutnya menambahkan dukungan terhadap class module sehingga mengizinkan penggunaan teknik pemrograman berorientasi objek dalam VBA

1.5 Diagram Sankey

1.5.1 Simple Example

Misalkan anda memiliki dua kategori, A dan B yang terhubung ke tiga kategori lainnya, X, Y dan Z. Beberapa koneksi tersebut lebih berat daripada yang lain. Misalnya, B memiliki koneksi tipis untuk X dan koneksi lebih tebal untuk Y.

Figure 1.2: Contoh Koneksi Tipis pada Diagram Sankey

Figure 1.3: Contoh Koneksi Tebal pada Diagram Sankey

Untuk membuat grafik sankey, sediakan satu set baris, dengan masing-masing berisi informasi tentang satu sambungan : dari, untuk, dan berat. Kemudian gunakan metode google.visualization.Sankey() untuk menginisialisasi grafik dan kemudian metode draw() untuk menjadikannya.

Dibawah ini adalah source code nya :

<html> 
<head>
<script type="text/javascript" src="https://www.gstatic.com
/charts/loader.js"></script> 
<script type="text/javascript">
google.charts.load('current', {'packages':['sankey']}); 
google.charts.setOnLoadCallback(drawChart);
function drawChart() { 
var data = new google.visualization.DataTable();
data.addColumn('string', 'From'); 
data.addColumn('string', 'To'); 
data.addColumn('number', 'Weight'); 
data.addRows([ 
[ 'A', 'X', 5 ], 
[ 'A', 'Y', 7 ], 
[ 'A', 'Z', 6 ], 
[ 'B', 'X', 2 ], 
[ 'B', 'Y', 9 ],
[ 'B', 'Z', 4 ] 
]);
// Sets chart options.
var options = { 
width: 600, 
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById
('sankey_basic')); 
chart.draw(data, options); 
} 
</script> 
</head>
<body>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
</body>
</html>

1.5.2 Multilevel Sankeys

Anda dapat membuat grafik sankey dengan beberapa tingkat koneksi.

Figure 1.4: Tingkat Koneksi pada Multilevel Sankeys

Sankey chart akan menambahkan level tambahan yang diperlukan, meletakkan mereka secara otomatis. Berikut code lengkap untuk grafik diatas :

<html>
<body> 
<script type="text/javascript" src="https://www.gstatic.com
/charts/loader.js"></script>
<div id="sankey_multiple" style="width: 900px; 
height: 300px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["sankey"]}); 
google.charts.setOnLoadCallback(drawChart); 
function drawChart() { 
var data = new google.visualization.DataTable();
data.addColumn('string', 'From'); 
data.addColumn('string', 'To'); 
data.addColumn('number', 'Weight'); 
data.addRows([ 
[ 'Brazil', 'Portugal', 5 ],
[ 'Brazil', 'France', 1 ], 
[ 'Brazil', 'Spain', 1 ],
[ 'Brazil', 'England', 1 ], 
[ 'Canada', 'Portugal', 1 ], 
[ 'Canada', 'France', 5 ], 
[ 'Canada', 'England', 1 ],
[ 'Mexico', 'Portugal', 1 ], 
[ 'Mexico', 'France', 1 ],
[ 'Mexico', 'Spain', 5 ],
[ 'Mexico', 'England', 1 ],
[ 'USA', 'Portugal', 1 ], 
[ 'USA', 'France', 1 ],
[ 'USA', 'Spain', 1 ],
[ 'USA', 'England', 5 ],
[ 'Portugal', 'Angola', 2 ],
[ 'Portugal', 'Senegal', 1 ], 
[ 'Portugal', 'Morocco', 1 ], 
[ 'Portugal', 'South Africa', 3 ], 
[ 'France', 'Angola', 1 ],
[ 'France', 'Senegal', 3 ],
[ 'France', 'Mali', 3 ], 
[ 'France', 'Morocco', 3 ],
[ 'France', 'South Africa', 1 ], 
[ 'Spain', 'Senegal', 1 ], 
[ 'Spain', 'Morocco', 3 ], 
[ 'Spain', 'South Africa', 1 ],
[ 'England', 'Angola', 1 ], 
[ 'England', 'Senegal', 1 ],
[ 'England', 'Morocco', 2 ], 
[ 'England', 'South Africa', 7 ],
[ 'South Africa', 'China', 5 ],
[ 'South Africa', 'India', 1 ],
[ 'South Africa', 'Japan', 3 ],
[ 'Angola', 'China', 5 ],
[ 'Angola', 'India', 1 ],
[ 'Angola', 'Japan', 3 ],
[ 'Senegal', 'China', 5 ],
[ 'Senegal', 'India', 1 ],
[ 'Senegal', 'Japan', 3 ], 
[ 'Mali', 'China', 5 ],
[ 'Mali', 'India', 1 ], 
[ 'Mali', 'Japan', 3 ],
[ 'Morocco', 'China', 5 ], 
[ 'Morocco', 'India', 1 ],
[ 'Morocco', 'Japan', 3 ] 
]);
// Set chart options 
var options = { 
width: 600, 
};
// Instantiate and draw our chart, passing in some options. 
var chart = new google.visualization.Sankey
(document.getElementById('sankey_multiple'));
chart.draw(data, options); 
} 
</script> 
</body>
</html>

1.5.3 Controlling Colors

Sankey charts memiliki kemampuan untuk mengatur warna kustom untuk node dan link. Keduanya node dan link dapat diberikan palet warna kustom menggunakan warna pilihan mereka (sankey.node.colors dan sankey.link.colors, masing-masing). Mereka juga dapat diberikan mode pewarnaan yang berbeda menggunakan opsi colorMode.

Jika warna tidak disesuaikan, mereka otomatis default menjadi palet material standar.

Figure 1.5: Palet Material Standar Diagram Sankey

var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f', 
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
var options = { 
height: 400, 
sankey: { 
node: { 
colors: colors 
}, 
link: { 
colorMode: 'gradient',
colors: colors 
} 
} 
};

Anda dapat mengontrol warna dari link, node, dan label dengan pilihan konfigurasi. Di sini kita pilih tiga dengan rona yang sama tetapi kecerahan berbeda :

Figure 1.6: Perbedaan Pencerahaan pada Diagram Sankey

Inilah kode untuk pilihan tersebut :

var options = { 
width: 600,
sankey: { 
link: { color: { fill: '#d799ae' } },
node: { colors: [ '#a61d4c' ], 
label: { color: '#871b47' } }, 
} 
};
Anda juga dapat mengatur transparasi link dengan pilihan 
sankey.link.color.fillOpacity :
var options = { 
width: 600,
sankey: { 
link: { color: { fill: '#d799ae', fillOpacity: 0.8 } }, 
node: { colors: [ '#a61d4c' ], 
label: { color: '#871b47' } }, 
} 
};

Untuk membuat perbatasan di sekitar link, gunakan sankey.link.color.stroke dan pilihan sankey.link.color.strokeWidth :

Figure 1.7: Membuat Perbatasan di Sekitar Link

Warna stroke dapat ditentukan baik dalam format RGB atau nama inggris.

var options = { 
width: 750, 
height: 400, 
sankey: { 
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
} 
};

1.5.4 Customizing Labels

Teks pada grafik sankey dapat disesuaikan dengan menggunakan sankey.node.label.fontName dan lainnya :

Figure 1.8: Teks pada Diagram Sankey

Berikut pilihan stanza untuk grafik diatas :

var options = { 
width: 600, 
sankey: { 
node: { 
label: { 
fontName: 'Times-Roman',
fontSize: 14, 
color: '#871b47', 
bold: true, 
italic: true } } }, 
};

Anda dapat mengatur posisi label relatif terhadap node dengan pilihan sankey.node.labelPadding :

Figure 1.9: Pengaturan Posisi Label Diagram Sankey

Pada grafik diatas, kami telah menambahkan 30 pixel padding antara label dan node.

var options = {
width: 600, 
sankey: { node: { labelPadding: 30 } },
};

1.5.5 Adjusting Nodes

Anda dapat mengontrol lebar node dengan sankey.node.width :

Figure 1.10: Pengaturan Lebar Node Diagram Sankey

Di atas, kita mengatur lebar node menjadi 2.

var options = { 
width: 600, 
sankey: { node: { width: 2 } },
};

Anda dapat mengatur jarak antara node dengan sankey.node.nodePadding :

Figure 1.11: Pengaturan Jarak Antara Node

Pada grafik diatas, kita menetapkan sankey.node.nodePadding 80.

var options = { 
width: 900,
sankey: { node: { nodePadding: 80 } },
};

1.5.6 Loading

Nama package google.charts.load adalah “sankey” :

google.charts.load("current" {packages: ["sankey"]});

Nama kelas visualisasi adalah google.visualization.Sankey :

var visualization = new google.visualization.Sankey(container);

1.5.7 Data Format

Baris : Setiap baris dalam tabel merupakan hubungan antara dua label. Kolom ketiga menunjukkan kekuatan hubungan itu, dan akan tercermin dalam lebar jalur antara label.

Kolom :

Table 1.1: Data Format Diagram Sankey

	Kolom 0	Kolom 1	Kolom 2	...	Kolom N (opsional)
Optional Column Role	None	None	None	...	tooltip, style
Purpose	Source	Destination	Value	...	Optional roles
Data Type	String	String	Number	...
Role	Domain	Domain	Data	...

1.5.8 Configuration Options

Table 1.3: Confguration Option Diagram Sankey

Nama
width	Lebar grafik, dalam piksel. Type : number Default : lebar elemen yang terkandung
forcelFrame	Menarik grafik dalam sebuah frame inline. (Perhatikan bahwa pada IE8, opsi ini diabaikan; semua grafik IE8 digambarkan di i-frame). Type : boolean Default : false
height	Ketinggian grafik dalam piksel. Type : number Default : ketinggian elemen yang terkandung
sankey.iterations	Dengan sankey bertingkat, kadang-kadang tidak diketahui dimana node harus ditempatkan untuk optimal. Percobaan D3 layout engine dengan layout simpul yang berbeda, berhenti ketika upaya sankey.iterations telah dilakukan. Semakin besar jumlah ini, lebih memuaskan tata letak sankey kompleks, tetapi sebanding dengan biaya. Sankey akan memakan waktu lebih lama untuk membuatnya. Sebaliknya, semakin pendek nomor ini, semakin cepat grafik anda 'akan dibuat. Type : integer Default : 32
sankey.link	Kontrol atribut dari koneksi antara node. Saat ini semua atribut berkaitan dengan warna. sankey: { link: { color: { fill: '#efd', // Color of the link. fillOpacity: 0.8, // Transparency of the link. stroke: 'black', // Color of the link border. strokeWidth: 1 // Thickness of the link border(default 0). }, colors: [ '#a6cee3', // Custom color palette for sankey links. '#1f78b4', // Nodes will cycle through this palette '#b2df8a', // giving the links for that node the color. '#33a02c' ] } } Type : object Default : null
sankey.link.colorMode	Set mode mewarnai untuk link antara node. Kemungkinan nilai : 'source' - Warna node sumber yang digunakan untuk link ke semua node sasaran. 'target' - Warna node target digunakan untuk link ke node sumbernya. 'gradient' - Link antara sumber dan target node berwarna sebagai gradien dari node sumber ke target warna simpul. 'none' - Pilihan default; warna link akan diatur ke default (atau warna sebagaimana ditentukan oleh sankey.link.color.fill dan pilihan sankey.link.color.fillOpacity). Pilihan ini mengesampingkan sankey.link.color. Type : string Default : 'none'
sankey.node	Kontrol atribut node (bar vertikal antara link) : sankey: { node: { label: { fontName: 'Times-Roman', fontSize: 12, color: '#000', bold: true, italic: false }, interactivity: true, // Allows you to select nodes. labelPadding: 6, // Horizontal distance between the label and the node. nodePadding: 10, // Vertical distance between nodes. width: 5, // Thickness of the node. colors: [ '#a6cee3', // Custom color palette for sankey nodes. '#1f78b4', // Nodes will cycle through this palette '#b2df8a', // giving each node its own color. '#33a02c' ] } } Type : object Default : null
sankey.node.colorMode	Set mode mewarnai untuk node sankey. Kemungkinan nilai : 'unique' - Setiap node akan menerima warna yang unik. Type : string Default : 'unique'
tooltip	Sebuah objek dengan anggota untuk mengkonfigurasi berbagai elemen tooltip. Untuk menentukan sifat dari objek ini, anda dapat menggunakan objek notasi literal, seperti yang ditunjukkan disini : { textStyle: {color: '#FF0000'}, showColorCode: true } Type : object Default : null
tooltip.isHtml	Jika diatur ke benar (true), menggunakan HTML-render (bukan SVG-render) tooltips. Lihat “Customizing Tooltip Content” untuk lebih jelasnya. Type : boolean Default : false
tooltip.textStyle	Sebuah objek yang menentukan gaya teks tooltip. Objeknya memiliki format ini : { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Warna dapat berupa string warna HTML, misalnya: 'merah' atau '#00cc00'. Juga lihat fontName dan fontSize. Type : object Default : {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

1.5.9 Methods

Table 1.5: Method Diagram Sankey

Method
clearChart()	Membersihkan grafik, dan melepaskan semua sumber daya yang dialokasikan. Return Type : none
draw(data, options)	Menarik grafik. Grafik menerima metode lanjut panggilan setelah readyevent ini dipecat. Deskripsi diperpanjang. Return Type : none
getBoundingBox(id)	Mengembalikan sebuah objek yang mengandung kiri, atas, lebar dan tinggi dari grafik elemen id. Format untuk id belum didokumentasikan (mereka pengembalian nilai-nilai dari event handler), tetapi di sini ada beberapa contoh : var cli = chart.getChartLayoutInterface(); Ketinggian daerah grafik cli.getBoundingBox('chartarea').height Lebar bar ketiga di seri pertama dari bar atau kolom grafik cli.getBoundingBox('bar#0#2').width Kotak batas dari wedge kelima dari pie chart cli.getBoundingBox('slice#4') Kotak batas dari grafik data dari grafik horisontal (misalnya, kolom): cli.getBoundingBox('vAxis#0#gridline') Kotak data grafik (misalnya, bar) grafik horisontal bounding: cli.getBoundingBox('hAxis#0#gridline') Nilai adalah relatif terhadap kontainer dari grafik. Panggil ini setelah grafik digambar. Return Type : object
getSelection()	Mengembalikan array entitas grafik yang dipilih. Entitas dipilih adalah bar, entri legend dan kategori. Untuk grafik ini, hanya satu entitas dapat dipilih pada saat tertentu. Deskripsi diperpanjang. Return Type : Array elemen pilihan
setSelection()	Memilih entitas grafik yang spesifik. Membatalkan setiap seleksi sebelumnya. Entitas dipilih adalah bar, entri legenda dan kategori. Untuk grafik ini, hanya satu entitas dapat dipilih pada suatu waktu. Deskripsi diperpanjang. Return Type : none

1.5.10 Events

Table 1.7: Event Diagram Sankey

Name
select	Dipecat ketika pengguna mengklik sebuah entitas visual. Untuk mempelajari apa yang telah dipilih, panggil getSelection(). Properti : none
error	Dipecat bila terjadi kesalahan saat mencoba untuk membuat grafik. Properti : id, message
onmouseover	Dipecat ketika pengguna mouses lebih dari entitas visual. Melewati kembali baris dan kolom indeks dari elemen tabel data yang sesuai. Sebuah bar berkorelasi ke sel dalam tabel data, entri legenda untuk kolom (indeks baris adalah nol), dan kategori ke baris (indeks kolom adalah null). Properti : baris, kolom
onmouseout	Dipecat ketika pengguna mouses jauh dari entitas visual. Melewati kembali baris dan kolom indeks dari elemen tabel data yang sesuai. Sebuah bar berkorelasi ke sel dalam tabel data, entri legenda untuk kolom (indeks baris adalah nol), dan kategori ke baris (indeks kolom adalah null). Properti : baris, kolom
ready	Grafik siap untuk metode panggilan eksternal. Jika anda ingin berinteraksi dengan grafik, dan memanggil metode setelah anda menggambarnya, anda harus mengatur pendengar untuk event ini sebelum anda memanggil metode imbang, dan memanggil setelah event di pecat. Properti : none

1.6 Diagram Scatter

Figure 1.12: Diagram Scatter

<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 = google.visualization.arrayToDataTable([ 
['Age', 'Weight'],
[ 8, 12], 
[ 4, 5.5],
[ 11, 14], 
[ 4, 5], 
[ 3, 3.5],
[ 6.5, 7] 
]);
var options = {
title: 'Age vs. Weight comparison',
hAxis: {title: 'Age', minValue: 0, maxValue: 15},
vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
legend: 'none' 
};
var chart = new google.visualization.ScatterChart
(document.getElementById('chart_div'));
chart.draw(data, options); } 
</script> 
</head> 
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

1.6.1 Changing and animating shapes

Secara otomatis, grafik pencar mewakili unsur-unsur dari dataset anda dengan lingkaran. Anda dapat menentukan bentuk lainnya dengan pilihan pointShape, lebih detailnya dalam dokumentasi menyesuaikan poin.

Seperti kebanyakan google chart lainnya, anda dapat menggerakkan mereka menggunakan evets. Anda dapat menambahkan event listener (pendengar) untuk event pertama dan redraw grafik setelah melakukan modifikasi yang diinginkan. Setelah event pertama, anda dapat mendengarkan event animationfinish untuk mengulangi proses tersebut, menghasilkan animasi terus menerus. Opsi animasi mengontrol bagaimana redraw terjadi : segera (tanpa animasi) atau lancar, dan jika lancar seberapa cepat dan dengan perilaku apa.

Figure 1.13: Animasi pada Diagram Scatter

<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'); 
data.addColumn('number');
var radius = 100;
for (var i = 0; i < 6.28; i += 0.1) {
data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
}
// Our central point, which will jiggle. 
data.addRow([0, 0]);
var options = { 
legend: 'none', 
colors: ['#087037'], 
pointShape: 'star', 
pointSize: 18, 
animation: { 
duration: 200, 
easing: 'inAndOut', 
} 
};
var chart = new google.visualization.ScatterChart
(document.getElementById('animatedshapes_div'));
//Start the animation by listening to the first 'ready' event. 
google.visualization.events.addOneTimeListener
(chart, 'ready', randomWalk);
//Control all other animations by listening to the 'animationfinish'
event. 
google.visualization.events.addListener(chart, 'animationfinish',
randomWalk);
chart.draw(data, options);
function randomWalk() { 
var x = data.getValue(data.getNumberOfRows() - 1, 0); 
var y = data.getValue(data.getNumberOfRows() - 1, 1); 
x += 5 * (Math.random() - 0.5); 
y += 5 * (Math.random() - 0.5);
if (x * x + y * y > radius * radius) { 
// Out of bounds. Bump toward center. 
x += Math.random() * ((x < 0) ? 5 : -5);
y += Math.random() * ((y < 0) ? 5 : -5); 
} 
data.setValue(data.getNumberOfRows() - 1, 0, x); 
data.setValue(data.getNumberOfRows() - 1, 1, y); 
chart.draw(data, options); 
} 
}
</script>
</head>
<body>
<div id="animatedshapes_div" style="width: 500px; height: 500px;">
</div> 
</body>
</html>

1.6.2 Creating Material Scatter Charts

Pada tahun 2014, Google mengumumkan pedoman dimaksudkan untuk mendukung tampilan umum dan merasakan seluruh properti dan aplikasi (seperti aplikasi Android) yang berjalan di platform Google. Kami menyebut upaya ini Desain Material. Kami akan menyediakan "Material" versi dari semua grafik utama kami; anda dipersilakan untuk menggunakan mereka jika anda suka bagaimana mereka terlihat.

Membuat Material Grafik Scatter ini mirip dengan membuat apa yang sekarang kita sebut "klasik" grafik scatter. Anda memuat Google Visualisasi API (meskipun dengan paket 'scatter' bukan paket 'corechart'), mendefinisikan DataTable anda, dan kemudian membuat objek (tapi kelas google.charts.Scatter bukan google.visualization.ScatterChart).

Figure 1.14: Contoh Diagram Scatter

Material grafik scatter memiliki banyak perbaikan kecil dari grafik scatter kalsik, termasuk opacity variabel untuk keterbacaan poin yang tumpang tindih, palet warna ditingkatkan, format label yang lebih jelas, jarak standar ketat, gridlines dan judul lebih lembut (dan penambahan sub judul).

google.charts.load('current', {'packages':['scatter']}); 
google.charts.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable(); 
data.addColumn('number', 'Hours Studied'); 
data.addColumn('number', 'Final');
data.addRows([ 
[0, 67], [1, 88], [2, 77],
[3, 93], [4, 85], [5, 91], 
[6, 71], [7, 78], [8, 93],
[9, 80], [10, 82],[0, 75], 
[5, 80], [3, 90], [1, 72], 
[5, 75], [6, 68], [7, 98],
[3, 82], [9, 94], [2, 79], 
[2, 95], [2, 86], [3, 67], 
[4, 60], [2, 80], [6, 92], 
[2, 81], [8, 79], [9, 83],
[3, 75], [1, 80], [3, 71],
[3, 89], [4, 92], [5, 85], 
[6, 92], [7, 78], [6, 95], 
[3, 81], [0, 64], [4, 85], 
[2, 83], [3, 96], [4, 77],
[5, 89], [4, 89], [7, 84], 
[4, 92], [9, 98] 
]);
var options = { 
width: 800, 
height: 500, 
chart: { 
title: 'Students\' Final Grades', 
subtitle: 'based on hours studied' 
}, hAxis: {title: 'Hours Studied'},
vAxis: {title: 'Grade'} 
};
var chart = new google.charts.Scatter(document.getElementById
('scatterchart_material'));
chart.draw(data, google.charts.Scatter.convertOptions(options)); 
}

Charts Material dalam versi beta. Penampilan dan interaktivitas sebagian besar akhir, tapi banyak dari pilihan yang tersedia di Charts Klasik belum tersedia di dalamnya. Anda dapat menemukan daftar pilihan yang belum didukung dalam masalah ini.
Juga, pilihan cara dinyatakan tidak selesai, sehingga anda harus mengkonversi pilihan anda dengan mengganti baris ini:

chart.draw (data, options);

...dengan ini:

chart.draw (data, google.charts.Scatter.convertOptions (options));

1.6.2.1 Dual-Y charts

Kadang-kadang anda akan ingin menampilkan dua seri dalam grafik pencar, dengan dua sumbu y independen: sumbu kiri untuk satu seri, dan sumbu kanan untuk yang lain:

Figure 1.15: Dual-Y pada Diagram Scatter

Perhatikan bahwa tidak hanya dua y-sumbu berlabel berbeda ("Final Exam Grade" versus "Hours Studied") tetapi mereka masing-masing memiliki skala independen mereka sendiri dan gridlines. Jika anda ingin menyesuaikan perilaku ini, gunakan opsi vAxis.gridlines.

Dalam kode di bawah, sumbu dan pilihan seri bersama-sama menentukan penampilan dual-Y dari grafik. Opsi seri menentukan sumbu yang digunakan untuk setiap ('final grade' dan 'hours studied', mereka tidak perlu memiliki hubungan dengan nama kolom dalam DataTable). Opsi sumbu kemudian membuat grafik ini grafik dual-Y, menempatkan 'Final Exam Grade' sumbu di sebelah kiri dan 'Hours Studied' sumbu di sebelah kanan.

google.charts.load('current', {'packages':['scatter']}); 
google.charts.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable(); 
data.addColumn('number', 'Student ID'); 
data.addColumn('number', 'Hours Studied'); 
data.addColumn('number', 'Final');
data.addRows([ 
[0, 0, 67], [1, 1, 88], [2, 2, 77], 
[3, 3, 93], [4, 4, 85], [5, 5, 91],
[6, 6, 71], [7, 7, 78], [8, 8, 93], 
[9, 9, 80], [10, 10, 82], [11, 0, 75], 
[12, 5, 80], [13, 3, 90], [14, 1, 72],
[15, 5, 75], [16, 6, 68], [17, 7, 98], 
[18, 3, 82], [19, 9, 94], [20, 2, 79], 
[21, 2, 95], [22, 2, 86], [23, 3, 67],
[24, 4, 60], [25, 2, 80], [26, 6, 92],
[27, 2, 81], [28, 8, 79], [29, 9, 83] 
]);
var options = { 
chart: { 
title: 'Students\' Final Grades', 
subtitle: 'based on hours studied' 
}, 
width: 800, 
height: 500, 
series: { 
0: {axis: 'hours studied'},
1: {axis: 'final grade'} 
},
axes: { 
y: {
'hours studied': {label: 'Hours Studied'}, 
'final grade': {label: 'Final Exam Grade'} 
}
} 
};
var chart = new google.charts.Scatter(document.getElementById
('scatter_dual_y'));
chart.draw(data, options);
}

1.6.2.2 Top-X charts

Jika anda ingin menempatkan label sumbu X dan judul di bagian atas grafik anda daripada bagian bawah, anda dapat melakukannya di material charts dengan pilihan axes.x:

Figure 1.16: Top-X pada Diagram Scatter

google.charts.load('current', {'packages':['scatter']}); 
google.charts.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable(); 
data.addColumn('number', 'Hours Studied'); 
data.addColumn('number', 'Final');
data.addRows([
[0, 67], [1, 88], [2, 77],
[3, 93], [4, 85], [5, 91], 
[6, 71], [7, 78], [8, 93],
[9, 80], [10, 82], [0, 75],
[5, 80], [3, 90], [1, 72], 
[5, 75], [6, 68], [7, 98],
[3, 82], [9, 94], [2, 79], 
[2, 95], [2, 86], [3, 67],
[4, 60], [2, 80], [6, 92],
[2, 81], [8, 79], [9, 83],
[3, 75], [1, 80], [3, 71],
[3, 89], [4, 92], [5, 85],
[6, 92], [7, 78], [6, 95],
[3, 81], [0, 64], [4, 85],
[2, 83], [3, 96], [4, 77], 
[5, 89], [4, 89], [7, 84],
[4, 92], [9, 98] 
]);
var options = { 
width: 800, 
height: 500, 
chart: { 
title: 'Students\' Final Grades', 
subtitle: 'based on hours studied' 
},
axes: { 
x: { 
0: {side: 'top'} 
} 
}
};
var chart = new google.charts.Scatter(document.getElementById
('scatter_top_x'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
}

1.6.3 Loading

Nama package google.charts.load adalah "corechart".

google.charts.load("current", {packages: ["corechart"]});

Untuk material scatter chart, nama package google.charts.load adalah "scatter".

google.charts.load("current", {packages: ["scatter"]});

Visualisasi nama kelas adalah google.visualization.ScatterChart.

var visualization = new google.visualization.ScatterChart(container);

Untuk material scatter chart, nama kelas visualisasi adalah google.charts.Scatter.

var visualization = new google.charts.Scatter(container);

1.6.4 Data Format

Baris : Setiap baris di tabel mewakili satu set titik data dengan nilai sumbu x sama.

Kolom :

Table 1.9: Data Format Diagram Scatter

Untuk menentukan beberapa seri, tentukan dua atau lebih kolom Y-axis, dan tentukan nilai-nilai Y hanya dalam satu kolom Y:

Table 1.10: Kolom Y-Axis Diagram Scatter

X-values	Series 1 Y Values	Series 2 Y Values
48	3	null
10	null	75
20	null	18
33	null	22
55	16	null
14	61	null

1.7 Stepped Area Chart

Sebuah stepped area chart yang diberikan dalam browser menggunakan SVG atau VML. Menampilkan tips ketika melayang diatas langkah-langkah.

1.7.1 A Simple Example

Figure 1.17: Contoh Stepped Area Chart

<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 = google.visualization.arrayToDataTable([
          ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
          ['Alfred Hitchcock (1935)', 8.4,         7.9],
          ['Ralph Thomas (1959)',     6.9,         6.5],
          ['Don Sharp (1978)',        6.5,         6.4],
          ['James Hawes (2008)',      4.4,         6.2]
        ]);

        var options = {
          title: 'The decline of \'The 39 Steps\'',
          vAxis: {title: 'Accumulated Rating'},
          isStacked: true
        };

        var chart = new google.visualization.SteppedAreaChart
(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;">
</div>
  </body>
</html>

1.7.2 Some Common Options

Seperti semua chart google, stepped area chart memiliki banyak pilihan. Berikut ini adalah contoh menunjukkan beberapa yang paling umum :

Figure 1.18: Pilihan pada Stepped Area Chart

Pada grafik diatas, kami telah mengubah warna latar belakang dengan backgroundColor, memindahkan legend ke bawah dengan legend.position, menghapus garis-garis vertikal dengan pengaturan connectSteps ke false, dan menyesuaikan warna. Berikut adalah cara yang dilakukan :

var options = {
      backgroundColor: '#ddd',
      legend: { position: 'bottom' },
      connectSteps: false,
      colors: ['#4374E0', '#53A8FB', '#F1CA3A', '#E49307'],
      isStacked: true,
  };

1.7.3 Stacked Stepped Area Charts

Stepped area chart juga mendukung stacking(susun), termasuk 100% stacking. Sebuah tumpukan stepped area chart merupakan stepped area chart yang menempatkan nilai-nilai terkait atas satu sama lain. Jika ada nilai-nilai negatif, mereka ditumpuk dalam urutan terbalik dibawah baseline grafik ini. Untuk 100% stacking, tumpukan elemen pada setiap nilai domain yang rescaled sehingga mereka menambahkan hingga 100%. Pilihan untuk ini adalah isStacked : 'persen', yang format setiap nilai sebagai persentase dari 100%, dan isStacked : 'relatif', yang format setiap nilai sebagai bagian kecil dari 1. Ada juga isStacked : 'mutlak', yang secara fungsional setara dengan isStacked : true.

Catatan di tumpukan grafik 100% di sebelah kanan, nilai-nilai tick yang ditulis berdasarkan relatif 0 - 1 skala sebagai pecahan dari 1.

Figure 1.19: Tumpukan Stepped Area Chart

Stacked

var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };

100% Stacked

 var options_fullStacked = {
          isStacked: 'relative',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

1.7.4 Loading

Nama package google.charts.load adalah “corechart”.

google.charts.load("current", {packages: ["corechart"]});

Nama kelas visualisasi adalah :

var visualization = new google.visualization.SteppedAreaChart(container);

	Kolom 0	Kolom 1	...	Kolom N
Purpose	Titik data nilai X	Nilai series 1 Y	...	Nilai series N Y
Data Type	string, number, atau date/datetime/timeofday	string, number, atau date/datetime/timeofday	...	string, number, atau date/datetime/timeofday
Role	data	data	...	data
Optional column roles	none	certainty emphasis scope tooltip	...	certainty emphasis scope style tooltip

Kamis, 02 Februari 2017

Perangkat Lunak yang Mendukung Pembuatan Diagram

Bab3

Tidak ada komentar:

Posting Komentar