Grafik Mudah dengan Alat Bagan Google

() translation by (you can also view the original English article)

Google Chart Tools menyediakan beberapa cara untuk dengan mudah menambahkan grafik ke halaman web mana pun. Bagan mungkin statis atau interaktif, dan dalam tutorial ini, kita akan belajar cara menggunakan keduanya.

Grafik Statis vs Interaktif

Ada dua jenis grafik yang dapat dihasilkan Alat Grafik: grafik gambar (grafik statis) dan grafik interaktif.

Gambar Bagan .- Gunakan Google Bagan API.
Grafik Interaktif. - Gunakan Google Visualisasi API.

Bagan Gambar cukup mudah digunakan, namun bagan interaktif jauh lebih fleksibel, karena dapat memicu peristiwa yang dapat kita gunakan untuk berinteraksi dengan elemen lain di halaman.

Pertama, Cara Super-Mudah

Ya, ada cara super mudah untuk menyertakan bagan di halaman Anda - semudah menulis URL seperti ini:

1
2	http://chart.apis.google.com/chart?cht=p3&chs=450x200&chd=t:2,4,3,1&chl=Phones\|Computers\|Services\|Other&chtt=Company%20Sales&chco=ff0000

jika Anda menyalin dan menempelkan url ini di browser Anda, Anda akan melihat yang berikut:

Anda dapat menempatkan gambar di mana saja di halaman Anda menggunakan URL sebagai atribut src dari tag gambar:

1
2	<img src='http://chart.apis.google.com/chart?cht=p3&chs=450x200&chd=t:2,4,3,1&chl=Phones\|Computers\|Services\|Other&chtt=Company%20Sales&chco=ff0000'>

Itu Google Charts API. Permintaan dikirim sebagai GET atau POST URL, dan server Google charts mengembalikan gambar PNG sebagai tanggapan. Jenis bagan, data, dan opsi semuanya ditentukan dalam daftar pertanyaan URL. API menentukan cara melakukan itu. Mari kita tinjau opsi yang berbeda.

http://chart.apis.google.com/chart?

Ini adalah URL dasar; kami akan menggunakannya untuk semua permintaan bagan gambar. Sisanya adalah parameter dalam bentuk nama = nilai yang dipisahkan oleh &.

Parameter Wajib

Hanya ada tiga parameter wajib: cht, chs, dan chd. Sisanya adalah opsional.

cht=p3

Ini adalah tipe bagan. Kami menggunakan diagram pai 3D yang merupakan p3. Anda dapat mengunjungi galeri bagan untuk semua jenis bagan yang tersedia.

chs=450x200

Ini adalah ukuran bagan dalam piksel (lebar x tinggi).

chd=t:2,4,3,1

Ini adalah data untuk ditampilkan dalam bagan. Huruf pertama (t) menunjukkan format data. Dalam hal ini, kami menggunakan format teks dasar yang merupakan daftar nilai yang dipisahkan koma.

Parameter opsional

Setiap jenis bagan memiliki beberapa parameter opsional untuk mengonfigurasi beberapa aspek grafik Anda: judul, label, jenis font, warna, gradien, dll. Ini adalah apa yang kami sertakan:

chl=Phones|Computers|Services|Other

Bagan label untuk setiap irisan pai.

chtt=Company%20Sales

Judul grafik.

chco=ff0000

Bagan warna dalam format heksadesimal rrggbb.

Jika Anda menentukan satu warna tunggal, irisan akan memiliki gradasi yang berbeda. Anda juga dapat menentukan gradien dengan dua warna (chco = ff0000,00ff00) atau warna untuk setiap potong (chco = ff0000 | 3355aa | 8322c2 | 112233).

Ini untuk bagan gambar. Tidak banyak untuk itu! Ada banyak jenis bagan berbeda yang tersedia, dan, jika Anda bermain dengan parameter, Anda bisa mendapatkan beberapa hasil yang sangat bagus. Google Live Chart Playground adalah alat yang sangat baik untuk melakukan ini. Anda bermain dengan parameter dan melihat perubahan pada gambar yang dihasilkan - cara mudah untuk menyempurnakan url untuk grafik Anda!

