Bu makalede Google Chart Api ile grafik çizimini anlatmaya çalışacağım. Anlatacağım örnek, doğrudan Google' ın sitesi üzerinde bulunan Pie Chart örneğidir. Google Chart kullanımı için öncelikle loader.js isimli kütüphaneyi eklememiz gerekmektedir.
Kütüphaneyi ekledikten sonra google.charts.load metodu ile çizmek istediğimiz chart tipini yüklüyoruz.
google.charts.load('current', {'packages':['corechart']});
Grafiğimizi load metodu ile yükledikten sonra, google.charts.setOnLoadCallback metodu ile grafiğimizi çiziyoruz. setOnLoadCallback metodu parametre olarak sizden bir callback metodu istemektedir. Parametre olarak göndereceğimiz metodumuz aşağıdaki gibidir.
Metodun içeriğine birazdan değineceğim. Öncelikle sayfamıza son olarak ekleyeceğimiz değeri anlatayım. Üstte PieChart isimli metod document.getElementById('piechart') şeklinde çağrılan elementi parametre olarak almaktadır. Son olarak bu elementi sayfamıza ekliyoruz. Eklediğimiz elemente grafik çizilecektir.
Şimdi kısaca drawChart metodunun içeriğinden bahsedelim.
data: Data değişkeni içerisine arrayToDataTable metodu ile oluşturduğumuz dataları setliyoruz. 1. satır kolon başlıklarıdır. 2. satırdan
itibaren eklenen her bir satır grafiğimiz için bir dilimi ifade etmektedir. (Pie Chart örneği yaptığımız için pasta dilimi şeklinde ifade ettim)
options: Grafik için ayarlamaların yapıldı alandır. Örnekte sadece başlık bilgisi setlenmiştir. Google Chart' ın dökümantasyonunda Configuration Options bölümünden diğer ayarlar hakkında bilgi alabilirsiniz.
chart: PieChart metodu ile grafiğin hangi element içerisine çizileceğini belirtiyoruz.
chart.draw: Draw metodu ile grafiğimizi çiziyoruz. Parametre olarak grafiğe eklenecek datalar ve grafik ayarları verilmektedir.
options: Grafik için ayarlamaların yapıldı alandır. Örnekte sadece başlık bilgisi setlenmiştir. Google Chart' ın dökümantasyonunda Configuration Options bölümünden diğer ayarlar hakkında bilgi alabilirsiniz.
chart: PieChart metodu ile grafiğin hangi element içerisine çizileceğini belirtiyoruz.
chart.draw: Draw metodu ile grafiğimizi çiziyoruz. Parametre olarak grafiğe eklenecek datalar ve grafik ayarları verilmektedir.
Tüm bu tanımlamalardan sonra grafiğimiz aşağıdaki gibi oluşacaktır.
Başarılar dilerim.