Selamlar, bir süre önce oldukça büyük çapta veriyi bir website üzerinde kullanıcıya nasıl etkin bir şekilde gösterebilirim ve eğlenerek bilgilendirebilirim diye araştırırken Google chart api ile karşılaştım. Oldukça kolay kullanımı ve karşılığında verdikleriyle kesinlikle övgüye değer iş çıkarmışlar. Ve tabi ki ücretsiz. Nedir ne değildir diye uğraşırken konuyla alakalı diğer öğelerle de tanışıverdim.

Ben de bu makalede, araştırmamı yaparken öğrendiklerimi paylaşmaya çalışacağım. Html 5 ile grafik çizimden, SVG haritalarından ve etkin kullanımından bahsedecek ve sonrasında Google Charts kütüphanesini inceleyip, basit ve detaylı kullanımlarından örnekler vereceğim. Örneklerin yapımı için bazı yerlerde jquery (bir javascript kütüphanesi) yi ve veri işlemleri için de Asp.Net (C# ile) kullanıyor olacağım.

Anlatıma geçmeden önce yaptığım çalışmalardan bir kaç ekran görüntüsünü paylaşmak istiyorum, böylece sonuçta ne elde edeceğimizi daha rahat görebilirsiniz.

Sonuç

Bu slayt gösterisi için JavaScript gerekir.

Önce Biraz HTML 5

Yakın bir tarihe kadar websitelerinde gördüğümüz grafikler hep image formatındaydı. Html 5 in icadıyla diyeyim, statik grafik ve resimlerin limitlerinden kurtulup, kullanıcı ile iletişime geçebilen ve içerik,görsel anlamda çok zengin olan yeni grafiklerle tanışmış olduk. Bu yeniliklerden en popüler olanları Html 5 Canvas ve SVG (Scalable Vector Graphics) tir.

Imagination, meet implementation. HTML5 is the cornerstone of the W3C’s open web platform; a framework designed to support innovation and foster the full potential the web has to offer.

W3

• <canvas>

HTML 5 canvas aslında bir HTML tagıdır ve client-side da yani kullanıcının browserında  Javascript kullanarak pixel renderlama yoludur(Abuk bir cümle oldu kabul ediyorum). Oldukça hızlıdır, ve basit anlamda kullanıcıyla iletişime geçmek oldukça yeterli ve kullanımı kolaydır. Yazı, resim, şekiller, animasyonlar vb. şeyleri çizebilme kapasitesine sahiptir. Svg vektör bazlı iken canvas pixel bazlıdır. Bu da örneğin bir resme ya da haritaya zoom yapmanız gereken bir uygulamada sizi zora sokacak bir durumdur. Ancak grafik çizimi, şekiller oluşturma ve hatta oyunlar için gayet yeterli performanslı uygulamalar ortaya çıkartabilirsiniz.

Aşağıda basit bir kaç matematiksel işlemle oluşturabileceğiniz sanatsal! bir çalışmayı görebilirsiniz.

Çalışmasını izlemek ve kaynak kodları için resmin üstüne tıklayın

• SVG Grafikleri (Vektör Format)

Vektör Format, aslında basitçe bitmap çizen program diyebiliriz. Mesela, bir web sayfasına bir daire koymak istediğinizi düşünün, bunun en basit yolu  bir daire resmi (.gif,.jpg) bulup yerleştirmektir. Alternatif yolu ise daire çize bir program yazmaktır. İhtiyacımız olan pixelleri ayarlayan ve sayfa yüklendiğinde bu bir vektör format olarak referans edilecektir. Avantajı, bu daire çizme programı pixel dossyalarından yani resimden boyut olarak çok daha küçüktür. Çözünürlükten bağımsızdır, yani ölçeği çok rahat değiştirilebilir. Dezavantajı ise bu çizim, gösterim esnasında yapılacağından yani yazdığınız daire pixelleri oluşturan program daire için gereken pixelleri ayarlayıp ekrana yerleştireceğinden, işlemciden yiyecektir ve komplex grafiklerde bu sıkıntıya yol açabilir.

Vektorel çizim hakkında biraz konuştuktan sonra “SVG nedir” e geçelim. Açılımı “Scalable Vector Graphics” dir. 2-D grafikleri ve grafik uygulamalarını XML içinde ifade etmek için kullanılan bir dildir. Ve bizim verimizi görselleştirmek için kullanacağımız türlü türlü grafiklerin çiziminde de kendisi en etkili araçtır. Grafik dilidir desek çok da yanılmış olmayız.

Aşağıda html koduyla verdiğim örnekleri çok basit svg çizimler olarak görebilirsiniz. Basit kullanımı olduğuna dikkat ediniz.

Yukarıda bulunan sayfanın html kodlarını aşağıda bulabilirsiniz:

<meta charset="utf-8" />
SVG

<svg>    Sıkıntı yok!</svg>

The Google Charts API

Google sağolsun bir web sayfasında kullanacağımız en iyi grafik aracını yapmış. Harika  bir dökümantasyon ve çok kolay kullanımı karşılığında ortaya çıkan iş muazzam. İlk versiyonu bize grafiği image haline getirip sunuyordu artık, HTML5 ve SVG yi kullanarak çeşitli, dinamik ve bol kullanıcı etkileşimli grafikler sunuyor.

• En Kolay Yol

http://chart.apis.google.com/chart?cht=p3&chs=450×200&chd=t:4,4,3,1&chl=Kurabiye|IslakKek|Borek|Digerleri&chtt=Deneme%20Grafik&chco=ff00bb

Bu kadar basit. Peki nasıl yaptık:

Parametreler

3 çeşit parametre var. Bunlar cht, chs, and chd. Diğerleri opsiyoneldir.

cht=p3

Bu grafiğin tipidir. Burada kullanılan 3D pasta tipli grafiktir, bunu p3 yazarak sağlıyoruz. Diğer grafik türlerini görmek için buraya bakabilirsiniz.

chs=450×200

Bu grafiğin pixel türünde büyüklüğüdür (genişlik x yükseklik)

chd=t:2,4,3,1

Bu verinin kendisi. (t) veri formatını belirtiyor, biz basit text formatında virgüller ile ayrılmış şekilde veriyi girdik.

Optional Parameters

Opsiyonel parametreler ise: title – başlık, labels – grafik üzerindeki veriden her birinin adı,font types – font tipi, colors – renkler, gradients – karışık renkli diye saçmaca çevireyim de  siz anlarsınız :).