Grafik Interaktif

Untuk memasukkan grafik interaktif di halaman web Anda, Anda harus menggunakan API yang berbeda: Google Visualization API. Dalam hal ini, antarmuka bukan URL. Anda harus menggunakan perpustakaan JavaScript, dan menulis beberapa baris kode - tetapi tidak ada yang sulit.

Ada galeri visualisasi siap pakai (grafik) yang dapat Anda gunakan. Anda juga dapat membuat dan membagikan grafik Anda sendiri, tetapi visualisasi di galeri mungkin akan mencakup sebagian besar kebutuhan Anda untuk menampilkan data.

Tingkat interaktivitas tergantung pada visualisasi tertentu yang Anda gunakan. Biasanya, grafik akan bereaksi dengan cara tertentu ketika diklik (menunjukkan ujung alat atau menghidupkan), tetapi fitur yang sangat kuat adalah mereka dapat memicu peristiwa dan Anda dapat mendaftarkan panggilan balik untuk melakukan tindakan apa pun yang terkait dengan peristiwa itu. Contoh acara dapat memilih bilah atau sepotong pai, mouseOver, mouseOut, dll.

Kami akan menggunakan data lokal untuk memberi makan visualisasi dalam contoh kami, tetapi Anda dapat memperoleh data Anda dengan cara lain. Opsi umum adalah mengambil data dari database menggunakan AJAX. Anda bahkan dapat menggunakan Visualization API; itu juga mendefinisikan cara untuk meminta dan menawarkan (untuk server) data dalam format yang dapat langsung digunakan dalam visualisasi apa pun, tetapi kami tidak akan membahasnya di sini.

Memformat Data

Tidak masalah bagaimana kita mendapatkan data kita, tetapi semua visualisasi perlu menerimanya dalam objek DataTable. Ini pada dasarnya sebuah tabel dengan baris dan kolom. Setiap kolom didefinisikan dengan tipe data tertentu (dan ID dan Label yang opsional).

Untuk referensi sel tertentu dalam tabel, Anda menggunakan pasangan (baris, kolom). Baris selalu berupa angka, dimulai dari nol. Kolom juga dapat berupa angka berbasis nol atau ID opsional.

Jika kami ingin menampilkan penghasilan perusahaan kami pada tahun 2009 dalam bagan kolom, kami harus menyiapkan data dengan cara berikut:

Kuartir 2009	Pendapatan
Q1	308
Q2	257
Q3	375
Q4	123

Dua kolom: yang pertama (dengan tipe 'string') adalah label untuk setiap bilah di bagan, dan yang kedua (dengan tipe 'number') adalah nilai untuk bilah itu. Kami memiliki empat baris yang berarti juga memiliki empat bar untuk ditampilkan.

Bagaimana kita meletakkannya di objek DataTable? Ini adalah kode untuk melakukannya - setiap baris dijelaskan nanti:



//create data table object
var dataTable = new google.visualization.DataTable();

//define columns
dataTable.addColumn('string','Quarters 2009');
dataTable.addColumn('number', 'Earnings');

//define rows of data
dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

Pertama-tama kita membuat objek DataTable kita dengan:

1
2	var dataTable = new google.visualization.DataTable();

Kemudian kita mendefinisikan dua kolom dalam tabel kita menggunakan metode addColumn(). Nilai pertama adalah tipe dan nilai kedua adalah label opsional.

1
2	dataTable.addColumn('string','Quarters 2009');
3	dataTable.addColumn('number', 'Earnings');

Dan akhirnya, kita mendefinisikan baris data menggunakan metode addRows().

1
2	dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

Setiap baris adalah array, dan semua data juga dilampirkan dalam array lain.

Baris juga dapat didefinisikan satu baris sekaligus:

1
2	dataTable.addRow(['Q1',308]);

atau bahkan satu sel pada satu waktu:

1
2	data.setValue(0, 0, 'Q1');

Di sini, dua angka pertama masing-masing adalah baris dan kolom.

