Kemal Can Kara

Geçen sene yazdığım makalemi bir örnek üzerinde anlatmak istiyorum. Projede kullanılan diller, asp.net, c#, jquery. Makale boyunca okuyacağınız konular:

• Projeye google chart kütüphanesinin entegresi,

• Jquery yardımıyla yazılan ajax methodlarıyla istenilen verilerin çekilmesi

• Farklı tipli google grafikler ve bunların data ile beslenmesi

Projeye başlamadan önce bittiğinde nasıl bir şey olacağını görmek için aşağıda resme bakabilirsiniz. Farz edin ki benim “Bilgisayar Mühendisliği” bölümünden mezun insanların hangi “title” da çalıştıklarına dair bir veritabanım var ve bunu bir “Pie Chart” ta göstermek istiyorum. Bu noktada aslında extra bir şey yapmak istedim. Hem fonksiyonların diğer parametlerini görmek hem de iş uygulamalarınızda sıklıkla kullanacabileceğiniz bir şey için yapmanız gereken ufak bir kaç teknik detayı açıklamak istiyorum. Bu yüzden farz edin ki benim bu verim yıllara dağılmış ve ben sadece tek bir link ile 2012-2013 ve 2011-2012 yıllarında mezun olan adayları görmek istiyorum aynı pie chart üzerinde. Resmi inceleyerek ne demek istediğimi anlayabilirsiniz. O halde buyrun.

Bilgisayar Müh. mezunlarının çalıştıkları title lar

1- Projeye google map kütüphanesinin yerleştirilmesi

Yapacağınız şey çok basit sayfanıza

<script type="text/javascript" src="https://www.google.com/jsapi" />

Sonrasında ise kütüphaneyi sayfa yüklendikten sonra register etmek için

        google.setOnLoadCallback();

yazmanız gerekli ve hepsi bu. Aşağıda ise sayfanızda kullanacağınız grafik türüne göre ilgili kütüphanelerin yüklenmesi var, chart, column, pie gibi grafikler corechart a giriyor, onun dışında ülke ya da dünya haritası üzerinde veri kondurma yapacaksanız geochart, ya da geomap leri de yazmanız gerekiyor.;

google.load("visualization", "1", { packages: ["corechart",
 "geochart", "geomap"] });

yazmanız gerekiyor.

2- Veriyi Oluşturmak – Sql –> c# –> jquery

 a- Veriyi Hazırlama

Benim yanda gözüktüğü gibi Pozisyon Adi ve toplam kişi sayısını içeren bir tablom  var ve bunu kod tarafında bir datatable a attığımı düşünün.

Yanda gördüğünüz veriler ise, Kariyer.net in “kariyerharitasi.com” adlı projesinden alınmıştır. Bloğumu takip edip de yahu ben bunu bir yerden hatırlıyorum diyenleri ise alınlarından öpüyor ve kendilerine bir kahve ısmarlamak istiyorum en yakın zamanda (bknz: Veriden Bilgi Edinme)

Buradan sonra datamızı google charta göndermek için json formatına çevirmemiz ve bunu ajax isteğinin cevabına vermemiz gerekiyor. DataTable dan json formatına dönüştürmek için internette çeşitli kodlar bulabilirsiniz, ya da en güzeli oturup kendiniz yazarsınız. Ben ikisini de yapıp ortaya karışık bir method yazdım. Aşağıda görebilirsiniz.

 b- Veriyi Json a Dönüştürme

Aşağıda da DataTable ınızda ki veriyi jsona dönüştüren kodu görebilirsiniz.

string GetJSONString(DataTable Dt)
 {
 string[] StrDc = new string[Dt.Columns.Count];
 string HeadStr = string.Empty;

for (int i = 0; i < Dt.Columns.Count; i++)
 {
 StrDc[i] = Dt.Columns[i].Caption;
 HeadStr += "\"" + StrDc[i] + "\" : \"" + StrDc[i] + i.ToString() + "¾"
   + "\",";
 }

HeadStr = HeadStr.Substring(0, HeadStr.Length - 1);

System.Text.StringBuilder Sb = new System.Text.StringBuilder();
 Sb.Append("{\"" + Dt.TableName + "\" : [");

for (int i = 0; i < Dt.Rows.Count; i++)
 {
 string TempStr = HeadStr;
 Sb.Append("{");

for (int j = 0; j < Dt.Columns.Count; j++)
 {
 TempStr = TempStr.Replace(Dt.Columns[j] + j.ToString() + "¾",
  Dt.Rows[i][j].ToString());
 }

Sb.Append(TempStr + "},");
 }

Sb = new System.Text.StringBuilder(Sb.ToString().Substring(0,
 Sb.ToString().Length - 1));
 Sb.Append("]}");
 return Sb.ToString();
 }

