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.
Figure 4.1:
·
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.
Figure 4.2:
·
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.
Figure 4.3:
·
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.
Figure 4.4:
Figure 4.5:
Figure 4.6:
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
|
Figure 4.7:
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:
Figure 4.8:
Figure 4.9:
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 :
Figure 4.10:
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.
