Membuat Grafik Cantik dengan Google Chart dan PHP

Posted on February 26, 2008 
Filed Under PHP

google chartGoogle Chart adalah fasilitas API atau web service dari Google Code yang berguna untuk menciptakan grafik gambar on the fly. Gambar yang dihasilkan sangat bagus, ada berbagai model grafik, dan yang paling penting adalah fasilitas ini disediakan gratis oleh Google. Saya membuat sebuah function PHP agar penerapannya lebih mudah untuk aplikasi dinamik.

Sebelumnya saya pernah memakai PHP class bernama PowerGraphic yang kualitas tampilannya jauh sekali dibandingkan API dari Google, contoh tampilan dari PowerGraphic bisa dilihat di sini.

Cara penggunakan Google Chart adalah dengan mengirimkan data-data lewat URL (HTTP GET Transfer). Contohnya untuk memanggil gambar seperti ini:

google chart

adalah dengan memanggil URL:

http://chart.apis.google.com/chart?
chs=200×125
&chd=s:helloWorld
&cht=lc
&chxt=x,y
&chxl=0:|Mar|Apr|May|June|July|1:||50+Kb

Keterangan berikut dicuplik dari websitenya:
http://chart.apis.google.com/chart? (lokasi URL API)
& (pemisah parameter)
chs=200×125 (adalah ukuran gambar)
chd=s:helloWorld (memuat data grafik)
cht=lc (untuk menentukan tipe grafik)
chxt=x,y (berarti grafik memerlukan baik x-axis dan y-axis label)
chxl=0:|Mar|Apr|May|June|July|1:||50+Kb (adalah data x-axis dan y-axis label)

Jika Anda seorang developer aplikasi PHP, Anda bisa menggunakan function yang telah saya buat sehingga tidak perlu lagi ‘mempelajari Developers Guide yang cukup panjang.

  1. <?php
  2.  
  3. function googlechart ($data, $type="lc", $size="200x100", $title="", $background="FFFFFF", $numyaxis=5){
  4.     $valid_type = array ("lc", "bhs", "bvs", "bhg", "bvg", "p", "p3");
  5.     $ver_type = array("bhs", "bhg");
  6.     //validate
  7.     if (!in_array($type, $valid_type)) exit ("invalid chart type: ".$type);
  8.     if (!is_array($data)) exit ("invalid data input, it should be an array.");
  9.    
  10.     $api_url = "http://chart.apis.google.com/chart?";
  11.    
  12.     //type
  13.     $api_url .= "cht=".$type;
  14.    
  15.     //data
  16.     $sumvalue = array_sum ($data);
  17.     $max = max($data);
  18.     foreach ($data as $key=>$value){
  19.         $xaxis[]=urlencode($key);
  20.         $xdata[]=sprintf("%.1f", $value/$max*100);
  21.     }
  22.    
  23.     //chd
  24.     $api_url .= "&chd=t:".implode(",", $xdata);
  25.    
  26.     //chxl
  27.     if (in_array($type, $ver_type)) $xaxis = array_reverse($xaxis);
  28.     if (!$numyaxis||$numyaxis==0) $numyaxis = 1;
  29.     $pery = $max/$numyaxis;
  30.     for($i=1;$i<$numyaxis;$i++){
  31.         $yaxis[] = sprintf("%.1f", $pery*$i);
  32.     }
  33.     $yaxis[] = sprintf("%.1f", $max);
  34.     $api_url .= "&chxl=0:|".implode("|", $xaxis)."|1:||".implode("|", $yaxis);
  35.    
  36.     //chxt
  37.     if (in_array($type, $ver_type)) $api_url .= "&chxt=y,x";
  38.     else $api_url .= "&chxt=x,y";
  39.    
  40.     //size
  41.     $api_url .= "&chs=".$size;
  42.    
  43.     //title
  44.     if ($title) $api_url .= "&chtt=".urlencode($title);
  45.    
  46.     //background
  47.     $api_url .= "&chf=bg,s,".str_replace("#", "", $background);
  48.    
  49.     return $api_url;
  50. }
  51.  
  52. ?>

Cara memanggil:

  1. googlechart ($data, $type, $size, $title, $background, $numyaxis, $color);

$data
Array berisi data yang ingin ditampilkan dengan grafik. Key dari array berisi Label yang akan digunakan di grafik.
Contoh:

  1. $data = array (
  2. "2001"=>20, "2002"=>33, "2003"=>25, "2004"=>40, "2005"=>50, "2006"=>21, "2007"=>60, "2008"=>70
  3. );

$type
Tipe grafik yang ingin ditampilkan. Tipe yang di-support oleh function ini:

“lc”: grafik garis
grafik garis

“bhs”: grafik bar horisontal
grafik bar horisontal

“bvs”: grafik bar vertikal
grafik bar vertikal
“p”: grafik pie
grafik pie
“p3″: grafik pie 3d
grafik pie 3d
$size
ukuran gambar
diisi “[lebar]x[tinggi]” contohnya “200×200″

$title
judul grafik
contoh: “Test Google Chart”

$background
warna background, menggunakan warna hexadecimal.
contoh: “FFFFFF”

$numyaxis
angka integer, untuk mendifinisikan berapa label yang akan dibagi untuk garis Y. Misalkan nilai maksimal di data adalah 100, jika nilai numyaxis 5, maka garis Y akan diberi label 20, 40, 60, 80 dan 100 (5 buah).

$color
merupakan array berisi warna hexadecimal untuk warna potongan pada grafik pie.
contoh:

  1. $color = array (
  2. "00FF99", "66FFCC", "33CC99", "33FFFF", "33CCCC", "00FFCC", "33FFCC", "00CCFF"
  3. );

Return
Return function ini berupa URL gambar, yang tinggal di echo di dalam <img src=”" /> pada halaman HTML.

Google Chart API sebenarnya masih memiliki pemrosesan grafik yang lebih canggih (advanced) seperti multiple axis labels, linear gradient, venn diagrams dll. Untuk kegunaan advanced silahkan kembangkan function/class sendiri yah :D dan jangan lupa di share lagi kalau-kalau ada yang membutuhkan :D

Comments

5 Responses to “Membuat Grafik Cantik dengan Google Chart dan PHP”

  1. Ketut Widarta on February 29th, 2008 3:07 am

    semua layanan mau disediakan google..
    semoga aja ada saingan..
    biar gak monopoli… ya ngak bos..

  2. baladika on February 29th, 2008 10:11 am

    waw.. lengkap bgt

  3. Dewi on April 11th, 2008 1:18 pm

    ikutan coba bos…

  4. jisva on May 8th, 2008 1:32 pm

    Mas..bagaimana klo kita langsung membuat grafiknya dalm desain web dengan menggunakan mysql.tolong dijelaskan .maksih

  5. atang on August 14th, 2008 11:29 am

    kok untuk $color g berfungsi. gmn caranya ??

Leave a Reply