Kod tarafında yapacağımız son iş ise ajax requestimiz için sonucu yani datatable ımızı response.write a vermek.

 Response.Write(GetJSONString(dt)); Response.End(); 

 c- Jquery kullanarak Ajax ile veriyi çekme

Şimdi bir javascript methoduyla hazırladğımız veriyi çağıralım aslında biraz tersten gitmiş olduk ama olsun :). Olayı iş üstünde anlatayım dedim, şimdi şöyle ki;

function drawChart_UniBolum() {
var dataBolumBir = null;
var dataBolumiki = null;

//ajax requestine başlıyoruz..
$.ajax({
   //url yi veriyoruz
   url: '/WebSite/googleCharts/index.aspx?tip=unibolum&deptKodu=' + deptKodu,
   //data başarıyla geldikten sonra olacakları kodlamak için bir fonksiyon
   //açıyoruz, buradaki "sonuc" degiskeni kod tarafında Request.Write(...)
   //ile yolladığımız json verisi, sonra Response.End() dememizin sebebi
   //ise sayfanın işlenmesine devam edilip bizim verinin altına sayfanın
   //html ninde basılmasını engellemek yani dönecek cevapta kesinlikle ne
   //var onu biliyor ve garanti ediyorum, öhm biraz uzun oldu
   success: function (sonuc) {
       var response = $.parseJSON(sonuc);
       //şimdi google abimiz için bir datatable oluştuyoruz
       //https://developers.google.com/chart/interactive/docs/reference
       //burada daha detaylı bilgi bulabilrsiniz.
       dataBolumBir = new google.visualization.DataTable();
       //ve diyoruz ki abi benim iki tane kolonum var veri tipleri
       //şunlar ve başlıkları da bunlar..
       dataBolumBir.addColumn('string', 'PozisyonAdi');
       dataBolumBir.addColumn('number', 'Aday Sayısı');

       //burada ise artık gelen sonuc datasının içinde dönüp satır satır
       //google datatable ına atıyoruz. SonucTablosu da ne ola ki diyorsanız
       //kod tarafında oluşturduğumuz DataTable ın adıdır derim.
       for (var i = 0; i < response.sonucTablosu.length; i++) {
             var row = new Array();
             row[0] = response.sonucTablosu[i].PozisyonAdi;
             row[1] = parseInt(response.sonucTablosu[i].toplam);
             dataBolumBir.addRow(row);
       }
    }
 });
drawChartBolumSon();
}

Yukarıdaki işlemi elbette diğer tarih aralığı için de yapmanız gerekiyor, ben extra yazmıyorum orda ki sonucu da “dataBolumiki” adlı bir tabloya kaydettiğimi varsayın.

 d- Son Ayarlar

