Menyajikan Data Menggunakan Diagram secara Dinamis dan Mudah–Google Chart API

Ingin menyajikan data-data dengan diagram secara dinamis di halaman web? Dulu mungkin kita harus berkutat dengan fungsi-fungsi PHP untuk menggenerasi gambar. Itupun, server kita harus mendukung pustaka GD. Menggunakan Flash mempermudah pembuatan diagram yang indah. Namun tidak semua browser mendukung Flash dan memang itulah yang menyebabkan Flash masih dihindari oleh sebagian desainer web. Namun saat ini membuat diagram sangatlah mudah dengan adanya Google Chart API.

Mendengar kata API, sebagian orang mungkin akan takut duluan, berpikir bahwa perlu waktu dan energi khusus untuk mempelajari tata cara penggunaan API tersebut. Jangan salah. API dari Google Chart hanya berupa aturan penulisan URL untuk menampilkan gambar diagram yang kita inginkan. Dalam URL tersebut kita sisipkan informasi-informasi diagram seperti apa yang ingin kita sajikan, berikut datanya-datanya.

Begini contohnya. Misalnya Anda ingin menampilkan diagram kue tiga dimensi yang menunjukkan perbandingan jumlah ayam dan itik yang Anda punya di peternakan Anda. Taruhlah Anda memiliki 125 ekor ayam dan 77 ekor itik. Anda bahkan tidak perlu menghitung persentase masing-masing jenis hewan tersebut. Cukup tulis URL berikut:

http://chart.apis.google.com/chart?cht=p3&
chd=t:125.0,77.0&chs=250×100&chl=Ayam|Itik

URL di atas ialah URL gambar diagram Anda. Sebagai catatan, URL Anda harus ditulis dalam satu baris. Contoh di atas dibagi menjadi dua baris dengan pertimbangan layout. Coba buka URL tersebut menggunakan perambah web kesukaan Anda, maka akan tampillah diagram yang Anda inginkan, yatu seperti ini:

URL di atas seperti URL pada umumnya, yang menjelaskan letak skrip yang akan dituju (dieksekusi) berikut parameter-parameter yang dimasukkan ke dalam skrip tersebut. Penjelasan URL contoh tersebut ialah seperti ini:

  1. http://chart.apis.google.com/chart? ialah lokasi API tersebut
  2. & tanda pemisah berbagai parameter
  3. cht=p3 berarti jenis diagram yang ingin ditampilkan ialah diagram kue (pie chart) tiga dimensi
  4. chd=t:125.0,77.0 ialah data yang ingin ditampilkan (dalam contoh tersebut ialah jumlah hewan ternak yang masing-masing 125 dan 77
  5. chs=250x100 ialah ukuran gambar diagram Anda dalam piksel
  6. chl=Ayam|Itik ialah label untuk masing-masing nilai data yang dikirimkan (menjelaskan arti angka 125 dan 77)

Untuk penjelasan selengkapnya, silakan baca halaman developer’s guide nya di sini. Jika Anda ingin menampilkan diagram tersebut di halaman web, cukup gunakan URL tersebut sebagai nilai dari atribut src=”” pada tag <img /> (tag HTML untuk gambar).

Saat ini terdapat lima jenis diagram yang dapat kita sajikan menggunakan Google Chart API, yaitu

Line Chart

Line Chart

Bar Chart

Pie Chart

Venn Diagram


Scatter Plot

Dengan menggabungkannya dengan server side scripting semisal PHP, kita bisa menggenerasi URL untuk data-data yang dinamis, yang selalu berubah-ubah sepanjang waktu dan menampilkannya dalam bentuk diagram. Jadi, diagramnya juga akan selalu dinamis, berubah-ubah mengikuti perubahan data tersebut.

Contoh penerapan yang menarik yang biasa dibutuhkan dalam blog:

  • Menampilkan statistik pengunjung per hari ataupun bulan menggunakan line chart atau bar chart. Sebagian data statistik tersebut seperti jenis perambah yang digunakan, dapat disajikan dalam bentuk perbandingan mmenggunakan pie chart
  • Menampilkan hasil polling online menggunakan pie chart
  • Hmm.. apa lagi ya? kok lagi gak ada ide begini. Ada yang bisa menambahkan? Atau silakan langsung saja buat plugin WordPress yang mendayagunakan Google Chart API ini.

Untuk tujuan lainnya selain blog, kegunaannya tentu sangat banyak. Silakan bayangkan sendiri penerapannya dalam berbagai jenis aplikasi web yang dapat Anda buat. :)