Ini adalah cara untuk membuat objek DataTable. Setiap visualisasi perlu dimuat dengan data dalam format ini. Itu tidak berarti bahwa tabel tersebut sama untuk setiap visualisasi. Jumlah dan jenis kolom dan baris tertentu harus diperiksa dalam dokumentasi untuk setiap bagan.

Memvisualisasikan Data kami sebagai Bagan Kolom

Untuk contoh pertama ini, kami akan menggunakan Bagan Kolom untuk menyajikan data kami. Di Galeri Visualisasi Google, kita dapat mengklik jenis bagan apa saja untuk melihat dokumentasi dan contoh.

Untuk menggunakan visualisasi apa pun, kita harus memuat Google AJAX API sebelumnya; ini menyediakan fungsionalitas inti yang diperlukan di banyak API Google lainnya.

1
2	<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Now we can load the Visualization API using the google.load() function (from the AJAX API):

1
2	google.load('visualization', '1', {'packages': ['columnchart']});

Parameter kedua, '1,' merujuk ke versi API untuk memuat ('1' berarti versi saat ini). 'packages' adalah larik dengan semua visualisasi yang akan kita gunakan. Dalam hal ini, kita hanya akan menggunakan satu: bagan kolom.

Pada titik ini, kami memiliki pustaka yang diperlukan untuk membuat objek DataTable kami dan menampilkan grafik kami, namun, kami perlu memastikan bahwa visualisasi dimuat sepenuhnya, jika tidak kita akan mendapatkan kesalahan JavaScript dan grafik kita tidak akan ditampilkan.

Cara untuk melakukan ini adalah dengan mendaftarkan panggilan balik. Fungsi akan dipanggil ketika visualisasi (API dan paket) dimuat.

1
2	//set callback
3	google.setOnLoadCallback (createChart);

Function createChart adalah tempat kita membuat tabel data dan bagan kita. Kode terakhir, lengkap, adalah:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Google Charts Tutorial</title>

        <!-- load Google AJAX API -->
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            //load the Google Visualization API and the chart
            google.load('visualization', '1', {'packages': ['columnchart']});

            //set callback
            google.setOnLoadCallback (createChart);

            //callback function
            function createChart() {

                //create data table object
                var dataTable = new google.visualization.DataTable();

                //define columns
                dataTable.addColumn('string','Quarters 2009');
                dataTable.addColumn('number', 'Earnings');

                //define rows of data
                dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

                //instantiate our chart object
                var chart = new google.visualization.ColumnChart (document.getElementById('chart'));

                //define options for visualization
                var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};

                //draw our chart
                chart.draw(dataTable, options);

            }
        </script>

    </head>

    <body>

        <!--Div for our chart -->
        <div id="chart"></div>

    </body>
</html>

Objek grafik dibuat dengan baris ini:

1
2	var chart = new google.visualization.ColumnChart (document.getElementById('chart'));

Argumen adalah referensi DOM ke elemen yang mengandung visualisasi. Dalam hal ini, kami memiliki <div id="chart"></div>

Kemudian, kita mendefinisikan opsi yang kita inginkan dan menggambar grafik:

1
2	var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};
3	chart.draw(dataTable, options);

Grafik kami terlihat seperti ini:

Catatan: Semua gambar di sini statis untuk membuat tutorial tersedia terlepas dari browser Anda atau pengaturan JavaScript Anda. Tinjau demo langsung untuk versi interaktif.

Dan Diagram Pai/Lingkaran Juga

Keuntungan memiliki format data yang jelas adalah bahwa begitu Anda tahu cara membuat dan mengisi objek DataTable, Anda tahu cara memberi makan visualisasi apa pun. Anda hanya perlu memeriksa dokumentasi untuk melihat tabel tertentu (jumlah dan jenis kolom) yang harus Anda bangun.

Untuk diagram lingkaran/pai, kita dapat menggunakan tabel yang sama persis dengan yang kita miliki sekarang. Mari kita tambahkan diagram lingkaran di halaman yang sama.

