Membuat Grafik Pada Halaman Website Dengan Google Chart API

14 11 2010

Hallo para pembaca blog localhost80 yang budiman, tulisan kali ini masih akan membahas tentang teknik pembuatan grafik pada suatu halaman website, tetapi pada kesempatan kali ini kita akan membuat grafik tersebut dengan memanfaatkan Google Chart Tools atau sering kita kenal (dengar) dengan Google Chart API. Nah, apa sih Google Chart API itu ??? apa bedanya dengan pembuatan grafik pada website yang lain (seperti tulisan terdahulu menggunakan jpgraph, di url ini). Kalau kita membangun grafik dengan jpgraph, sebelumnya kita harus mengunduh modul-modul jpgraph yang berisi class-class atau function program. Sedangkan pada Google Chart API ini, kita tidak perlu mengunduh modul-modul serupa, tetapi kita hanya memodifikasi String URL untuk membangun sebuah grafik yang dinamis, indah, dan handal tentunya. Gambar berikut menunjukkan beberapa model grafik berbasis website yang dapat dihasilkan dengan Google Chart API tersebut.

Gambar 1. Beberapa model grafik yang dibangun dengan Google Chart API.

Mungkin kawan bertanya didalam hati sanubari masing-masing, String URL tuh yang gimana sih ??? Ok, agar lebih memahami maksud daripada kata-kata tulisan ini ada baiknya kita berikan suatu contoh sederhana, Sbb :

Nah, bagaimana kawan ??? cukup mudah dan sederhana bukan ???

Kemudian ada pertanyaan lagi nih ceritanya….kalau kita ingin mengubah data yang ada di grafik tersebut gimana donk ??? Ok, selanjutnya akan kita analisis perbagian String URL dari contoh tadi agar kawan-kawan dapat memodifikasi tampilan grafik tersebut dengan data maupun tampilan yang lainnya.

Pada dasarnya, semua Chart atau grafik pada Google Chart API memiliki format sebagai berikut :

http://chart.apis.google.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...

Semua URL pembentuk grafik ini dimulai dengan http://chart.apis.google.com/chart? kemudian diikuti oleh parameter lain yang menentukan data grafik dan tampilan. Grafik pada Google Chart API minimal memerlukan parameter-parameter berikut : CHT (Chart Type), CHD (Chart Data), dan CHS (Chart Size) selain parameter tambahan lainnya. Mari sekarang kita tinjau satu persatu (di preteli – dlm bahasa jawanya) dari contoh tadi :

  • http://chart.apis.google.com/chart? ====> ini adalah URL dasar pada semua permintaan grafik.
  • cht=p3 ====> Jenis grafik 3D lingkaran (pie).
  • chs=250x100 ====> Ukuran grafik (Lebar x Tinggi) dalam piksel.
  • chd=t:60,40 ====> Data grafik, yang merupakan format text sederhana dan masih ada format lainnya.
  • chl=Hello|World ====> Label pada irisan grafik lingkaran (pie).
  • & ====> Merupakan karakter yang digunakan untuk memisahkan antar parameter.

Pada Google Chart API juga menyediakan sebuah wizard yang digunakan untuk membuat grafik secara instant tanpa pengetahuan pemrograman yang rumit hanya dengan memasukkan data-data anda kemudian diproses oleh mbah google jadilah sebuah tampilan grafik dari data-data yang anda masukkan sebelumnya. Pembuatan grafik secara manual pun juga dirasa masih cukup sederhana, mengingat aplikasi pembuat grafik lainnya yang membutuhkan modul-modul eksternal tambahan. Dalam pembuatan grafik secara manual, dapat kita kembangkan ke berbagai aspek pemrograman, khususnya pemrograman web. Berikut adalah beberapa langkah-langkah umum yang diperlukan dalam pembuatan grafik ini secara manual :

  • Menentukan Jenis Grafik.
  • Menyediakan dan Menentukan Format Data.
  • Menentukan Ukuran Grafik atau Diagram.
  • Menentukan Parameter-parameter Tambahan.
  • Membangun URL String.
  • Menentukan metode GET atau POST untuk mendapatkan gambar grafik tersebut.
  • Menentukan daerah atau area klik (Clickable Regions).

Data-data dan parameter-parameter yang kita masukkan tadi akan diubah menjadi sebuah image atau gambar grafik yang dapat kita simpan sebagai file gambar. Nah, sekarang bagaimana kalau kita padukan dengan halaman website yang sesungguhnya ??? hal ini seringkali menjadi sebuah problem khusus bagi para pemula seperti penulis tentunya, namun kita masih dapat memadukannya dengan menggunakan tag standar HTML yang berfungsi untuk menampilkan gambar atau image, yaitu dengan menggunakan tag <img> Seperti contoh berikut :

ex :

Kita tampilkan grafik dari contoh sebelumnya dengan menampilkannya atau memadukannya pada sebuah halaman website, sehingga penulisan syntax nya sebagai berikut : <img src="http://chart.apis.google.com/chart?chs=250x100&amp;chd=t:60,40&amp;cht=p3&amp;chl=Hello|World" />

Note :

Karakter & hanya berlaku pada String URL, jika kita padukan bersama tag HTML, maka karakter & kita ubah menjadi &amp;

 

Bagaimana kawan ??? cukup sederhana bukan ??? disamping sederhana, tampilan yang di berikan pun terlihat elegan dan kecepatan load dari perubahan data grafik tersebut juga tak perlu diragukan lagi. Sesuatu hal pasti memiliki segi (+/-) pada Google Chart API ini pun juga memiliki sisi kekurangan, yaitu tidak dapat kita operasikan ketika komputer tidak terhubung ke jaringan internet. Suatu ketika bila kita mendesain halaman website pada localhost komputer, aplikasi ini pun tidak berjalan sebagaimana mestinya. Sedangkan sisi positifnya telah kita singgung berkali-kali dibagian pertama, bahwa aplikasi ini tidak memerlukan modul-modul tambahan seperti aplikasi lainnya.

Hmmmm, tak terasa capek juga nih ngetiknya, sebenarnya masih banyak bagian lain yang ingin dibahas. Namun kondisi yang tak memungkinkan ini mengharuskan kita berpisah sementara waktu. Tulisan diatas juga sudah mewakili, tinggal memoles sedikit lagi untuk menerapkannya ke Real Problem. Ibarat pepatah mengatakan “Jika ada sumur di ladang boleh kita menumpang mandi, kalau ada waktu luang ijinkan saya menulis lagi ” segala waktu yang tersita untuk membaca tulisan ini dan juga kesalahan dalam penulisan, penulis menyampaikan permintaan maaf yang sedalam-dalamnya (sedalam lautan) maklum, penulis juga newbie nih…..hehehe….di lain kesempatan mungkin kita bisa share pengetahuan lainnya.

Terima Kasih dan Semoga Bermanfaat…….MERDEKA!!!!!!

 

Regards

 

 

 

Surabaya, 15 Nov 2010

 

 

Refference

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

Thanks To

GOD (for Idea n Inspiration)

Family (for ur affection)

My Friends (for discussion)


Actions

Information

One response

4 11 2013
bonnet

Thx bro..ilmu yg sangat bermanfaat

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: