Haziran 27, 2008

7 dk okuma

Google Chart API ile grafik çizdirmek

# api# chart# google# grafik# Sunucu Programlama

Yakın zamanda (gerçi 3-5 ay oldu) google chart api’sini sunarak GET mothodu ile gönderdiğiniz çağrılar sonucu oldukça hızlı biçimde yumuşatılmış (antialiased) grafikler çizdirebiliyor. API’nin kullanımı aslında oldukça basit. Verileriniz ve grafik detaylarınız (etiketler, renkler vs) ile bir URL oluşturuyor ve çağırıyorsunuz. Google size PNG formatında istediğiniz boyutta ve renklerde grafik veriyor. Dökümantasyonu güzel hazırlanmış ve neredeyse tüm popüler grafik türlerini çizdirebiliyor. http://code.google.com/apis/chart/ adresinden gerekli bilgiyi alabilirsiniz.

Doğrudan kullanıma yönelik parametreleri ele alacağım ve en çok kullanılan 3-4 grafik türünü nasıl çizdirebileceğimizden bahsedeceğim. Geri kalan daha detaylı bilgiyi kendi sitesinden alabileceksiniz zaten.

chs (Chart Size)

Bu parametre ile çizdirilecek grafiğin boyutlarını piksel olarak vermeniz gerekiyor width + x + height yani klasik formatta 200x100 şeklinde belirteceğiniz bir parametre 200px genişlik, 100px yükseklikte bir resim çizdirecektir.

cht (Chart Type)

Çizdirilecek graifk türünü belirtmek için bu parametreyi kullanıyoruz. Aşağıda google chart api ile çizdirebileceğiniz grafikler türleri ve veri seti boyutları verilmiştir :

lc : Çizgi Grafiği (Line Chart)

Grafik

lxy : X,Y Grafiği

Grafik

bhs : Yatay Bar Grafiği

Grafik

bvs : Diket Bar Grafiği

Grafik

Bu iki bar grafiğinde 2 boyutlu veri setine kadar bar grafikleri çizdirebilirsiniz. Tek boyutlu çizdirirseniz histogram grafiği elde edersiniz.

p : Pasta grafiği

Grafik

p3 : 3 Boyutlu Pasta Grafiği

Grafik

s : Saçılım (Scatter) Grafiği

Grafik

chd (Chart Data)

Bu parametre ile çizdireceğiniz grafik türüne göre tek veya çok boyutlu verinizi şekillendirip belirliyorsunuz. 2 şekilde çalışıyor. Bu parametre ile gönderdiğiniz string’in başında “t” harfini koyarsanız text türü veri şeklinde şifrelenmemiş ve virgülle ayrılmış düz sayısal değerler belirtiyorsunuz:

Grafik

http://chart.apis.google.com/chart?
chs=200x100
&cht=lc
&chd=t:60,40,20,15,50,70,20

Şekilden görülebileecği gibi veriler ilerleyiş sırasına göre çizgi grafiğine dökülmüştür. chd parametresi “t:” ile başlayıp virgüllerle ayrılmış ham verilerle belirtilmiştir.

Veriyi kodlayarak belirterek daha kısa urller oluşturabilirsiniz. Ayrıca verinizi tam olarak url’de vermek istemeyebilirsiniz. Google bu verileri işlerken yüzde (%) üzerinden değerlendirme yaptığından siz doğrudan yüzdelerle ifade edilen birk kodlamada verilerinizi belirtebilirsiniz. Önce örneği vereyim. Yukarıdaki verilerin kodlanmış şekilde belirtilmesi :

Grafik

http://chart.apis.google.com/chart?
chs=200x100
&cht=lc
&chd=s:lYMJfrM

Gördüğünüz gibi “t:” yerine “s:” ile belirttikten sonra verilerimizin kodlanmış halini giriyoruz. Sonuçta çok daha kısa bir string oluşturmuş oluyoruz.

Bu kodlama için google dökümantasyonda bir javascript fonksiyonu veriyor. Yaptığı iş verilerinizi belirttiğiniz maksimum değerine göre yüzde üzerinden değerlendirip, ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 kümesine ölçeklendirip her değere karşılık gelen harfleri yan yana koymak.

Bu işi yapan javascript fonksiyonu ve kısaca kullanımı :

var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

function simpleEncode(valueArray, maxValue) {

    var chartData = ['s:'];

    for (var i = 0; i < valueArray.length; i++) { var currentValue = valueArray[i]; if (!isNaN(currentValue) && currentValue >= 0) {
            chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length - 1) * currentValue / maxValue)));
        } else {
            chartData.push('_');
        }
    }

    return chartData.join('');
}

// Örnek sifreleme
var veri_dizisi = new Array(0, 1, 4, 4, 6, 11, 14, 17, 23, 28, 33, 36, 43, 59, 65);
var max_deger = 70;
alert(simpleEncode(veri_dizisi, max_deger));