Kita harus menambahkan paket baru di baris google.load():

1
2	google.load('visualization', '1', {'packages':['columnchart','piechart']});

dan memperluas fungsi createChart kita dengan dua baris ini:

1
2	var secondChart = new google.visualization.PieChart (document.getElementById('secondChart'));
3	secondChart.draw(dataTable, options);

Kode lengkapnya adalah:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Google Charts Tutorial</title>

        <!-- load Google AJAX API -->
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            //load the Google Visualization API and the chart
            google.load('visualization', '1', {'packages':['columnchart','piechart']});

            //set callback
            google.setOnLoadCallback (createChart);

            //callback function
            function createChart() {

                //create data table object
                var dataTable = new google.visualization.DataTable();

                //define columns
                dataTable.addColumn('string','Quarters 2009');
                dataTable.addColumn('number', 'Earnings');

                //define rows of data
                dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

                //instantiate our chart objects
                var chart = new google.visualization.ColumnChart (document.getElementById('chart'));
                var secondChart = new google.visualization.PieChart (document.getElementById('Chart2'));

                //define options for visualization
                var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};

                //draw our chart
                chart.draw(dataTable, options);
                secondChart.draw(dataTable, options);

            }
        </script>

    </head>

    <body>

        <!--Divs for our charts -->
        <div id="chart"></div>
        <div id="Chart2"></div>


    </body>
</html>

Dan grafik yang dihasilkan:

Catatan: periksa demo langsung untuk versi interaktif.

Ini mudah dalam hal ini, karena kedua visualisasi menggunakan kolom dan baris tabel yang sama. Tetapi ada visualisasi yang membutuhkan lebih banyak kolom atau kolom dari jenis yang berbeda, dan Anda tidak dapat menggunakan tabel data secara langsung. Namun, Anda bisa menyelesaikan ini dengan membuat tampilan berbeda dari tabel asli untuk mengumpankan visualisasi. Kami akan segera memeriksanya.

Lebih Banyak Kolom untuk Bagan Kolom Kami!

Tabel data untuk bagan kolom tidak harus sesederhana seperti pada contoh sebelumnya. Kita dapat memiliki bar yang mewakili penghasilan untuk setiap kuartal dalam tiga tahun terakhir, misalnya. Dalam hal ini data
tabel akan terlihat seperti ini:

Kuartir	Penghasilan 2009	Penghasilan 2008	Penghasilan 2007
Q1	308	417	500
Q2	257	300	420
Q3	375	350	235
Q4	123	100	387

Satu-satunya kode yang harus kita ubah dari contoh pertama kita adalah objek DataTable, untuk menambahkan dua kolom lebih banyak dan lebih banyak data di setiap baris:


//create data table object
var dataTable = new google.visualization.DataTable();

//define columns
dataTable.addColumn('string','Quarters');
dataTable.addColumn('number', 'Earnings 2009');
dataTable.addColumn('number', 'Earnings 2008');
dataTable.addColumn('number', 'Earnings 2007');

//define rows of data
dataTable.addRows([['Q1',308,417,500], ['Q2',257,300,420],['Q3',375,350,235],['Q4', 123,100,387]]);

Sisa kode tidak berubah. Bagan yang dihasilkan adalah:

Tetapi, bagaimana jika sekarang kita ingin menggunakan diagram lingkaran untuk mewakili bagian dari data ini? Kami tidak dapat menggunakan tabel data yang sama seperti yang kami lakukan sebelumnya, karena diagram lingkaran membutuhkan tabel dua kolom (label slice dan nilai). Ada cara mudah untuk mendapatkan tabel berbeda dari objek DataTable yang ada dan menggunakannya untuk memberi makan bagan: tampilan data.

Menggunakan Tampilan Data

Tampilan adalah cara untuk mengadaptasi tabel kami untuk visualisasi yang berbeda. Jika sekarang kita ingin menampilkan, di halaman yang sama, diagram lingkaran yang menunjukkan distribusi pendapatan triwulanan untuk tahun lalu, tabel yang kita butuhkan hanyalah ini:

Kuartir	Penghasilan 2009
Q1	308
Q2	257
Q3	375
Q4	123

Tampilan data (objek DataView) memungkinkan Anda untuk menggunakan hanya sebagian dari data asli. Anda dapat menyusun ulang atau menduplikasi kolom dan baris atau memperkenalkan kolom dengan nilai yang dihitung.

Pertama, buat objek View:

1
2	var view = new google.visualization.DataView(dataTable);

Tampilan data diinisialisasi dengan tabel asli dan kemudian kita menggunakan metode DataView untuk menyembunyikan, menampilkan atau memfilter kolom atau baris (setColumns(), hideColumns(), setRows(), hideRows(), getFilteredRows, getColumnRange, dll)

Kami dapat memfilter tabel asli untuk mendapatkan hanya dua kolom pertama (kolom 0 dan 1) menggunakan setColumns ():

1
2	view.setColumns([0, 1]);

Sekarang kita bisa menggambar diagram lingkaran menggunakan tampilan ini sebagai tabel data:

1
2	secondChart.draw(view, options);

Ingat bahwa kita harus memasukkan paket piechart dengan google.load (), dan kita harus membuat objek pieChart dengan:

1
2	var secondChart = new google.visualization.PieChart

Sekarang kita bisa melihat kedua grafik yang dihasilkan menggunakan tabel data yang sama:

Memperkenalkan Acara

Acara menyediakan cara mudah untuk menghubungkan visualisasi Anda dengan elemen lain di halaman Anda. Visualisasi dapat memicu beberapa peristiwa, dan Anda dapat mendaftarkan pendengar untuk bereaksi terhadap peristiwa itu dan melakukan beberapa tindakan. Model acara mirip dengan model acara browser. Sekali lagi, kita harus melihat dokumentasi untuk memeriksa peristiwa yang dipicu untuk setiap visualisasi.

Untuk menunjukkan cara kerja acara, mari kembali ke contoh pertama kami, bagan kolom paling sederhana:

Grafik ini memicu peristiwa saat mouseover, mouseout dan pilih. Itu berarti kita dapat membuatnya lebih interaktif daripada standarnya.

Karena grafik ini menunjukkan penghasilan untuk perusahaan, mungkin menarik untuk menampilkan pesan dengan penjelasan singkat tentang pencapaian atau penjualan paling penting untuk setiap triwulan ketika pengguna menempatkan penunjuk di atas kolom (acara onmouseover).

Callback kami akan menjadi showDetails(), dan kami mendaftarkannya untuk acara onmouseover:

1
2	google.visualization.events.addListener(chart, 'onmouseover', showDetails);

Parameter pertama adalah variabel yang berisi objek grafik kami.

Kita juga perlu menyembunyikan pesan ketika pointer keluar dari kolom sehingga kita perlu fungsi lain untuk dipanggil ketika peristiwa onmouseout memicu:

1
2	google.visualization.events.addListener(chart, 'onmouseout', hideDetails);

Di dalam <body> atau halaman HTML kami, kami harus mendefinisikan empat div dengan pesan:


    <body>

        <!--Div for our chart -->
        <div id="chart"></div>

        <!--Divs for our messages -->
        <div id="details0">These are the details for Q1...</div>
        <div id="details1">Here you have the numbers for Q2...</div>
        <div id="details2">Explanations for the third quarter...</div>
        <div id="details3">Q4 was as expected...</div>

    </body>

Dan kemudian fungsi panggilan balik hanya menampilkan atau menyembunyikan pesan yang sesuai:


    function showDetails(e) {
        switch (e['row']) {
            case 0: document.getElementById('details0').style.visibility='visible';
                break;
            case 1: document.getElementById('details1').style.visibility='visible';
                break;
            case 2: document.getElementById('details2').style.visibility='visible';
                break;
            case 3: document.getElementById('details3').style.visibility='visible';
                break;
        }
    }

    function hideDetails(e) {
        switch (e['row']) {
            case 0: document.getElementById('details0').style.visibility='hidden';
                break;
            case 1: document.getElementById('details1').style.visibility='hidden';
                break;
            case 2: document.getElementById('details2').style.visibility='hidden';
                break;
            case 3: document.getElementById('details3').style.visibility='hidden';
                break;
        }
    }

Fungsi kami menerima parameter tunggal: acara dipecat. Objek ini memiliki semua informasi yang tersedia tentang detail acara.

Untuk mengetahui bilah apa yang kita lewati, kita periksa properti 'row' dari objek acara. Informasi ini merujuk pada baris dan kolom objek DataTable, tetapi kita tahu bahwa baris 0 sesuai dengan Q1, kolom pertama, dan seterusnya.

Catatan: Tidak semua acara lulus objek acara. Kadang-kadang Anda harus menggunakan metode untuk mendapatkan informasi yang Anda butuhkan, baca dokumentasi visualisasi untuk mengetahui cara mendapatkan informasi relatif terhadap peristiwa yang dipecat.

Daftar berikut menyertakan kode lengkap untuk contoh ini. Saya telah memasukkan potongan CSS internal pendek untuk menyembunyikan div pesan, dan memberikan pemformatan minimal.


<html>
    <head>
        <title>Google Chart Tools Tutorial</title>

        <style type="text/css">

            #details0, #details1, #details2, #details3 {
                visibility:hidden;
                background: #FFFF7F;
                border: solid 1px;
                width: 350px;
                padding: 5px;
                font-size:smaller;
                position:absolute;
                top: 250px;

            }

        </style>

        <!-- load Google AJAX API -->
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            //load thee Google Visualization API and the chart
            google.load('visualization', '1', {'packages': ['columnchart']});

            //set callback
            google.setOnLoadCallback (createChart);

            //callback function
            function createChart() {

                //create data table object
                var dataTable = new google.visualization.DataTable();

                //define columns
                dataTable.addColumn('string','Quarters 2009');
                dataTable.addColumn('number', 'Earnings');

                //define rows of data
                dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

                //instantiate our chart objects
                var chart = new google.visualization.ColumnChart (document.getElementById('chart'));

                //define options for visualization
                var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};

                //draw our chart
                chart.draw(dataTable, options);

                //register callbacks
                google.visualization.events.addListener(chart, 'onmouseover', showDetails);
                google.visualization.events.addListener(chart, 'onmouseout', hideDetails);
            }

            function showDetails(e) {
                switch (e['row']) {
                    case 0: document.getElementById('details0').style.visibility='visible';
                        break;
                    case 1: document.getElementById('details1').style.visibility='visible';
                        break;
                    case 2: document.getElementById('details2').style.visibility='visible';
                        break;
                    case 3: document.getElementById('details3').style.visibility='visible';
                        break;
                }
            }

            function hideDetails(e) {
                switch (e['row']) {
                    case 0: document.getElementById('details0').style.visibility='hidden';
                        break;
                    case 1: document.getElementById('details1').style.visibility='hidden';
                        break;
                    case 2: document.getElementById('details2').style.visibility='hidden';
                        break;
                    case 3: document.getElementById('details3').style.visibility='hidden';
                        break;
                }
            }

        </script>
    </head>

    <body>

        <!--Div for our chart -->
        <div id="chart"></div>

        <!--Divs for our messages -->
        <div id="details0">These are the details for Q1...</div>
        <div id="details1">Here you have the numbers for Q2...</div>
        <div id="details2">Explanations for the third quarter...</div>
        <div id="details3">Q4 was as expected...</div>

    </body>

</html>

Dan inilah hasilnya:

Sekali lagi, periksa demo langsung untuk melihat interaktivitas.

Playground

Seperti gambar statis, ada Google Code Playground tempat Anda dapat bermain dengan visualisasi dan parameter Anda, dan melihat hasilnya:

Kesimpulan

Semoga ini cukup untuk Anda memulai dengan Google Chart Tools. Setelah Anda menguasainya, Anda akan menemukan bahwa tingkat fleksibilitas yang sangat besar tersedia untuk Anda di aplikasi web Anda. Terima kasih sudah membaca!