Google Grafik Kütüphanesi ile Pasta Grafik Çizdirme

Google Grafik Kütüphanesi (Google Charts)


















Google, son birkaç yılda web geliştiricileri için birçok kütüphane sunmaya başladı. Bunlardan biri de Google Charts. Bu kütüphanede aradığınız herşeyi bulabilirsiniz, ihtiycınıza uygun tüm grafikleri (Coğrafik, BAR, Histogram, Çizgi, Baloncuk, Mum gibi) bu kütüphanede bulmanız mümkün. 

Daha önce sadece HTML5 ve JavaScript kullanarak BAR ve PASTA grafik çizdirmiştik, bir eleştiride bulunmak gerekirse bu örnekler Google JAPI kütüphanesinden daha hızlı çalışıyor. Tabi o kadar olur, çünkü burada Google'ın JAPI kütüphanesini <script> tagleri arasında kendi sayfamıza çekiyoruz ve bu kütüphanenin büyüklüğü de direkt olarak sayfa açılışını biraz yavaşlatıyor.


<html>
  <head>
    <!--Google AJAX API Kütüphanesi Yükleniyor -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    
      // Google kütüphanesinden Grafik fonksiyonu yükleniyor.
      google.load('visualization', '1.0', {'packages':['corechart']});
      
      // callBack fonksiyonu Çalıştırılıyor, veri tablosu oluşturulup verilere göre çizdiriliyor
      google.setOnLoadCallback(drawChart);
 
 
     
      function drawChart() {
 
      // Veri Tablosu Oluşturuluyor
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Gıda', 3],
        ['Giyim', 1],
        ['Elektronik', 1], 
        ['Seyahat', 1],
        ['Eğitim', 2]
      ]);
 
      // Çizim seçenekleri ayarlanıyor, Yükseklik, Genişlik ve Grafik Başlığı belirleniyor.
      var options = {'title':'Kredi Kartı Harcamaları',
                     'width':400,
                     'height':300};
 
      // Seçenekler fonksiyona aktarılıyor.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>
 
  <body>
<!--Pasta grafiği tutan CSS div elementi-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

DEMO 

Kaynaklar:
Google Developers 
https://developers.google.com/chart/
 
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale