Tugas Softskill Design Grafik dengan Metode Timeline, Trendsline , dan Waterfall (BAB 4)

BAB IV

Contoh Kasus Pemanfaatan Google API

Timeline

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.

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:

Berikut penjelasan mengenai tabel konfigurasi pada Timeline.

1. 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.
2. Berikutnya terdapat 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.
3. 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'].
4. Pada 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.
5. 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.
6. 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.
7. forcelFrame untuk menarik grafik dalam sebuah frame inline. forcelFrame memiliki tipe data boolean dengan nilai default false
8. Height adalah sebuag ketinggan chart dalam berbentuk pixel , ketinggian sebuah chart dapat ditentukan memulai propertis height.
9. Timeline.barlabelstyle digunakan untuk mengatur gaya teks per bar. Dapat digunakan untuk fontname dan fontsize.
10. 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.
11. 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.
12. Timeline rowlabel untuk menentukan gaya teks per label . Warna dapat berupa string warna HTML, misalnya 'merah' atau '# 00CC00' Juga lihat fontName dan fontsize.
13. Pada showbarlabel jika diatur ke false, menghilangkan bar label. Sedangkan default adalah untuk menunjukkan kepada user.
14. Pada 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 , seperti :

• 'Fokus' - tooltip akan ditampilkan ketika pengguna berada dekat di atas elemen. 
• 'None' - tooltip tidak akan ditampilkan. 

Tooltip memiliki tipedata string dan nilai default focus , maka tanpa diatur nilai tooltip adalah fokus atau tooltip akan ditampilkan ketika pengguna berada dekat di atas elemen.

Tabel Methods

Methods adalah sebuah tindakan yang dapat dilakukan oleh objek. Berikut kita bahas beberapa methods yang terdapat pada Timeline , sebagai berikut :

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. Contoh termasuk tinggi dan lebar, warna latar belakang, dan keterangan. Dokumentasi visualisasi harus daftar pilihan yang tersedia, dan harus mendukung opsi default jika kita tidak menentukan parameter ini. Kita dapat menggunakan JavaScript sintaks literal untuk lulus dalam peta pilihan: misalnya, {x: 100, y: 200, judul: 'Contoh'}.

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 ().
Berikut adalah contoh yang menggunakan get selection.

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.

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.

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.

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. 

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.

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.