Bir Öğrenci Klasiği – AUG

Google API ile İstatistiki Görselleştirme

Merhaba arkadaşlar. Bugün sizlere Google amcanın harikalarından birini anlatacağım. Biliyorsunuz ki Google Amca birçok servisini API şeklinde kullanıcılara da sunuyor. Dün bilgisayarı kapatmadan kısa bir süre önce API lerine bakmak için gezerken Google Visualization API yi gördüm. Türkçesi Google Görselleştirme Servisi.

Biz buna kısaca Gva ( Go.Vi.Ap. ) diyelim. Gva sayesinde elimizdeki veriler hakkında tablolar, pastalar ve diğer istatistiki şekillere ulaşabiliyoruz. Altyapısı Javascript’ e dayandığı için her platformda çalışabiliyor. Google Analytics serviside bu API üzerine kurulmuş. Oradaki gibi pastaları vs. bizde çok kolay bir şekilde yapabiliriz!

Öncelikle arkadaşlar size servisin çalışma mantığını anlatayım. Servis sayesinde pasta, kutu vs yanında Dünya Haritası üzerinde çalışma ( Hangi ülke daha iyi vs vs ) gibi olanaklara da sahip oluyoruz. Mesela size bir örnek vereyim ve ne kadar basit olduğunu göstereyim;

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['areachart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Site');
data.addColumn('number', 'Hit');
data.addColumn('number', 'Pop');
data.addRows(3);
data.setCell(0, 0, 'Google');
data.setCell(1, 0, 'Yahoo');
data.setCell(2, 0, 'Bing');
data.setCell(0, 1, 25);
data.setCell(1, 1, 20);
data.setCell(2, 1, 10);
data.setCell(0, 2, 20);
data.setCell(1, 2, 15);
data.setCell(2, 2, 5);
new google.visualization.AreaChart(document.getElementById('visualization')).
draw(data,{title:"Arama Motorları"});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>

Bu kodun çıktısı ise şöyle oluyor;

Aslında kodlar oldukça açıklayıcı. Öncelikle Google API yi içeriye dahil ediyoruz. Ardından;

google.load(‘visualization’, ’1′, {packages: ['areachart']});

Satırında Google amcaya visualization yani görselleştirme yapacağımızı söylüyoruz. Paket türü ise görselleştirmenin ne türde olacağını; pasta, çizgiler vs vs. Biz çizgiler ile çalıştığımız için areachart’ ı seçiyoruz. Ondan sonrasında üç adet tür üzerinden çalışacağımızı belirtiyoruz. Bunlardan ilki sitelerin adı olan string yani metin; diğerleri ise hit ve pop için sayısal değerler. Ardından data.setCell ile verilerimizi veriyoruz. Burada önemli olan ilk ve ikinci değer; birincisi verilerin bir sırada, grupta tutulmasını sağlıyor. Yani Metin-Sayı-Sayı grubunda Google diye belirtiyoruz ve 0. grup başlamış oluyor. Sonra ikinci değer geliyor 1 diye belirtiyoruz;

data.setCell(0, 0, 'Google');
data.setCell(0, 1, 25);
data.setCell(0, 2, 20);

Mesela şu koda bakalım. İlk değer 0 olarak veriyoruz ki 0. grup olduğunu belirtelim. Sonra veri sırası geliyor. Yani Metin-Sayı-Sayı grubunda Metin; 0, Sayı; 1, Sayı; 2 olarak belirtilmiş. Bu durumda hangi gruba hangi verinin geleceği gruplandırılmış oluyor. Ne yazık ki Google amca burada işleri karıştırmış…

Servisin bir diğer özelliği yüzdeyi kendi hesaplaması. Biz sayıları veriyoruz sayece. Gerisini o yapıyor. Google amca saysinde DataGrid gibi verilerin listelendiği tablolarda yapabiliriz. Google amca şöyle yapmayı sağlamış;

function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time');
data.addRows(5);
data.setCell(0, 0, 'John');
data.setCell(0, 1, 10000, '$10,000');
data.setCell(0, 2, true);
data.setCell(1, 0, 'Mary');
data.setCell(1, 1, 25000, '$25,000');
data.setCell(1, 2, true);
data.setCell(2, 0, 'Steve');
data.setCell(2, 1, 8000, '$8,000');
data.setCell(2, 2, false);
data.setCell(3, 0, 'Ellen');
data.setCell(3, 1, 20000, '$20,000');
data.setCell(3, 2, true);
data.setCell(4, 0, 'Mike');
data.setCell(4, 1, 12000, '$12,000');
data.setCell(4, 2, false);

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});

google.visualization.events.addListener(table, 'select', function() {
var row = table.getSelection()[0].row;
alert('You selected ' + data.getValue(row, 0));
});
}

Ve hatta herhangi bir eleman seçildiğinde alert ile uyarı vermesini de sağlamış…

Evet Google API sayesinde yukarıda da olduğu gibi istediğimiz tabloları çıkarabiliriz…

Google Visualization API’ na buradan ulaşabilirsiniz. Unutamadan belki bu servis üzerine kurulu güzel bir sınıf yazabilirim

Herkese iyi günler, iyi çalışmalar…

Benzer Yazılar;

• API Nedir ve Nasıl Yapılır?
• Google Adwords Promosyon Kuponu Etkinlik Sonucu
• Google AdSense Reklamlarınızı Spam e Karşı Koruyun!
• Perde 2011 de Açılıyor...
• Nasıl birkaç günde programlama dili öğrenilir?