Bab 4
Contoh Kasus Pemanfaatan
Google API
4.1 Timeline
4.1.1 Pengertian
Sebuah
Timeline adalah bagan yang menggambarkan bagaimana set sumber daya yang
digunakan dari waktu ke waktu. Jika Anda sedang mengelola proyek perangkat
lunak dan ingin menggambarkan siapa yang melakukan apa dan ketika, atau jika
Anda sedang mengatur sebuah konferensi dan perlu untuk menjadwalkan ruang
pertemuan, sebuah Timeline adalah sering pilihan wajar visualisasi. Salah satu
jenis Timeline yang populer adalah Gantt chart. Dibawah ini adalah contoh
sederhana Timeline nama-nama presiden. Setelah loading Timeline paket dan
mendefinisikan callback untuk menggambar grafik ketika halaman diterjemahkan,
metode drawChart() instantiates google.visualization.Timeline() dan kemudian
mengisi sebuah dataTable dengan satu baris untuk setiap Presiden.
·
Di dalam
dataTable, kolom pertama adalah nama Presiden, dan kolom kedua dan ketiga
adalah awal dan akhir kali. Ini memiliki tipe JavaScript Date, tetapi mereka
juga bisa nomor biasa.
·
Akhirnya,
kita memanggil metode draw() bagan, yang menampilkannya dalam sebuah div dengan
penciri sama (Timeline) yang digunakan bila wadah dinyatakan pada baris pertama
dari drawChart(). Berikut ini adalah kodingannya.
·
Untuk
menambahkan label pada setiap kolom kita gunakan sedikit tambahan koding. Kita
berikan nama lengkap dari setiap Presiden. Pada grafik Timeline, terdapat 4
kolom dataTable, kolom pertama adalah label baris, kolom kedua sebagai bar
label, kolom ketiga dan keempat sebagai awal dan akhir. Kita tambahkan kodingan
tersebut dibawah Washington, adams, dan Jefferson. Berikut kodenya.
·
Untuk membuat
Timeline kita lebih kompleks, mari kita buat Timeline Jadwal Bioskop ke kita
bagan. Kita akan menambahkan jadwal mulai dari jadwal tayang, durasi film, dan
lokasi tempat kita akan menonton. Dalam jadwal, beberapa sumber akan memiliki
warna yang sama bahkan dalam beberapa baris, sehingga di bagan berikut setiap
orang diwakili dengan warna yang konsisten.
·
Beberapa bar
ada yang pendek dan juga ada yang panjang sekali, maka tabel ini adalah tes
yang baik dari label. Ketika label terlalu besar untuk bar, disingkat atau
dihilangkan, tergantung pada ukuran bar. Kita dapat mengarahkan kursor ke bar
untuk mendapatkan informasi tooltip. Timeline akan mengurutkan mulai dari jam
terlebih dahulu. Kita lihat film dimulai dari jam 12.00 hingga jam 18.00. Pada
mall Margo XXI film The Avenger memiliki bar yang sangat panjang, ini
dikarnakan durasi dari film The Avenger. Dari setiap Mall kita dapat lihat
perbedaan warna yang ditampilkan, ini dikarnakan berbeda baris. Jika masih dalam
1 baris, maka warna akan sama. Kita dapat mengatur warna pada baris dengan
mengatur backgroundColor. BackgroundColor ditentukan sebagai nilai hex. Di
sini, kita memasangkannya dengan colorByRowLabel untuk menunjukkan judul film
dalam satu baris.
Seperti
penjelasan sebelumnya, kita load terlebih dahulu loader google chartnya. Disini
kita hanya menggambar satu grafik saja, tetapi jika ingin menggambar lebih dari
satu grafik, kita hanya perlu satu loader saja. Yang ditambah bukan loadernya
tapi fungsi gambarnya. Kemudian disini kita gunakan versi yang sekarang
(“Current”). Pada fungsi drawChart, kita panggil library container bernama
example3.1, kemudian dalam array tabel kita atur terlebih dahulu tipe
variabelnya yaitu string dan date. Perlu diperhatikan koma atas pada kodingan
addrow atau penambahan data pada tabel dalam baris. Setelah semuanya selesai,
kita tutup dengan memanggil id chartnya dengan nama example3.1. itu digunakan
untuk dapat menggambar grafik Timeline, jika tidak dilakukan, maka grafik
Timline tidak dapat tergambar.
4.1.2 Tabel Konfigurasi
Dalam
pembuatan sebuah Timeline terdapat beberapa konfigurasi yang harus kita ketahui
sebelum kita membuat sebuah Timeline. Timeline merupakan bagan yang
menggambarkan bagaimana set sumber daya yang digunakan dari waktu ke waktu.
Pada umumnya Timeline digunakan untuk memecahkan sebuah masalah proyek.
Berikut
adalah tabel konfigurasi Timeline:
Nama
|
|
Hindari Tumpang Tindih Grid Baris
|
Apakah elemen display (misalnya,
bar di timeline) harus mengaburkan garis grid. Jika salah, garis grid dapat
ditutupi sepenuhnya oleh elemen display. Jika benar, elemen layar dapat
diubah untuk menjaga garis grid terlihat.
|
Warna latar belakang
|
Warna latar belakang untuk wilayah
utama grafik. Dapat berupa warna HTML string sederhana, misalnya: 'merah'
atau '# 00CC00', atau benda dengan sifat sebagai berikut.
|
Warna
|
Warna-warna yang digunakan untuk
elemen grafik. Array string, di mana setiap elemen adalah string warna HTML,
misalnya: warna: ['merah', '# 004411'].
|
Mengaktifkan Interaktivitas
|
Apakah grafik melempar peristiwa
berbasis pengguna atau bereaksi terhadap interaksi pengguna. Jika salah,
grafik tidak akan membuang 'pilih' atau peristiwa-interaksi berbasis lainnya
(tapi akan membuang peristiwa siap atau kesalahan), dan tidak akan
menampilkan hovertext atau berubah tergantung pada input pengguna.
|
Nama Font
|
Font default wajah untuk semua
teks dalam grafik. Anda dapat mengganti ini dengan menggunakan properti untuk
elemen grafik tertentu.
|
Ukuran Font
|
Ukuran font default, dalam piksel,
dari semua teks pada grafik. Anda dapat mengganti ini dengan menggunakan
properti untuk elemen grafik tertentu.
|
Force iFrame
|
Menarik grafik dalam sebuah frame
inline. (Perhatikan bahwa pada IE8, opsi ini diabaikan; semua grafik IE8
diambil di i-frame.)
|
Ketinggian
|
Ketinggian grafik, dalam piksel.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
timeline.barLabelStyle
|
Sebuah objek yang menentukan gaya
teks bar label. Formatnya: {fontName: <string>, fontSize:
<string>} Juga lihat Nama font dan Ukuran font pada tabel ini.
|
timeline.colorByRowLabel
|
Jika diatur ke benar, warna setiap
bar pada baris yang sama. default adalah menggunakan satu warna per label
bar.
|
timeline.groupByRowLabel
|
Jika diatur ke false, menciptakan
satu baris untuk setiap entri dataTable. default adalah untuk mengumpulkan
bar dengan label baris yang sama dalam satu baris.
|
timeline.rowLabelStyle
|
Sebuah objek yang menentukan gaya
teks label baris. Formatnya: {color: <string>, fontName:
<string>, fontSize: <string>} Warna dapat berupa string warna
HTML, misalnya 'merah' atau '# 00CC00' Juga lihat Nama font dan Ukuran font
pada tabel ini.
|
timeline.showBarLabels
|
Jika diatur ke false,
menghilangkan bar label. default adalah untuk menunjukkan kepada mereka.
|
timeline.showRowLabels
|
Jika diatur ke false,
menghilangkan label baris. default adalah untuk menunjukkan kepada mereka.
|
timeline.singleColor
|
Warna semua bar yang sama. Ditetapkan
sebagai nilai hex (misalnya, '# 8d8').
|
tooltip.isHtml
|
Set ke false untuk menggunakan
SVG-diberikan (bukan HTML-diberikan) tooltips. Lihat Menyesuaikan Keterangan
alat Konten untuk lebih jelasnya.
|
tooltip.trigger
|
Interaksi pengguna yang menyebabkan
tooltip yang akan ditampilkan: 'Fokus' - tooltip akan ditampilkan ketika
pengguna melayang di atas elemen. 'Tidak ada' - tooltip tidak akan
ditampilkan.
|
lebar
|
Lebar grafik, dalam piksel.
|
Berikut
adalah penjelasan dari tiap tiap bagiannya :
·
avoidOverlappingGridLines
bertujuan agar tidak ada garis atau bar yang saling menutupi atau tumpang
tindih. Pada saat elemen display (bar di Timeline) harus menutupi garis grid
maka perintah konfigurasi avoidOverlappingGridLines yang digunakan. Pada
dasarnya avoidOverlappingGridLines memiliki nilai true pada default. Jika garis
bar dapat terlihat maka nilia dapat diubah menjadi false. Tipe data yang
digunakan adalah tipe boolean.
·
backgroundcolor
yang berfungsi untuk memberikan warna pada latar belakang Timeline atau pada
bagian grafik utama. Warna yang dapat digunakan untuk background pada Timeline
dapat menggunakan warna HTML misal ingin menggunakan warna merah maka kita
ketik ‘red’ atau kode HTML warna merah yaitu ‘#00cc00’. Tipe data yang
digunakan untuk background adalah string atau object dengan nilai default
adalah warna white. Artinya jika kita tidak memberi kode warna maka warna
background akan tampil putih.
·
Colors
berbeda fungsi dengan backgroundcolor , colors berfungsi untuk memberikan warna
pada setiap chart elemen yang terdapat pada Timeline. Warna yang digunakan
menggunakan warna HTML. Contoh pada chart elemen kita ingin memberi warna merah
maka colors:['red','#004411'].
·
enableInteractivity
berfungsi untuk mengatur interaksi antar peristiwa terhadap pengguna. Apakah
grafik melempar peristiwa berbasis pengguna atau bereaksi terhadap interaksi
pengguna. Jika salah, grafik tidak akan 'pilih' atau peristiwa-interaksi
berbasis lainnya (tapi akan memilih peristiwa lain), dan tidak akan menampilkan
hovertext atau berubah tergantung pada input pengguna. Tipe yang digunakan
dalam enableInteractivity adalah boolena dengan nilai default adalah true.
·
Fontname
berfungsi untuk menampilkan atau mengubah jenis teks yang ingin digunakan. Tipe
data yang digunakan adalah string. Jika pada saat kita membuat sebuah Timeline
kita tidak menentukan jenis font maka secara default Timeline akan menggunakan
font arial.
·
Fontsize
berfungsi untuk menentukan ukuran dari teks yang kita gunakan pada Timeline.
Ukuran font default, dalam piksel, dari semua teks pada grafik. Kita dapat
mengganti ini dengan menggunakan properti untuk elemen grafik tertentu.
·
forcelFrame
untuk menarik grafik dalam sebuah frame inline. forcelFrame memiliki tipe data
boolean dengan nilai default false.
·
Height
adalah sebuag ketinggan chart dalam berbentuk pixel , ketinggian sebuah chart
dapat ditentukan memulai propertis height.
·
Timeline.barlabelstyle
digunakan untuk mengatur gaya teks per bar.
·
Timeline
colorbyrowlabel merupakan warna yang digunakan perkolom. Ini memiliki nilai
default false. Jika diatur ke benar, warna setiap bar pada baris yang
sama.,default adalah menggunakan satu warna per label bar.
·
Timeline
groupbyrowlabel jika diatur ke false, menciptakan satu baris untuk setiap entri
dataTable. Sedangkan nilai default adalah untuk mengumpulkan bar dengan label
baris yang sama dalam satu baris.
·
Timeline
rowlabelStyle untuk menentukan gaya teks per label
·
Timeline
showbarlabel jika diatur ke false, menghilangkan bar label.
·
Timeline
singlecolor untuk semua warna bar menjadi satu warna. Semua warna bar sama
ditetapkan dalan nilai hex. Singlecolor memiliki tipe data string dan default
nilainya adalah null
·
Tooltip
trigger adalah interaksi pengguna. Interaksi pengguna yang menyebabkan tooltip
yang akan ditampilkan.
·
Width adalah
ukuran lebar dari suaru chart dalam pixel.
4.1.3 Table Methods
Nama
|
|
draw(data, options)
|
Menarik visualisasi pada halaman.
Di belakang layar ini dapat mengambil gambar dari server atau membuat grafik
pada halaman menggunakan kode visualisasi terkait. Anda harus memanggil
metode ini setiap kali data atau pilihan berubah. objek harus ditarik dalam
elemen DOM berlalu ke konstruktor.
|
clearChart()
|
Membersihkan grafik, dan
melepaskan semua referensi yang dialokasikan.
|
getSelection()
|
Mengembalikan array entitas grafik
yang dipilih. entitas dipilih adalah bar, legends entries dan kategori. Untuk
grafik ini, hanya satu entitas dapat dipilih pada saat tertentu.
|
Menggambarkan
grafik dengan meneriman kode lanjut dari panggilan setelah readyevent akan
diterputus. Menggambarkan visualisasi pada halaman. Di belakang layar ini dapat
mengambil gambar dari server atau membuat grafik pada halaman menggunakan kode
visualisasi terkait. Kita harus memanggil metode ini setiap kali data atau
pilihan berubah objek harus ditarik dalam elemen DOM berlalu ke konstruktor.
·
Data yang
dipanggil pada method draw adalah sebuah DataView DataTable atau data yang akan
digunakan untuk menggambar grafik. Tidak ada metode standar untuk mengekstraksi
DataTable dari grafik. Sedangkan options yang dipanggil sebuah peta pasangan
nama / nilai pilihan kustom.
·
Clearchart
untuk membersihkan grafik, dan melepaskan semua sumber daya yang dialokasikan.
Mengembalikan array entitas grafik yang dipilih. entitas dipilih adalah bar,
entri legenda dan kategori. Untuk grafik ini, hanya satu entitas dapat dipilih
pada saat tertentu. Ini opsional terpapar oleh visualisasi yang ingin
membiarkan kita mengakses data yang sedang dipilih dalam grafik.
·
Selection_array,
Array objek yang dipilih, masing-masing menggambarkan elemen data dalam tabel
yang mendasari yang digunakan untuk membuat visualisasi (DataView atau
DataTable). Setiap objek memiliki sifat baris dan / atau kolom, dengan indeks
dari baris dan / atau kolom item yang dipilih dalam DataTable yang mendasari.
Jika properti baris adalah nol, maka seleksi adalah kolom; jika properti kolom
adalah null, maka seleksi adalah berturut-turut; jika keduanya non-null, maka
itu adalah item data tertentu. Anda dapat memanggil metode DataTable.getValue
() untuk mendapatkan nilai dari item yang dipilih. array diambil dapat disahkan
menjadi setSelection ().
Nama
|
|
error
|
Akan berhenti memproses jika
terjadi kesalahan saat mencoba untuk membuat grafik.Properti: id, message
|
onmouseover
|
Berhenti memproses ketika pengguna
mouses lebih 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
|
Berhenti memproses 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 metode panggilan
eksternal. Jika Anda ingin berinteraksi dengan grafik, dan memanggil metode
setelah Anda menarik itu, Anda harus mengatur pendengar untuk acara ini
sebelum Anda memanggil metode imbang, dan memanggil mereka setelah acara
berhenti memproses.Properti: none
|
select
|
Akan memproses ketika pengguna
mengklik sebuah entitas visual. Untuk mempelajari apa yang telah dipilih,
sebut getSelection ().Properti: none
|
4.2 Trendlines
Trendline adalah garis pada grafik mengungkapkan
keseluruhan arah data. Google Charts dapat secara otomatis menghasilkan
Trendlines untuk Scatter Charts, Bar Charts, Column Charts dan Line Charts.
Trendlines digunakan untuk grafis tampilan tren dalam data dan membantu
menganalisis masalah prediksi. Analisis semacam itu juga dinamai analisis
regresi. Dengan menggunakan analisis regresi, kita dapat memperpanjang
Trendline dalam grafik luar data aktual untuk memprediksi nilai masa depan.
Google Charts mendukung tiga jenis Trendlines yaitu : linear, polinomial dan
eksponensial.
4.2.1 Linear Trendlines
Sebuah
Trendline Linear adalah garis lurus yang paling mendekati data dalam grafik.
(Tepatnya, garis yang meminimalkan jumlah jarak kuadrat dari setiap titik).
Trendline Linear merupakan Trendline yang terbaik. Trendline ini cocok
digunakan dengan set data linier sederhana. Trendline linier biasanya
menunjukkan bahwa sesuatu yang meningkat atau menurun pada tingkat yang stabil.
Pada contoh
kasus grafik diatas merupakan contoh dari Linear Trenlines pada Scatter Chart.
Pada Linear Trendlines ini dapat dilihat perkembangan Rupiah dari tahun ke
tahun berbeda. Di tahun 2009 Rupiah menginjak angka 8900. Seiring berjalannya
waktu, rupiah di tahun 2017 naik ke angka 13450. Perkembangan rupiah disini
menunjukkan kestabilan dalam peningkatan dan penurunan dari tahun ke tahun.
Rata-rata dari tahun ke tahun rupiah mengalami kenaikan, hanya beberapa kali
saja mengalami penurunan.
Untuk
membuat sebuah Trendlines, kita menggunakan Google Linear Trendlines yang hanya
memanggil fungsinya saja. Berikut resource codenya, Dengan sedikit
pengecualian, semua halaman web dengan Google grafik harus memasukkan baris
berikut dalam <head> halaman web:
Baris
pertama dari contoh ini adalah loader itu sendiri. Kita hanya dapat memuat
loader satu kali tidak peduli berapa banyak grafik yang ingin di gambar.
Setelah loading loader, kita dapat memanggil fungsi google.charts.load satu
atau lebih kali untuk memuat paket untuk jenis bagan yang tertentu.
Argumen
pertama untuk google.charts.load adalah versi nama atau nomor, sebagai string.
Jika kita menentukan 'current', hal ini menyebabkan rilis resmi terbaru dari
Google grafik yang akan dimuat. Jika kita ingin mencoba kandidat untuk rilis
berikutnya, gunakan 'upcoming'. Secara umum akan ada sangat sedikit perbedaan
antara keduanya, dan mereka akan benar-benar identik. Alasan umum untuk
menggunakan mendatang adalah bahwa kita ingin menguji jenis grafik baru atau
fitur bahwa Google akan rilis pada bulan berikutnya atau lebih. Google
mengumumkan rilis mendatang di forum Google dan merekomendasikan kita untuk
memakai rilis Chart terbaru Google. Itu digunakan untuk memastikan perubahan
grafik yang kita terima.
Pada fungsi
drawchart() di atas, kita memasukkan variable dengan nama data dan memanggil
fungsi dari google kembali untuk membuat array dalam table. Kita masukkan data
dalam array table sesuai dengan gambar diatas. Kemudian variable options itu
digunakan untuk memberikan keterangan pada grafik. Tittle merupakan judul
grafik. Tittle hAxis dan vAxis adalah judul pada arah vertikal dana rah
horizontal. Jika kita ingin menggabar garis Trendline maka kita set
Trendlinesnya 0, jika tidak digambar maka set Trendlines menjadi 1. Kemudian
kita memanggil kembali fungsi google dengan model scatter chart dengan nama
‘chart_div’.
Pada bagian
penutup, kita akan memanggil nama id dari grafik linear Trendlines yang akan
kita gambar. Sebelumnya kita tutup terlebih dahulu bagian script dan bagian
headnya. Kita buat body dan panggil idnya untuk dapat menggambar Linear
Trendline. Nama idnya adalah chart_div. Kemudian kita atur pajang dan tinggi
dari grafik tersebut. Setelah itu kita tutup bagian body dan bagian htmlnya.
4.2.2 Exponential Trendlines
Trendline
eksponensial adalah garis melengkung yang digunakan saat nilai data naik atau
turun terus-menerus. Kita tidak dapat membuat Trendline eksponensial jika nilai
data kita berisi nol atau negatif.
Contoh kasus
diatas merupakan hubungan antara kecepatan berkendara mobil dan konsumsi bahan
bakar yang dihasilkan. Data di atas menandakan meningkatnya konsumsi bahan
bakar setiap kali pengendara meningkatkan kecepatan kendaraannya. Kita tidak
bisa membuat Trendline eksponensial apabila bahan bakar dan kecepatan
pengendara berisi nol atau negatif.
Untuk
membuat sebuah eksponensial Trendline, kita hanya memanggil fungsi yang sudah
disediakan oleh google chart.
Berikut
resource codenya :
Sama halnya
dengan Linear Trendlines, kita harus memasukkan terlebih dahulu head yang
memanggil fungsi javascript dari google chart, kemudian kita load loader google
chart tersebut tanpa pengecualian. Berapapun grafik yang ingin kita buat pada
eksponensial Trendlines, kita hanya butuh satu loader saja.
Setelah kita
deskripsikan loader, maka kita akan men setting callback dan packages tetapi
sebelum kita dapat menggunakan salah satu paket yang dimuat oleh
google.charts.load kita harus menunggu loading selesai. Tetapi kita tidak cukup
untuk hanya menunggu dokumen selesai loading, karena dapat mengambil beberapa
waktu sebelum loading ini selesai, kita perlu mendaftarkan fungsi callback. Ada
dua cara yang ini dapat dilakukan. Menentukan pengaturan callback dalam
panggilan google.charts.load atau memanggil setOnLoadCallback melewati sebuah
fungsi sebagai argumen.
Perhatikan
bahwa kita perlu memberikan definisi fungsi, dari pada memanggil fungsi. Fungsi
yang kita berikan dapat berupa fungsi bernama atau fungsi anonim. Bila paket
telah selesai loading, fungsi panggilan balik ini akan dipanggil tanpa argumen.
Loader juga akan menunggu untuk dokumen selesai loading sebelum memanggil
callback.
Jika kita
ingin menarik lebih dari satu tabel, kita juga dapat daftarkan lebih dari satu
fungsi callback, atau kita dapat menggabungkan mereka ke dalam salah satu
fungsi. Dalam fungsi arrat data, kita memanggil fungsi array tabel pada library
yang sudah di sediakan oleh google chart. Kemudian kita masukkan data yang
diinginkan. Setelah itu kita masuk ke pengaturan. Atur judul awal dengan nama
tittle, kemudian atur judul grafik untuk garis X dan Y secara horizontal dan
vertikal dengan max value yang sesuai. Panggil fungsi pada type dengan fungsi
exponential. Setelah itu kita gambar grafik menggunakan fungsi scatter chart
dan panggil juga id dari chart eksponensialnya bernama chart_div2.
Pada bagian
penutup ini, kita akan menutup bagian script dan head terlebih dahulu, kemudian
kita buat body yang isinya memanggil id grafik eksponensialnya tersebut yaitu
chart_div2, kemudian atur panjang dan tinggi grafik. Setelah itu tutup body dan
tutup htmlnya.
4.2.3 Polynomial Trendlines
Trendline
Polinomial adalah garis melengkung yang digunakan saat data berfluktuasi.
Sangat berguna, misalnya, untuk menganalisis keuntungan dan kerugian atas
kumpulan data besar. Urutan polinomial dapat ditentukan oleh jumlah fluktuasi
dalam data atau oleh berapa banyak tikungan (bukit dan lembah) muncul dalam
kurva. Order 2 polinomial Trendline umumnya memiliki hanya satu bukit atau
lembah. Memesan 3 umumnya memiliki satu atau dua bukit atau lembah. Urutan 4
umumnya memiliki hingga tiga hills atau lembah. Berikut ini adalah contoh kasus
umur dengan berat badan.
Ini
merupakan contoh kasus perbandingan umur dengan berat badan dari tahun ke
tahun. Dalam grafik menunjukkan semakin tua seseorang, semakin naik berat
badannya.
Untuk penjelasan kode grafik di atas adalah berikut ini.
Sama dengan
grafik sebelumnya, pertama kita harus memasukkan loadernya terlebih dahulu.
Setelah itu baru kita masukkan google chart load. Dalam google chart load,
terdapat versi load atau nomor untuk di load, yaitu versi sekarang dan versi
yang akan dating. Argumen pertama dari panggilan google.charts.load adalah
versi dari google chart. Ada dua versi khusus untuk sekarang dan beberapa versi
frozen. Untuk me-load versi frozen ketik kode berikut ini. Menurut google
chart, versi frozen tidak disarankan karena memiliki masalah keamanan. Google
Chart menyarankan sebaiknya menggunakan versi yang baru saja.
Ini
merupakan array tabel dalam fungsi drawChart. Kita masukkan umur dan berat
badan sesuai dengan data yang diinginkan. Kemudian kita setting optons pada
grafik. Tittle merupakan judul dari grafik yang kita gambar, hAxis dan vAxis
merupakan judul dalam horizontal dan vertikal yang memiliki value max 50. Kita
dapat menambahkan judul sesuai dengan keiinginan kita. Kemudian kita panggil
fungsi scatter chart dengan nama grafik polynomial2_div. itu digunakan untuk
memanggil library pada google chart agar kita dapat menggambar grafik
polynomial.
Setelah
semua pengaturan sudah dilakukan, maka kita tinggal menutup script dan headnya
saja. Kemudian kita buat body yang isinya memanggil kembali id dari grafik
polynomial tersebut dengan nama polynomial2_div. atur juga panjang dan tinggi
pada grafik. Setelah itu tutup body dan tutup htmlnya.
4.3 Waterfall
Waterfall
Chart adalah bentuk visualisasi data yang membantu dalam memahami efek
kumulatif dari berurutan memperkenalkan nilai-nilai positif atau negatif.
Waterfall Chart juga dikenal sebagai Flying Bricks Chart atau Mario Chart
karena jelas seperti suspensi kolom (bricks) di udara. Pada bidang keuangan,
itu disebut sebagai jembatan.
Waterfall
Chart biasanya digunakan untuk memahami bagaimana nilai awal dipengaruhi oleh
serangkaian nilai-nilai positif atau negatif menengah. Biasanya nilai awal dan
akhir yang diwakili oleh seluruh kolom, sedangkan nilai menengah dilambangkan
dengan kolom mengambang. Kolom yang berbeda warna untuk membedakan antara
nilai-nilai positif dan negatif. Sebuah Waterfall chart yang khas digunakan
untuk menunjukkan bagaimana nilai awal meningkat dan menurun serangkaian nilai
menengah, yang mengarah ke nilai akhir.
Mari kita
ambil contoh sederhana untuk memahami hal-hal yang lebih baik. Contoh paling
sederhana akan audit inventarisasi pria t-shirt di outlet ritel. Anda perlu
mencari tahu berapa banyak dijual t-shirt Anda miliki di tangan untuk memulai
bulan depan dengan. Biasanya, akan ada beberapa unit dalam stok untuk memulai
bulan dengan. Seiring jalannya t-shirt berada di layar dan berbagai orang
mencoba keluar, beberapa unit akan rusak. Beberapa unit-unit yang rusak dapat
diperbaharui untuk menambah saham, dan akhirnya kami tiba di jumlah unit yang
terjual.
Jadi dalam
grafik air terjun ini, nilai awal dari "unit di saham" melewati
serangkaian pasang surut, satu dan satu ke bawah tepatnya untuk mendapatkan
nilai akhir dari unit yang terjual.
4.3.1 Varian Waterfall Chart
Grafik
Waterfall memiliki sejumlah varian. Sementara varian ini mungkin tidak
melakukan keadilan untuk definisi grafik air terjun, tetapi mereka datang
sangat berguna dalam beberapa situasi.
Mari kita
mempertimbangkan situasi di mana Anda perlu untuk merencanakan laba tahunan
perusahaan Anda. Jadi Anda akan menunjukkan berbagai sumber Anda pendapatan,
tambahkan mereka dan memotong semua biaya Anda untuk tiba di total keuntungan
(atau kerugian).
varian minor
lain dari grafik terjun adalah mungkin di mana Anda menunjukkan jumlah menengah
sepanjang jalan sebelum menunjukkan jumlah kumulatif akhir. Dalam contoh di
atas, kita bisa menunjukkan jumlah perantara untuk total pendapatan dan total
biaya sebelum menunjukkan total keuntungan.
Jumlah
menengah datang sangat berguna ketika ada banyak data untuk meringkas banyak
sebelum nilai akhir pada grafik. Misalnya, alih-alih pendapatan produk jika
kita menunjukkan pendapatan dari produk berbasis web dan produk berbasis
desktop secara terpisah, dan serta kustomisasi layanan dan dukungan bukannya
layanan secara keseluruhan, total jumlah pendapatan akan sangat berguna di
sana.