chl= Kurabiye|IslakKek|Borek|Digerleri

Grafik üzerindeki veriden her birinin adı

chtt=Deneme%20Grafik

Başlık

chco=ff0000

rrggbb hexadecimal formatında renk.  (chco=ff0000|3355aa|8322c2|112233) şeklinde de farklı farklı renkler verebilirsiniz.

Dinamik Grafikler

Pek sevgili Google ın bu güzide grafiklerini web sayfamızda kullanmak için ihtiyacımız olan API nin adı: the Google Visualization API. Biz sadece kaynak kodları referans veren bir url girip gerekli altyapıyı googledan çekicez, ve sayfada yapmamı gereken sadece verimizi çekip, grafik türünü belirleyip, uygun şekilde bağlamak.

Google Charts bu sayfadan grafiklerle ilgili çok iyi dökümante edilmiş detaylara ulaşabilirsiniz. Grafiklerin hemen hemen hepsinde tıkladığımızda aldığımız bir aksiyon var, bir tooltip göstermek ya da animasyon oynatmak gibi. Bunlar zaten var, ama asıl gücü event tetikleme yapabilmemiz, callback ler register edebilmemiz. Kütüphaneyi kullanarak erişebildiğimiz bazı aksiyonların (mouseOver, mouseOut vb) dışında sonuçta olay html, elementler(bir iki grafik hariç, bazıları flash şeklinde oluşuyor). Bu demek oluyor ki javascript bilgimiz ve yeteneğimizin sınırları belirliyor bizim grafiklerimizin güzelliğini.

Bir Örnek

Bir örnek ile google grafik yapısının kullanımı inceleyeceğim hatta irdeleyelim efendim. Öncelikle işin sonunda ortaya ne çıkacak onu bir görelim.

Basit grafik örneğimiz -Çalışan hali için resme tıklayın

Askerden önce yazdıydım bu makaleyi, hey gidi.. Kendimi biraz toparladıktan sonra devamını getiricem. Gözlerinizden öperim.