Yukarıdaki fonksiyonun sonuna eklenen methodla ile devam edip bitiricem. Artık google grafik için ayarları set edicem ve çizdirme işlemi yapıcam. Yine kod üzerinde anlatmayı uygun buluyorum.

 function drawChartBolumSon() {
     // Evet dostlar gördüğünüz gibi grafiğimizin tipini belirtiyoruz, ki
     // işin en tatlı kısmı PieChart yerine LineChart yazın çubuk grafiğniz
     // olsun (: "chart_div_UniBolum" ise grafiği basacağım div
     var chaart = new google.visualization.PieChart(
       document.getElementById('chart_div_UniBolum'));
     //listener koymamın sebebi iki ayrı dataya göre grafiği değiştirmek
     google.visualization.events.addListener(chaart, 'ready',
    function () {
      $('#adegistir').html('Aralığı ' + (current ? '2012 - 2013 yap'
         : '2011 - 2012 yap'));
    });

     //bir options dizisi oluşturup bunu grafiğime vericem,
     var options = {
         //grafiğin başlığı
         title: 'Aralık ' + (current ? '2011 - 2012' : '2012 - 2013'),
         //Verime bir sınır çiziyorum belli oran dışındaki verileri
         //aşağıda gördüğünüz gibi "Diğerleri" başlığı ile  veriyorum
         sliceVisibilityThreshold: 1 / 120,
         pieResidueSliceLabel: 'Diğerleri',
         //çizimle alakalı animasyonlar için bazı değerler girdim
         //daha yumuşak bir kullanım için,
         animation: {
            duration: 1000,
            easing: 'out'
         }
     };

     //Artık en sonunda o an ki istenen grafiği çizdiriyorum.
     if (current == 0) {
        chaart.draw(dataBolumBir, options);
     } else {
        chaart.draw(dataBolumiki, options);
     }
 }

Hepi topu bu kadar a dostlar. Dediğim gibi fonksiyonda PieChart yazan yere BarChart,ColumnChart,LineChart yazarak hemen farklı grafiklere çevirebilirsiniz. Data kısmınızın hali hazırda hazır olduğunu varsayarsak elinizde ki verilerden gerçekten oldukça kullanışlı gösterimelr elde etmek max 15 dakkanızı alacaktır. Bir tavsiyem var, mutlaka araştırın. Yukarıda iki tane data source kullandım ben farklı tarihlerdeki datayı karşılaştırmak için ki aslında tek seferde bir grafik gösteriyorum. Oysa Google amcamız bize değişen datayı yavaşça yükselen bir kolon üstünde ya da artan bir eğri olarak göstermemize imkan sağlıyor, bir animasyon oluşturabiliyor. Ayrıntı için https://developers.google.com/chart/interactive/docs/animation?hl=tr sayfasını ziyaret edebilirsiniz. Ya da yukarıdaki “options” bölümüne is3D: true parametre satırını ekleyerek grağinizin anında 3D gözükmesini sağlayabilirsiniz.

Yazımı bitirmeden yine çok başarılı bulduğum, kullanması çok kolay ama yaptığı etki çok büyük olan Geo Chart tan bahsetmek nasıl kullanacağınıza dair ufak bir örnek vermek istiyorum.

Geo Chart – displayMode: region

Normal chart çiziminden emin olun hiç bir farkı yok. Şehir listenizi veriyorsunuz yanında da diğer datanızı takır takır işliyor kendisi. Tek yapmanız gereken eğer “Mersin” varsa listenizde onu “içel” yapın 🙂

Kodu da yazayım tam olsun.

function drawChart_sehirAdaylar() {
   //yine datayı çektik
   $.get(encodeURI('/WebSite/googleCharts/index.aspx?tip=sehirAday
    &parametreler=' + theverycoreofthisworldshalltremble),
       function (sonuc) {
          var response = $.parseJSON(sonuc);
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'SehirAdi');
          data.addColumn('number', 'Aday Sayısı');

          for (var i = 0; i < response.sonucTablosu.length; i++) {
             var row = new Array();
             row[0] = response.sonucTablosu[i].SehirAdi;
             row[1] = parseInt(response.sonucTablosu[i].toplam);
             data.addRow(row);
          }

          var options = {
             //hangi ülkeyi çizdireceğiz
             region: 'TR',
             //noktasal gösterim mi yoksa boyama mı
             dataMode: 'regions',
             height: 500,
             width: 950
          };

          //bu kadar ya la
          var chart = new google.visualization.GeoMap(
            document.getElementById('chart_div_sehirAdaylar'));
          chart.draw(data, options);
    });
}

Geldik yazının sonuna. Veriden bilgi edinmek ne kadar önemliyse onu düzgün bir şekilde göstermek ve insanlara anlatabilmek de bir o kadar önemli diye düşünüyorum ki yazıyı da onun için yazdım. Sormak istediklerinizi mutlaka yazın, anlatış tarzım biraz yavan olabilir. İnşallah bir sonra ki makalemde facebook graphs a giriş yapmak istiyorum, oradan da ver elini “Big Data” :).

Çok öptüm.