Alt kısımda kullanımını görüyorsunuz, oldukça basit.

Bu kod javascript kodu ve biliyorsunuz ki web uygulamalarında verileri genelde böyle açıkca vermek istemeyiz. Ayrıca bu kadar basit kullanımlı bir api için verilerin kullanıcıda url’ye dönüştürülüp grafiğin api aracılığıyla istenmesi gibi karışık bir yol izlemek tercih edilmez. PHP için bu javascript kodunda yapılan işleri php ile yaptıran ufak bir fonksiyon yazdım :

function encodeData($data, $max_value) {

    $simpleEncoding = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    $data_string = "s:";
    foreach($data as $currentValue) {
        if (is_numeric($currentValue) & amp; & amp; $currentValue & gt; = 0) {
            $data_string. = substr($simpleEncoding, round((strlen($simpleEncoding) - 1) * $currentValue / $max_value), 1);
        } else {
            $data_string. = '_';
        }
    }

    return $data_string;
}

print encodeData(array(60, 40, 20, 15, 50, 70, 20), 100);

Kullanımı aynı, verilerinizi ilk parametrede dizi olarak veriyor, ikinci parametrede de grafiğin üst sınırını veriyorsunuz. Size veriyi encode edilmiş ve chd parametresine yapıştırabileceğiniz formatta veriyor. Mesela yukarıdaki verinin kodlanmış hali : s:lYMJfrM Bu veriyi kodlamadan vermek isteseydik : t:60,40,20,15,50,70,20 parametresi belirtecektik. Veri seti büyüdüğünde bu dönüşüm sayesinde urldeki karakter sayısı tasarrufu artacaktır.

Sonuç olarak yukarıdaki kodlama tekniği ile verilerimizi kodlayıp parametrede belirtiyoruz.

Grafik

http://chart.apis.google.com/chart?
cht=lc
&chs=200x125
&chd=s:FOETHECat,KATYPSNXJ

Şimdi bu grafikte iki veri setiyle belirtilen zaman çizelgesindeki çizgiler renk ayrımı yapılmadığından fark edilemiyor. Grafiklerimizdeki renkleri ayarlamak için :

chco (Chart Colors)

Bu parametreyle ”#” işareti belirtmeden hex kodlarıyla renkleri virgül işaretiyle ayırarak belirtmemiz gerek. Veri setinde kaç tane farklı set varsa o kadar renk belirtmek gerekir. Aksi halde kafasına göre yerleştirebiliyor. Örneğin az önceki grafikte iki veri setini seçilebilir hale getirelim :

Grafik

http://chart.apis.google.com/chart?
cht=lc
&chs=200x125
&chd=s:FOETHECat,KATYPSNXJ
&chco=ff0000,00ff00

Renkleri belirttiğimiz sırada veri setlerine uygulandı. Başka bir örnek olarak da pasta grafiği için renkleri uygulamak istersek :

Grafik

http://chart.apis.google.com/chart?
cht=p3
&chd=s:Uf9
&chs=500x250
&chco=EAA012,93BC1C,1C47BA

Burada 3 dilimli bir pasta grafiği çizdirdiğimizi bilgiğimiz için 3 renk verdik. İstersek 100 tane renk verelim, bu pasta 3 dilimli olduğundan ilk 3 rengi uygulayacaktır. Geri kalanlar kullanılmayacaktır.

chtt (Chart Title)

Grafiğin başlığını belirmek için kullanılır. Bu parametre ile grafiğin üst kısmına istediğiniz açıklamayı tek satır olacak biçimde ekleyebilirsiniz. Uzun metinler grafikten taşacaktır ve görüntülenmeyecektir.

Grafik

http://chart.apis.google.com/chart?
cht=lc
&chs=230x135
&chd=s:FOETHECat,KATYPSNXJ
&chco=ff0000,00ff00
&chtt=A+ve+B+Firması+Karşılaştırması

Açıklama Kutusu (Legend)

Bu özellik 2 parametre ile kullanılır. Birincisi veri setlerini tanımladığınız chdl parametresi, ikincisi ise açıklama kutusunun grafiğin neresinde bulunacağını belirten parametredir, bu da chdlp parametresidir. Pozisyon ile ilgili parametre zorunlu değildir. Örneklerle açıklamaya çalışacağım :

Grafik

http://chart.apis.google.com/chart?
cht=lc
&chs=300x155
&chd=s:FOETHECat,KATYPSNXJ
&chco=ff0000,00ff00
&chtt=A+ve+B+Firması+Karşılaştırması
&chdl=A+Firması|B+Firması
&chdlp=r

chdlp parametresini kullanmazsanız açıklama kutusu grafiğin sağında çıkar. Yukarıdaki grafikte de sağ taraf ayarlanmıştır t, l, b, r ile yönü belirleyebiliriniz. Ayrıca chdl parametresine değer verirken | (pipe) işareti ile ayırarak veri seti kadar değer girin.

chf (Chart Fill)

Bu parametre aslında oldukça karışık ve geçiş efektlerinden zebra-lines tarzı arka-alan dolgusuna kadar çok değişik artalanlar oluşturabiliyorsunuz. Ben burada basitçe grafiğin arka rengini değiştirmeyi göstereceğim. Detaylı bilgiyi dökümantasyonunda bulabilirsiniz.

Grafik

http://chart.apis.google.com/chart?
cht=lc
&chs=250x135
&chd=s:FOETHECat,KATYPSNXJ
&chco=ff0000,00ff00
&chf=bg,s,92BFFB

chg (Chart Grid Lines)

Karşılaştırmayı kolaylaştırmak için grafiğin arkasına ızgara koymak isteyebilirsiniz, bu parametre ile ızgara hücre boyutunu girip ayarlayabiliyorsunuz.

Grafik

http://chart.apis.google.com/chart?
cht=lc
&chs=250x135
&chd=s:FOETHECat,KATYPSNXJ
&chco=ff0000,00ff00
&chg=10,20

Grafik Boyut/Değer başlıkları

Çok saçma bir başlık oldu ama Türkçe nasıl denir bilmiyorum. Axis Labels desem kim anlar onu da bilmem 😊 Kısaca şu oluyor, koordinat çizgileri üzerinde grafikteki değerlerin ifade ettiği etiketleri ayarlamak için birkaç parametre dizisi kullanacağız.

chxt (Chart Axis Type)

x, y, r, t değerleri alıyor. x ve y adı üzerinde eksenleri r ve t de üst ve sağ tarafta başlıkların çıkmasını sağlıyor. chxt parametresine virgül ile ayırarak görüntülenecek etiketler için pozisyon bilgisi veriyor. Burada iki kere aynı değeri verirseniz (mesela chxt=x,y,x) o eksende belirttiğiniz kadar AYNI başlıklardan çıkar.

Tabiki chxt parametresi tek başına kullanılmıyor. Eğer tek başına kullanırsanız ölçeklendirmedeki otomatik değerler görünecektir. Mesela az önce çizdirdiğimiz grafiğe X ve Y eksenine başlıklar eklemek isteyelim :

Grafik

http://chart.apis.google.com/chart?
cht=lc
&chs=250x135
&chd=s:FOETHECat,KATYPSNXJ
&chco=ff0000,00ff00
&chxt=x,y

Bu etiketleri değiştirmek istersek :

chxl (Chart Axis Labels)

Başlık belirtmemize yarar. Hemen örnekle devam edelim :

Grafik

http://chart.apis.google.com/chart?
cht=lc
&chs=250x135
&chd=s:FOETHECat,KATYPSNXJ
&chco=ff0000,00ff00
&chxt=x,y,r,x
&chxl=
0:|Ock|Tem|Ock|Tem|Ock|
1:|0|100|
2:|Düşük|Orta|Yüksek|
3:|2005|2006|2007

Yukarıda gördüğünüz gibi x eksenini 2 kere kullandık fakat farklı etiket atadık. Bunu da chxl parametresinde sırayla gösterilecek eksenlerdeki başlıkları girdik. Aslında oldukça basit.

Şimdilik google chart api ile ilgili anlatmak istediklerim bu kadar. Basitçe api’nin nasıl kullanıldığını aktarmaya çalıştım, daha detaylı bilgi ve fantastik grafikler üretmek için api’nin kendi dökümantasyonunu deşin derim. Zira oldukça basit ve örneklerle dolu bir dökümantasyon, Türkçe kaynak olması için özetledim.

API Dökümantasyonu : http://code.google.com/apis/chart/

http://24ways.org/2007/tracking-christmas-cheer-with-google-charts adresinde bazı ilginç örneklerler açıklamalar var. Ayrıca kolayca php ile bu grafik urllerini oluşturabilmek için de bazı projeler geliştirilmiş. Bunlardan ikisi : http://code.google.com/p/gchartphp/wiki/Examples ve http://www.malaiac.com/GphpChart/

Google Chart API ile grafik çizdirmek

chs (Chart Size)

cht (Chart Type)

lc : Çizgi Grafiği (Line Chart)

lxy : X,Y Grafiği

bhs : Yatay Bar Grafiği

bvs : Diket Bar Grafiği

p : Pasta grafiği

p3 : 3 Boyutlu Pasta Grafiği

s : Saçılım (Scatter) Grafiği

chd (Chart Data)

chco (Chart Colors)

chtt (Chart Title)

Açıklama Kutusu (Legend)

chf (Chart Fill)

chg (Chart Grid Lines)

Grafik Boyut/Değer başlıkları

chxt (Chart Axis Type)

chxl (Chart Axis Labels)

Share this post