Sayangnya, setiap pengguna hanya diperbolehkan melakukan 50.000 kueri per harinya. Jika batas kueri tersebut terlampaui, Anda akan tidak bisa mengaksesnya untuk sementara waktu. Jika Anda terus melampaui batas kueri ini, akses Anda ke Google Chart API dapat diblokir.

19 komentar pada “Menyajikan Data Menggunakan Diagram secara Dinamis dan Mudah–Google Chart API

  • 27 Desember 2007 pada 23:10
    Permalink

    wah, tetep ga mudheng aku, Huda!
    mendingan aku aja deh yg jd dokter, kamu jd pasiennya…
    eh, kamu yg jd kuli IT-nya! :P

  • 28 Desember 2007 pada 01:07
    Permalink

    Yo Thanks atas infonya juragan.. ijo2 menyusul

  • 28 Desember 2007 pada 01:25
    Permalink

    Saya baru tau klo ternyata Oom Huda itu kuliah di Fakultas Kedokteran Komputer… ;))

    Btw, ayo om bikin plugin WP nya! ;)

  • 28 Desember 2007 pada 17:31
    Permalink

    mampir wae bos, taon baru dimane nih?

  • 28 Desember 2007 pada 17:44
    Permalink

    @Juminten
    hehehe.. jadi dua-duanya boleh kan..

    @deniar
    ijo2? apa tuh?

    @Praditya
    kamu aja lah dit yg bikin :D

    @ali
    Aku gak pernah ngerayain tahun baru secara khusus sih. Paling di Semarang aja

  • 28 Desember 2007 pada 20:38
    Permalink

    Hon, jujur.. aku ndak mudheng :(

    laen kali aja yah aku komen lagi,
    kalo kamu lagi bahas yg ringan2,
    soalnya otakku cuman mampu nangkep yg ringan2 :(
    *malah curhat :P*

  • 28 Desember 2007 pada 22:31
    Permalink

    wah..artikelnya sangat bagus..lam kenal mas huda

  • 29 Desember 2007 pada 03:59
    Permalink

    kayaknya saya pengen diajari nih..

  • 29 Desember 2007 pada 10:44
    Permalink

    @Nona Nieke,,
    Jujur niek.. aku turut prihatin

    @bina
    salam kenal juga mas

    @Riyogarta
    Nyoba URL yg saya tulis sebagai contoh y? 250×100 itu seharusnya 250×100 (pakai huruf x, bukan tanda silang–yang pada web-safe-url akan dikonversikan menjadi %D7). Padahal saya sudah nulis pakai x, tapi mungkin oleh TinyMCE nya WordPress secara otomatis diubah menjadi tanda silang y? Entahlah… coba ntar aku lihat.

    @Anang
    Gak perlu diajarin nang, klo kamu baca panduannya pasti mudeng kok :)

  • 29 Desember 2007 pada 14:43
    Permalink

    Kalo aku,buat d excel trus di screenshot beres…hahaha… *komen via opera mini,maaf kalo salah masukin data pada tempatnya,g kliatan sih*

  • 29 Desember 2007 pada 16:31
    Permalink

    Ass. mas Huda…

    blogwalking, kesasar ke tempat praktek dokter….walah..g ngeh aku soal kedokteran…
    but it’s good lah….

    bagaimana kalo membahas soal dokter – dokteran :-) dengan lebih nge-pop?

    mampir deh ke blog ku…

    wass

  • 29 Desember 2007 pada 22:12
    Permalink

    @Adis
    iya mas… tapi kan jadinya statis. Kalau datanya dinamis, hayooo..?

    @Joe ST
    hehehe.. bukan tempat praktik nih.. dan blm jadi dokter :D. Gak semuanya ttg kedokteran koq..

  • 29 Desember 2007 pada 22:22
    Permalink

    wah, seandainya pas aku KP dulu ada yang beginian, pasti hasilnya lebih bagus :P

    thanx infonya..

  • 1 Januari 2008 pada 09:17
    Permalink

    Wah mas huda inih g punya sense of humour, becanda dtanggepin serius*gelitikin mas huda*

  • 1 Januari 2008 pada 13:14
    Permalink

    @Adis
    hehehe.. mas adis juga sama aja. Reply saya tulis itu juga becanda, eeh.. ditanggepin serius juga dengan komen yg ini :)). Lupa ngasi smiley kali, jadi gak keliatan.. :)

    *bales gelitikan*

  • 8 Februari 2008 pada 00:31
    Permalink

    thanks infonya, aku lagi nyari graphic chart, sekali lag thank you

  • 29 Januari 2009 pada 01:17
    Permalink

    wesss mantap…..!!!!!

    aku juga ra mudeng…..

  • 6 Maret 2009 pada 17:28
    Permalink

    Thank’s Yc Bwt Yg Bikin Diagram NeeeHHH………………!!!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *